- Read Tutorial
- Watch Guide Video
Though we won't be styling it so those things actually appear in the skew yet. In this guide, we're just going to get the skew in there to finish off with clip paths before we get into everything else. So first thing what we should do is add an @import './clock' and let's actually do components/clock.
And the reason I want to do this is just that we did it in the last app guides the Mad-Lib App and I want to keep it consistent so in style let's create a new folder called components much like we have here let's add in our clock.scss. All right so let's make sure this is importing let's re-render this let's see component/clock that should work. Let's do this let's start styling so in our clock.js let's give this div a class name of countdown-container let's just call it countdownin our clock.scss. All right so it's it's loading so yeah let's let's get styling. So name this the countdown and in clock let's put some values in here. So the first thing we know is we want a width of 100vw and a height of 100 view height. And the reason we're doing this is not that it's going to be that big it's just because we're going to basically clip it out of the entire size. And we do this because it helps us kind of visualize things as we're typing out the clip path. So it makes more sense and you'll come to understand what I'm saying once we get this in. So 100 view width and 100 view height and background color of var grade primary and this grade can be found again on the main base.scss. And if you really want to you can spell gray with an e someone wanted it to be spelled with an e in the last guide so you can do that or you can use an a. If you actually Google gray I think it says something about the spelling and yeah it says use gray for American English. If you're in the United States probably goes on about gray. I don't know someone told me they liked that spelling but I am gonna use gray with an a. That's the way I do it but yeah let's get back to styling. So in our clock make that gray primary and let's go ahead and give it a color of white and that's just so we can make everything in our clip path white. We actually don't need to add this right now but the reason we are doing this is that when we get text and there we want it to be right. Okay and we made a mistake in the last guide and we put birthday form in her header. So cut that out and put it below our header in our app.js.
And now you should be able to scroll down and see it right here. So hit generate and you'll see we have our 100 width 100 height countdown clock skew right here and we have our change date here of your change date that will go away. Ok now let's give it an absolute positioning so it will fit right here. If you remember we used absolute to get the birthday message up here and we're going to do the same thing to get this over this and then we'll clip it out and put it on right there. So in our clock.scss let's give it a position of absolute, top of 50 percent, left of 50 percent. And then let's save that and you'll see what happens. So it gives it to us right here so it's 50 percent of the top 50 percent right there if we put zero percent should bring it up but we're not going to do it that way. We're going to do it the way it should be done. So make those 50 percent and then you transform translate minus 50 percent minus 50 percent. And that should center it directly on the screen. And the reason we're doing this is that we get the same effect in this case because it's covering the whole screen. But if we're to make this 50 view width and let's say 30 view height and save that you'll notice it's directly in the center. So if I were to do it that way we were originally going to do it top zero left zero as it goes up here.
So I just do this generally because then I can kind of keep the same format going on even if it's the entire screen and I'll talk about that later on why I do that because I use mix-ins to make things a lot simpler. So yeah that's how you get it in the center.
.countdown {
width: 100vw;
height: 100vh;
background-color: var(--gray-primary);
color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Now let's get that clip path in there so the first thing we should do is just go to our header.scss let's just copy one of these clip paths to go off of. So let's say clip path polygon 0 100 0 0 0 40 60 100. So given that now let's go ahead and let's get it where we want it to be. So this is 16 percent and that's how far it goes out so we want this to be halfway down like this and I did this one wrong but we're going to do it right this time. So we want it to be about halfway down and we want it to be right touching there. So we want it to not be 16 percent now but we want it to be 8 percent about. So let's go ahead and type in 8 percent right here and see what happens. All right so it's about halfway. Let's go ahead and fill in a couple of the values. So we want it to be about 70 down right there and right there. So we can start there and then about like 50 right here and 50 right here. So let's type in 70 right here and let's see 50 percent 50 percent. Let's see what happens. All right so that's working. Now we're kind of flipping it we are kind of doing it a little bit differently than we did with the skews. We're using the points a little bit differently but don't worry about that. Let's make this 16 percent, I think this 92 and let's try 86. So the reason I only wanna do 86 is that we're doing 16 on the left here and we want this to be going to be I was going to do 86 but if you do 100 minus 16. That's the value you should put which is 84 which is going to pull it out more. So this is a little bit off and the reason it is because if you go back to our header.scss you'll see that our main header or subheader is brought down 40 percent. So this is taking up 60 percent. So we have to change the values based on these. So the way we can do that is by taking 6 percent and since we're 10 percent off we can times 16 percent. So 16 times point nine since we are 10 off and we get fourteen point four. So the value we want to put it here is fourteen point four and if you kind of thought about how we got this value we want to do the same things 100 minus fourteen point four eighty-five point six save that and it should position it. So the skew is now correct it's now aligned with this and that's exactly what.
clip-path: polygon(14.4% 50%, 92% 50%, 85.6% 70%, 8% 70%);
So we got that in there and that's it for this guide. I'll just show you real quick what happens when we hit generate so it appears there we can change it to a different date and it might not appear there. All right it appeared there because we gave the tag a global value. So it's in the same container so it's going to be applying the styles to both states Happy birthday and the days and real quick before we end this I kinda want to change this so it's not in divs and it's in a list. So let's type in an unordered list and in here let's just copy this and change all these divs to list tags. Then let's make these data portions let's make it a paragraph and the reason we are doing this is that in a later guide we're going to need to style these a little bit differently. I'll show you right here and I'm talking about so if I hit generate on a date that is not today you'll see that we have days, hours, and then we have these below it. So we want to make these paragraphs so we can style them a little bit differently. So just wrap those in paragraphs and that's it for this guide.
<ul className="countdown__clock"> <li>DAYS<p>{data.days}</p></li> <li>HRS<p>{data.hours}</p></li> <li>MINS<p>{data.minutes}</p></li> <li>SECS<p>{data.seconds}</p></li> </ul>
Let's real quick give this a className='countdown_clock'.
Finally, that is it for this guide and let's go ahead and commit our code.
git status git add . git commit -m "added skew to clock component" git push origin master
I want to push now because we completed our skew so it's good time to push. All right I will see you in the next video.