- Read Tutorial
- Watch Guide Video
In this guide, we're going to make it so we can actually see something in this box here. We're going to put in our countdown basically into this box and we'll be going over a little bit of what Flexbox is and how to use it in this specific case. So the first thing we're going to do is make this appear right there so it's actually accurate. This change day I believe is throwing it off. So if we are to go into our birthdayForm component and comment this out. You'll see that it appears perfectly when we had generated countdown so the skew is perfect now let's go ahead and put this back in and we will apply some styles to this to 1) make it appear up here like in our app and 2) make it not do that. So let's give it a className= change-date and in our clock.scss let's give a, but first let's go into our clock.js and let's add this tag so countdown underscore clock and change date.
So in our clock let's go ahead and first let's apply styles to the countdown clock so that it will appear in our skew that we made in the last guide. So I'm going to give it a position: absolute; and you might remember why we're doing this and that's so we can put it anywhere on the screen. Let's give it a top: 50%; and left: 50%; and then let's give it a height: 20%;and the reason we're giving it a height of 20 percent is that in our clip path we have it starting at 50%. So if I hit generate, starting at 50% and a bottom here is that 70%. So if you do 70 minus 50 you get 20 so we want to do 20%. Now let's give it a width of whatever it is this minus this is so 85.6 minus 14.4 is 71.2%. So with 71.2% and then we'll save that and we will see what happens. Make sure it's a date that is in the past or not just not today. So it's not trying to say happy birthday rather it's showing our countdown clock here. All right so you'll see it's on the screen which is great but we don't want it there. We want it to be over here. So let's pull that over and real quick let's just add in the padding: 0; so we know that's not affecting anything in my move a little bit. All right let's pull over to as well as transform: translateX(-50%). That will pull it to the left about 50% of what this is worth or all the way over. So this is width is a lot bigger. So it's 71.2% so it's pulling us over about 30.6%.
.countdown__clock {
position: absolute;
top: 50%;
left: 50%;
height: 20%;
width: 71.2%;
padding: 0;
transform: translateX(-50%);
}
All right so with that over now we want it to actually display like we see here and the way we're going to do that is by using Flexbox. If you google Flexbox and I showed you this in the Mad Lib App, this exact guide but I use it whenever I get stuck with the Flexbox or need to learn a certain term or value. So first thing is this defines the flex container and inline-block depending on the given value. It enables a flex-content for all its direct children.
So that's the very first thing we want to add to make this conform to Flexbox. So let's just put it right here let's say display: flex; save that it shouldn't change anything in her app. All right it does so the reason it does this is that the flex direction It's defaulting to row. If I put this as column we will get this effect that we were having before. All right yeah so if I delete that we want row so let's leave it like that. That's the default value and let's scroll down to that and see where it says that so if you hit command F we can actually just search for it. So command F you'll see this has popped up here and then you can just type in something like direction. Oh wow, it's right there I literally did not even see that. So we want row which is the default value and I think it says that in here.
All right yeah row is the default value and then we could do row-reverse to get the reverse value if we were to do that in our app we'd see the seconds first so if I do row-reverse this will kind of just reverse and it will be all the way to the right. So we have seconds, minutes, hours, and days instead of hours, minutes, and seconds. So get rid of flex direction save that and the next thing we need to do is make these even spaced. So like that.
So the way we can do that is by typing in justify-content: space-between; and that will work and you'll see that right now. So sweet that is the way we want it we might want to use space around I can't remember what I used when building this let's type in space-around just to get down there. So we have container justify-content. We have space-around, space-between and yeah we want space-around because it's going to give space around it as well as not just between them between just gives them between the elements and I mean another way we can do this is by using space-between. And then just getting a padding-right and padding-left of some value and we get the same effect but it might be a little bit off and that's just more code to write. So let's just do space-around hit save and you'll see we're getting a perfect layout here in terms of the space between them.
justify-content: space-around;
Let's go ahead and let's make it so spacing evenly so you'll see that this is a little too high and this is a little too big. So we want it to be directly in the center and the way we can achieve that is by using align-content.
We want to get something like center yes we want it to be centered right in between. So if we type in align-content: center; that should give us the effect we're looking for. Let's see it might be items we're looking for and yeah it's align-items: center; and it should be center now awesome sweet that already looks great.
align-items: center;
That's how Flexbox works and when we get around to the Happy Birthday message when you hit it on the same day we're not going to use Flexbox and I'll tell you why when we get around to it. So that's how you set this up using Flexbox let's get to change date now and style that in there. So right now it's down here and let's put it right above this. Save that and we added that. All right now let's add the style. So the first thing we want to do is make it color: white; and then position: absolute;, left; 20%;. So it's going to be 20% from left and from the top: 45%; let's get a font-weight: 100; and a font-size: 18px; to be consistent with this size. All right so this didn't work so it must be overridden somewhere probably since it's an a tag and we probably did that somewhere so let's just mark this as important for now. Save that and look it's right there. That's perfect that's exactly where we want it.
change-date {
color: white !important;
position: absolute;
left: 20%;
top: 45%;
font-size: 18px;
font-weight: 100;
}
And that's all we need to do to style that. So let's go ahead and in the next guide. We will find out how we can put the Happy Birthday message on the screen when it's the same day or when the countdown completes. And one thing you'll notice is that this is perfect now. And that's because we put this in that position we want it in. So yeah let's go ahead and commit our code and then get into the next video.
git status git add . git commit -m "added countdown clock styles and change date styles"
All right I will see you in the next video where we will get that happy birthday message on the screen.