Guide to Building the Clock Component in React
Welcome back to the course. In this video, we're going to be building out the clock component.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license
APPLY NOWLEARN MORE

Let's close out of all of our files, let's close our terminal, and create a new file in components. Let's say clock.js. Now I'm going to write our the basic react scaffolding. We'll pause after writing it out so that you can write it in. Let's say:

clock.js

import React, { Component } from 'react'

class Clock extends Component {
    render() {
        return (
            <div className="clock">

            </div>
        )
    }
}

export default Clock;

I went fast because it is the default scaffolding. Just go ahead and write that in while I talk a little bit. What we want to do is display a number of items in here to have a clock effect. So we will be applying a grid to this component. This is when we are going to create our second grid.

Let's go ahead and put some divs, some classNames, and some labels in here.

clock.js

import React, { Component } from 'react'

class Clock extends Component {
    render() {
        return (
            <div className="clock">
                   <div className="clock__days">
                    <label className="clock__title">DAYS</label>
                    <label className="clock__amount">20</label>
                </div>
                <div className="clock__hours">
                    <label className="clock__title">HOURS</label>
                    <label className="clock__amount">20</label>
                </div>
                <div className="clock__minutes">
                    <label className="clock__title">MINUTES</label>
                    <label className="clock__amount">20</label>
                </div>
                <div className="clock__seconds">
                    <label className="clock__title">SECONDS</label>
                    <label className="clock__amount">20</label>
                </div>
            </div>
        )
    }
}

export default Clock;

Now let's go see what this looks like in our application. We might change these classNames, but for now, we are not. So let's go into our application, and you'll realize that it is not on the screen. That is because we aren't using it anywhere. Let's go ahead and go into our code, and use this clock component in our app.js.

This is a class component, so we are going to use it like the Picker class component. I'm going to go here and say:

app.js

import React, { Component } from 'react';
import Picker from './picker';
import Button from './button';
import Clock from './clock';

export default class App extends Component {
  render() {
    return (
      <div className="grid">
        <h1 className="grid__title">Birthday Countdown</h1>

        <div className="grid__skew-dark-one-box"></div>
        <div className="grid__skew-dark-two"></div>
        <div className="grid__skew-dark-three"></div>

        <div className="grid__skew-light-one"></div>
        <div className="grid__skew-light-two"></div>
        <div className="grid__skew-light-three-box"></div>

        <Picker/>
        { Button('Generate Countdown') }
        <Clock/>
      </div>
    );
  }
}

If you want you can change the button to a class component. I almost want to do it, but I'm just going to leave it. Let's go back to our app, and you'll see that we have DAYS, HOURS, MINUTES, and SECONDS.

large

Let's place this on the screen, and you'll start to notice a reoccurring deal here. You'll see that every new component we have is placed on the grid right here. That's because it's the next available slot on our grid.

Let's place it now where it belongs. We are going to want to place it on here. We want it to be somewhere around here or something. We want it to start around there, and end about half-way and then extend across.

Let's go into inspect and let's check it out. I'm going to put this down a bit because it stretches it. Let's say that we want it to start at 3 and end at 4 on the row. Let's go into our code, let's create a new file in style, and let's say clock.scss. Then let's say:

clock.scss

.clock {
    grid-row: 3/4;
}

That should be good. It's not doing anything, but that's because we're not importing clock.scss into our main.scsss. So let's go import that.

main.scss

@import 'base';
@import 'clippaths';

@import 'picker';
@import 'button';
@import 'clock';

Now let's go into our application, and you'll see that it puts it where it belongs, except for you can't see it because it's probably back there. It's actually over here. Let's specify where it belongs now. You'll see that it's on the next available spot because we are taking that up.

large

Let's just specify that it goes from grid column 2 to about grid column 11. Let's go into clock.scss, and let's say:

clock.scss

.clock {
    grid-row: 3/4;
    grid-column: 2/11;
}

Let's reload the application, and you'll see that it's right there. If you hover over it, and click this down here, this button, you can see that extends across the entire page. Which is what we want, but it starts at the top which we don't want.

large

Let's go ahead and first give it a background color, so that we can see this without having to hover over it every time. Let's go back into our code, and put a background color. We can just do:

clock.scss

.clock {
    grid-row: 3/4;
    grid-column: 2/11;

    background: $color-gray-one;
}

Awesome. You can see the direction we are going with this. It looks very similar to our design, except for it's not skewed, and all that junk. I also noticed that it extends slightly above it whereas in our application it doesn't. So let's set the height to something like 80%.

clock.scss

.clock {
    grid-row: 3/4;
    grid-column: 2/11;

    background: $color-gray-one;
    height: 80%;
}

Now let's just use some CSS grid techniques to put it at the bottom. We've used justify-self to center it. Let's use align-self, so we can do it on the column axis. We want to say:

clock.scss

.clock {
    grid-row: 3/4;
    grid-column: 2/11;

    background: $color-gray-one;
    height: 80%;
    align-self: end;
}

That will throw it down here. That's pretty great. I'm really happy that worked.

large

Let's just give it the same skew that we have on our generate button, so let's go into our code. Let's go into button.scss, and copy this skiew over. So clip path. Another thing I'd like to do is add in the webkit-clip-path in our button. So let's paste that and say:

button.scss

   -webkit-clip-path: polygon(7% 0, 100% 0, 93% 100%, 0% 100%);
    clip-path: polygon(7% 0, 100% 0, 93% 100%, 0% 100%);

Now let's copy these two and throw them into our clock.scss file.

clock.scss

.clock {
    grid-row: 3/4;
    grid-column: 2/11;

    background: $color-gray-one;
    height: 80%;
    align-self: end;

    -webkit-clip-path: polygon(7% 0, 100% 0, 93% 100%, 0% 100%);
    clip-path: polygon(7% 0, 100% 0, 93% 100%, 0% 100%);
}

Now let's check it out in the browser, and you'll see we have our skew. That looks really, really awesome. It looks close to what we have here. Super easy, super simple. Now what we need to do is place our items in the right place. We'll do that in the next video since this video has been pretty big. We've done a lot in this video.

Let's end it by commiting our code. Let's hit command +j. Let's say git status, git add ., and I'm just going to say git commit -m "built and styled clock component". I'll see you in the next video.

Resources