If you go to the design, you can see what this looks like. We're going to develop this component. We are going to be using Font Awesome to get the icon in there because I don't have these icons. I was not provided them by the designer, which isn't a problem because now I can show you how to use Font Awesome which is pretty dope.

Let's go ahead and do that. Let's go to our code and create a new file in components. I'm going to close out of all of my files. Let's call this changeDate.js. We can make this a functional component. As a matter of fact, let's go to button.js, let's copy it, and paste it into changeDate.js.

Then let's change Button to ChangeDate, and this to ChangeDate. Let's then change this className to change-date. Let's leave the callback. Now we can quickly use this because we have the callback, so let's go over to app.js. Under <Clock/> let's put in ChangeDate, and use Auto-import. Make sure you import this up at the top.

Let's call it like a function. Let's say:

app.js

  renderItems = function() {
    if(this.state.active) {
      return [
        <Clock/>,
        ChangeDate('Change Date', () => this.setState({ active: false }))
      ]
    } else {
      return Button('Generate Countdown', () => this.setState({ active: true }))
    }
  }.bind(this)

This is going to show us what we want now. Let's go to our app and see if we can find it. If we can't, we will add the styles, and then find it. You see that it placed it where it usually places components. Now when you hit that, it shows this again. That's exactly what we want.

Now let's just place it over here. I'm going to go here, and I'm going to inspect the element, and then I'm going to select grid. Now I'm going to click back over here, and think about where we want to place this. We want to put it right here, next to our date, so let's do that.

Looks like it's on row 2/3 and column 4/5. We could also put it in column 3/4. We are going to have to transform it a bit to get the effect we want anyway. We are going to use translations and stuff, so either of these columns. I'm going to use 4/5 initially, probably going to switch back to this I think.

Let's go into our style here, let's create a new file, and let's call this changeDate.scss. In here let's just say:

changeDate.scss

.change-date {
    grid-row: 2/3;
    grid-column: 4/5;
}

Let me double-check that the browser, so it's 4/5 and 2/3. Now let's just import this into our main. So let's say:

main.scss

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

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

Sweet. Let's go check it in the browser. It should be in here somewhere. So we can't find it. It's probably because of the z-index somewhere. Oh, it's because we aren't hitting generate. So let's hit generate, and you'll see that it says "Change Date".

Now we just need to add in some styles, because this clearly isn't what we want. Let's go into changeDate.scss, and let's apply these styles. Let's go ahead, and just say:

changeDate.scss

.change-date {
    grid-row: 2/3;
    grid-column: 4/5;

    font-size: 24px;
    line-height: 19px;
    text-align: center;
    color: white;

    background-color: transparent;
    border: none;
}

Now you can see that it's where we want it with the styles, but it's not really aligned next to our clip-path.

Let's just apply transform. Let's say:

changeDate.scss

.change-date {
    grid-row: 2/3;
    grid-column: 4/5;

    font-size: 24px;
    line-height: 19px;
    text-align: center;
    color: white;

    background-color: transparent;
    border: none;

    transform: rotate(-72deg);

    align-self: start;
    justify-self: start;
}

That looks pretty good. You can fine tune it if you want, but I'm going to leave it like this.

I'm going to try getting rid of align-self, and see where that puts it. It should put it down a bit. I'm going to hit command + f, and that is how it is highlighted. We need to pull it back a lot, so let's say on ths transform, let's say:

changeDate.scss

.change-date {
    grid-row: 2/3;
    grid-column: 4/5;

    font-size: 24px;
    line-height: 19px;
    text-align: center;
    color: white;

    background-color: transparent;
    border: none;

    transform: rotate(-73deg) translate(-50px, -50px);

    // align-self: start;
    justify-self: start;
}

That actually looks really good.

Let's do this: let's add in the Font Awesome after we add in the font. Let's get rid of that align-self, then let's put justify-self next to grid-column and grid-row. Let's type in font-family and add in a font-weight:

changeDate.scss

.change-date {
    grid-row: 2/3;
    grid-column: 4/5;
    justify-self: start;

    font-size: 24px;
    line-height: 19px;
    text-align: center;
    font-family: "Roboto Condensed";
    color: white;
    font-weight: 100;

    background-color: transparent;
    border: none;

    transform: rotate(-73deg) translate(-50px, -50px);  
}

Now let's add in Font Awesome. If you go to Google, type in font awesome, and click on Fontawesome.com. You can see this icons. Go ahead and hit get started(Please Note: website and CDN have been updated: it now says "How to Use", and the CDN version is 5.0.13). We are going to use this CDN:

index.html

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

Copy this link right here, and follow these directions. It says copy & insert this code. We are going to do it a little differently since we are working in a React application. Go to index.html, and right below our fonts let's paste that in. So we have stylesheet and fontawesome.

index.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link href="https://fonts.googleapis.com/css?family=Alegreya|Montserrat|Roboto+Condensed:400,700" rel="stylesheet">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
  <title>Birthday Countdown</title>
</head>

<body>
  <div class="app-wrapper"></div>
</body>

</html>

I want to close out of index.html, and now we have access to these fonts. Now it say learn how to add it in your markup, click on that. (Please Note: updated website says "learn how to reference it in your markup") We basically just need to do this. So I'm going to copy this first one right here, and paste this into our changeDate.js component.

So let's go ahead and paste it in here, and make some changes:

changeDate.js

import React from 'react';

const ChangeDate = (title, callback) => {
    return (
        <button className="change-date" onClick={callback}>
            <i className="fas fa-camera-retro"></i>
            {title}
        </button>
    )
}

export default ChangeDate;

It looks good to me.

Let's go ahead and add some padding to our i. Let's go to changeDate.scss, and let's say:

changeDate.scss

    transform: rotate(-73deg) translate(-70px, -70px); 

     i {
        margin-right: 20px;
    } 
}

Let's just move our translate now to something like 70px. That looks really good to me. We're going to be moving this anyway, so don't worry about the placement.

Let's also get rid of that camera. We don't want a camera, we want a calendar, so we let's go to Font Awesome, and let's go to icons. Then you can put any icon you want. Obviously, I'm going to put in a calendar.

It has the code right here. I'm just going to copy the fa-calendar-alt instead of this whole entire i because I don't want to change className. Let's go back into our code, let's go into changeDate.js, and I'm going to replace fa-camera-retro with fa-calendar-alt.

The calendar looks nice. It looks very close to our design calendar. I actually think it looks better than this one. So that's how you put in the change date button. It's functional and it does what we want.

Let's go ahead and move on to the next video where we will place this a little bit better. Then we start on geting the functionality in, and then we'll be done with the application. The functionality is relatively quick. It may only take a couple guides.

So I'll see you in the next video, let's just commit our code. Let's say git status, git add ., and for the commit message what I'd like to say is git commit -m "added change date component and gave it functionality". I'll see you in the next videos.

Resources

• Source Code
• Fontawesome.com