Birthday Countdown App Overview
Hi and welcome back to the react course. In this set of guides, we will be building out the birthday countdown application.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license

In the last guides, we built out the Mad Lib App and the way we approached building the Mad Lib App was by styling it while writing our Javascript. So you might have noticed or you might remember that the first guide we built out the header of the Mad Lib App so you might think that that's what we'll do in this app and we won't. We will be building out the app completely the functionality of it and then we will move on to styling. So if I remove the styles from this app I'll show you what I'm talking about. So we will be building out this part in the first half so it's functional. I enter my birthday and I hit general countdown you'll see I turned 21 in 175 days 22 hours and so on.

large

I can hit change date and I can put in a new date and it will say Happy Birthday because I put in the current day. But if you want to see what this looks like right now with the styles I'll go ahead and add those back in and you'll see that the styles make it look really nice. So generate Happy Birthday put in my birthday again. So you can see what that looks like. We also have that nice SASS animation you just saw. So this is what we will be building and as we build this we will be learning a few things first. Well, not the first thing these aren't going to be in order we'll just learn it throughout the course. So we will be learning about the react component lifecycle and what the methods are and how we use those throughout the application and the guide notes. I have some links to these specific things how do you react lifecycle methods. State and lifecycle and the react docs and this is the design as well. So that's one of the things we will be learning we will also be learning about javascript timing events the javascript data object SASS animations like you see right here when this bar goes up and it turns blue and gets a little bigger and we will be using Google. We will be learning how to use it effectively. It's a lot easier to find your own answers or find answers on the website instead of asking someone when you know how to look for them. And that's a real thing. You might not know how to look for them and just to give you an example. The way I learned how to use the timer in JavaScript was literally by just searching in JavaScript timer I hit enter and I think I click this link. Yeah. So basically I learned how to use it by googling that. Yeah, let's go ahead and move on to the next guide and actually start building our application. See you guys in the next guide.