So let's go ahead and get started. So the first thing we need to do is go to our clock.js and let's give this div right here a class name of until-container. This is going to contain our message remaining until you are 21 or until your birthday and that's what is going to be going in that container. So we're going to style it for that message.

So let's save that and then back in our SCSS file here let's add this in and then using our mixin let's type out @include center-item and for the top here let's put an 85% let's make sure this has got parenthesis and then left let's add 50% and then let's delete the rest of that. All right now let's save that and see if it's rendering on the screen, let's go back to our app and select a different date hit generate countdown and it's not here so let's inspect it and let's see if we can find it. So we have our div here this is our header. So just while we are here I will show you how this is working. We have our app, we have our header and our birthday form. In our birthday form, we have this div right here and that's what you're seeing right here that's the birthday form div and that's the header. Then that top div right there is this div right here.

Let's go down to our birthday form component to our clock component and it looks like we have our until container right there. We have our clock here and we don't need to look at that. But the interesting thing when you look at it is the until container so it looks like it's positioning right but it's not on the screen and I think I know why I think it's because this countdown element is right here. So if we delete that and hit enter it's going to mess up a lot of stuff but we'll be able to see this. So what's going on here if you think about it for a second is our clip path is on that div and this is within that div. So it's outside of the clip so we can't see it. So what we need to do is move that elsewhere so we need to put it on the clock as class name is equal to or class since this is the raw HTML and let's put countdown and that should make it work. All right it didn't apply but let's just do it in the code.

So in here if we go to our clock.js we need to get rid of this

and we need to put it in two places so we need it in our div right here

So that will give our list that skew back so if we choose a date hit generate we have it back. But you'll notice when we hit generate on the current date you'll notice it's not there and that's because it's no longer clipping for this message right here for this set of divs. So what we've got to do is wrap a div around these and give that a class name of countdown as well. So let's cut that part put it in here save that and it should be working.

Okay so generate countdown and it's there. So now when we select a different date we can see the until your birthday message and if we select a different year so if I put in my birthday we can see it remaining until you are 21. So that set up let's see what we've got to do now. All right let's move this mix in file

into our mix in file so mix-ins put in here

and we'll save our file and everything should be good to go. Okay so generate works and that works great. So in the next guide, we're going to finally get around to styling this even though I keep saying that we are we're actually going to get into it in the next guide. All right so let's commit our code real quick

git status
git add .
git commit -m "moved mixin, moved countdown tag, and finished clock styles"
git push origin master

In the next set of guides, we will be going over the styles for this. So I will see you in the next guide.

Resources

Source Code