React Project Two: Build a Birthday Countdown Application


Not CompletedBirthday 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.

Not CompletedSetting Up Version Control for the Birthday Countdown Project

Welcome back to the react course where we are building out the Birthday Countdown application and this guide we are going to set up our application and that's about it.

Not CompletedImplementing the Date Form Component in React

Hi and welcome back to the react course where we're building out the Birthday Countdown Application and in this guide, we will be building our first component in the birthday form component.

Not CompletedManaging State in the Birthday Countdown Application

Hi and welcome back to the react course where we are building the Birthday Countdown Application and in the last guide we set up our birthday form component and we are rendering our date picker on the screen now.

Not CompletedHow to Generate the Countdown Button's State

Hi and welcome back to the react course where we are building out the Birthday Countdown Application and in the last guide we set up our birthday countdown date picker component and the corresponding styles.

Not CompletedConnecting React Lifecycle Functions with the Clock Component

Hi there and welcome back to the react course, in the last guide we set up the generate countdown button and we briefly talked a little bit more about why setState is part of react and why we need to setState in order to re-render our component when we need to which goes a little bit into the lifecycle methods the react lifecycle methods and in this guide we will be setting up our clock component and we will also be going over a few of the react component lifecycle methods while building that component.

Not CompletedCalculating Time in React

Hi there and welcome back to the react course, in the last guide we set up our clock component and we have our birthday showing up our birth date showing up when we just hit generate component 09/15/1987 generate shows the birth date we entered and then we have it displaying the amount left without the amount just the days hours minutes and seconds.

Not CompletedUtilizing Javascript Set Interval to Start the App's Countdown

Hi and welcome back to the react course where we are building out the Birthday Countdown Application and in the last guide we set up our getTimeRemaining function which shows us how many days, hours, minutes, and seconds are left until our birthday.

Not CompletedHow to Calculate an Age in React

Hi and welcome back to the react course where we are building out the Birthday Countdown Application and in the last couple of guides we set up the timer. So when we hit generate countdown it shows us how long until our birthday is.

Not CompletedFixing Countdown Bug and Working with Various Date Cases

Hi and welcome back to the react course where we're building out the Birthday Countdown Application, in the last guide we made it so when we entered in your birthday it will display how old you are turning. Though it introduced this nasty bug into our app that isn't really nice it's telling us how many days we are alive. We want to get rid of that and we want it to be displaying what we saw earlier which is the amount of days until our birthday.

Not CompletedChanging the Date Button and Unmounting the Clock Component

Hi and welcome back to the react course where we are building out the Birthday Countdown Application and in the last guide we made it so we could generate a countdown from any birthday we enter.

Not CompletedFixing the Same Day Case for the Countdown Component

Hi and welcome back to the react course where we are developing the Birthday Countdown Application. In the last guide, we gave our clock component a change date button and we also noticed that we have a bug in our application.

Not CompletedHow to Render the Happy Birthday Message in the Application

Hi there and welcome back to the react course where we are building out the Birthday Countdown Application and in the last guide we made it so whenever we hit generate countdown on the current date it simply says Happy Birthday.

Not CompletedHow to Style the Birthday Countdown Application

Hi and welcome back to the react course where we are building out the Birthday Countdown Application and in the last set of guides we built out the functionality for our countdown.

Not CompletedHow to Style the Header in the Birthday Countdown Project

Hi and welcome back to the react course where we're building the Birthday Countdown App. In the last guide we set up our SSAS and we set up our fonts and our color variables.

Not CompletedHow to Implement the Clock Skew Style

Hi and welcome back to the react course where we are building out the Birthday Countdown Application. In the last guide we set up the skews for our header and in this guide, we're going to be adding in the skew that displays the countdown and the happy birthday message.

Not CompletedHow to Leverage Flexbox Styles in the Birthday Counter Project

Hi and welcome back to the react course where we're building out the Birthday Countdown Application and in the last guide we set up the skew for our clock component so that whenever we had generated countdown on any date it displays this box for our content and clock to appear in.

Not CompletedApplying the Happy Birthday Message Styles

Hi and welcome back to the react course where we're building out the Birthday Countdown App and the last guide we set up our skew on the clock component to contain our clock.

Not CompletedHow to Style the Clock List

Hello and welcome back to the react course where we're building out the Birthday Countdown App and in this guide, we are going to be fixing up the styles for this so it looks a little cleaner and looks more like this.

Not CompletedHow to Implement a Style Mixin for the Birthday Countdown Project

Hi and welcome back to the react course. In the last guide, we implemented the styles for our list items and we have it displaying the days, hours, minutes, and seconds really nicely better than this implementation and I said that in this guide we would be getting around to these styles.

Unsupported Browser

devCamp does not support ancient browsers.
Install a modern version for best experience.