After that in the next guide we will be getting into the generate countdown styles and then we will make a few changes to the app and then we'll be done with this app. So to get started I just really quickly want to make a change to our birthdayForm here and that is to change this from just a name tag to an actual form. So if you remember in the Mad Lib App instead of having a div we had a form so let's just change this to a form. Let's leave the class name and give it an onSubmit value and then for this if you can guess it's going to be this.handleGenerate. So it's going to be the same function and we're just not going to be using a tag anymore we're going to be using an input tag. So make sure you change that as well and get rid of the onClick and for this let's go ahead and let's put in something else let's put type = submitand that should be all we have to put in there. So let's go ahead and come back to the app and it says input is a void element tag and must neither have children nor use dangerouslySetInnerHTML. I'm also not sure why that's going on. Let's go ahead and google the syntax and I think I just figured it out but let's go ahead and google it anyway. Let's google the input tag jsx since this is not HTML, all right let's see.

We just have to put in that slash there and we want to give it a type of submit and a value of generate countdown. Let's get rid of that and save that and let's go back to the app and it looks functional. Let's go ahead and hit generate and you'll notice it reloads the page and the reason it's doing that is that we need to put this in to prevent that. So in handleGenerate, we need to pass in the event and then we need to type event.preventDefault. So it won't reload the page every time we hit that. So let's reload that generate and it's working great.

All right so let's go ahead and get started with what we are actually going to do in this video and that's going to be the styles for the date pickers. So you see we have our date picker tag here. We've already taken care of the container here so let's just worry about the date picker tag and get this thing styled. So in our completed app, we have this right here

and we have that cool animation. So let's go ahead and put that in. All right so the first thing I want to do is get rid of the border and give it that bottom line there so all we have to do is first type in .date-picker and then let's give it a border: none; and then a border-bottom: 1px solid var(--yellow-primary);. Save that and let's go back to our app and it looks like we got that there. All right let's go ahead and make a little bit bigger now so let's go back to our code and we should put in a text-align: center;because we want it to be centered. Let's get the font-size: 75 px;. I should make it a bit bigger yes much bigger and let's get rid of this background color and give it a padding: 35px 0; on top so it's a little bit separated from the button. So this is a little bit bigger and we will get to that later. But this is above the line a little bit more so that's good. Okay so now let's changed the color to this color we see here and it looks like the font is a bit thicker too. So let's get in the font and the font weight after that so let's go ahead and for the color: var(--gray-primary); and let's get a font-weight: bold;. All right that bolded it up and now we need to get this right font in here that's going to be roboto-condensed and that's looking really nice and it's looking exactly like this. Now all are missing is the style for the hover effect so let's go ahead and add that in. So using the &:focus we will do this using SCSS so first thing we wanted to do is we want the border to change color and let's put in a color here of border-bottom and let's just copy our border here and let's put it in --blue-secondary. Let's save that in here and then let's click it and so we can't see exactly what's going on because the borders are still here. So let's change the outline on the focus to none and then let's click that again. Awesome so this is changing, now let's see we got in here. Okay, so it's animating up and down so we can achieve that with the padding. If we hit inspect then open this

and select our date picker basically this whole entire div. So what we want to do is basically change just padding to nothing. So if I click that it will boost back up there and we want to get that effect but have it animating. So the way we can do that is by first setting padding to 0 and you'll notice we get that exact effect that I was showing you in the inspect element if I click that it goes up and we want to animate that. We also want this border to get a little bit thicker so let's go in here and let's say 5px on the border and then we want to transition it so we can get that nice smooth animation all .3. So let's wait for it to reload and it's not working. Why is it not working? It's because we didn't call this .3s. All right let's try that again. Awesome! So it's animating the way we want it and we have the border there. That's great and that should finish it up for this video.

Let's go ahead and just test a couple things out let's make it ease and actually want to see what happens when we do border-bottom. Okay, let's reload this and notice that nothing animates except for the bottom border. And that's because we specified which one we want to animate. So that's why we're putting all if you are wondering it's going to transition all of these properties here. So with that working that's all we need to implement in our styles for our date picker but it looks like this is too far over and the way we can fix that is by applying something like this. If you see up here the top of my screen to our date picker container with a couple different values so let's pull it over like -10%and -50% and let's go with 0 on these okay let's see if that puts us right about where we need to be. Yeah that looks really good. Let's try a couple different values on here. Yeah, I think I like 10 percent maybe 15 and that looks pretty nice. So that's all for this video. In the next video we will get into the styles for this generate button and then we will be done with the application and then we'll move on to the next app. So I will see you guys in the next guide. And before we do that though like always let's go ahead and commit our code so

git status
git add .
git commit -m "added date picker styles"
git push origin master

Ok, I I'll see you in the next video.

.date-picker-container {
    @include center-item($pull-x: -15%, $pull-y: -50%, $top: 0, $left: 0);
     display: flex;
     flex-direction: column;
     justify-content: center;

  .clock-container {
     width: 100vw;
     height: 100vh;
  }

  .date-picker {
    border: none;
    border-bottom : 1px solid var(--yellow-primary);
    text-align: center;
    font-size: 75px;
    background-color: transparent;
    padding: 35px 0;
    color: var(--gray-primary);
    font-weight: bold;
    font-family: var(--roboto-condensed);
    transition: all .3s ease;

    &:focus {
        border-bottom: 5px solid var(--blue-secondary);
        outline: none;
        padding: 0;
    }
  }

Resources

Source Code