React Project Two: Build a Birthday Countdown Application


Not CompletedHow to Implement Additional Message Styles for the Birthday Countdown Project

Hi and welcome back to the react course. In the last guide, we developed a mixin called center-item that helps us center our items and position them on the screen where we want them to be pretty easily and in this guide we are going to style the until message so when we hit generate countdown after selecting a date we're going to style this message and we are also going to be moving this mix in to our mix in file.

Not CompletedHow to Implement Custom Date Picker Styles in React JS

Hi and welcome back to the react course and in the last guide we set up the birthday form component's styles and in this guide we will be handling the date picker styles.

Not CompletedHow to Style the Generate Countdown Button

Hi and welcome back to the react course, in the last guide we took care of these styles for our date picker and in this guide we are going to add styles for the generate countdown button.

Not CompletedDeep Dive: Component Lifecycle in React

Welcome to this deep dive on react's component lifecycle workflow. Now if you were relatively new to react then the component lifecycle methods may seem a little bit confusing.

Not CompletedReact Countdown Application Overview and GitHub Setup

Hi and welcome back to the course, in this video we are going to start on this Birthday countdown application.

Not CompletedHow to Push the Countdown Application to the Web with Heroku

Welcome back to the course. What we're going to do in this video is push our app up to heroku so we can see it live in the browser.

Not CompletedHow to Use Clip Paths with CSS Grid

Welcome back to the course. Great job in getting the app setup pushing it up to github and heroku. So that should set us up pretty good to go full speed in building out this application.

Not CompletedAdding the Second Skew with CSS Grid and Organizing the Scss Code in React

Welcome back to the course. In the last video we set up our CSS grid and a few skews. In this guide we are going to be building out the skews for this bigger skew, and we're going to be taking a very similar approach.

Not CompletedHow to Add the Website Heading on Top of Background Skews

Hey welcome back to the course. In the last video we finished our background skews for now. So in this video we're going to place our label which is Birthday Countdown, and then start on our first component rather sense the app doesn't really count.

Not CompletedInstalling React Date Picker and Moment JS

Welcome back to the application. In this video, we are going to build out our first component.

Not CompletedAdding Styles to the React Date Picker

Alright, welcome back to the course. In the last video we set up our react date picker and we talked a little bit about how it worked, we placed our picker on the screen, and we talked about some console logs we were getting.

Not CompletedHow to Create a Functional Button Component in React

Great job in going through that last set of videos, where we develop the Picker component. In this video, we are going to develop the button component.

Not CompletedGuide to Building the Clock Component in React

Welcome back to the course. In this video, we're going to be building out the clock component.

Not CompletedAligning Nested Clock Elements with CSS Grid

Alright, in this video we are going to add a grid so we can display our div's on here with the hours, minutes, days, seconds on the screen really easily, so we're not two grids in here now.

Not CompletedRendering Content with State in React

What we are going to do in this video, is basically make it so that when we hit generate it shows this, and when we hit change date it's going to show this.

Not CompletedBuilding a Change Date Component in React

Good job in going through that last guide showing you how to use state a little bit! In this video, we're going to develop a component that will display right here that says change date.

Not CompletedCreating the Large Date Heading and Remaining Label Elements

Welcome back to the application. In the last video, we built our ChangeDate component, got it functional, and included a Font Awesome Icon.

Not CompletedFixing Bugs Related to Skews

Before we get into that functionality, what I would like to do is get rid of one of these skews.

Not CompletedCreating a Timer in React

All right great job in getting in all the styles for this application. That's really the bulk of this app, the functionality is really pretty limited so we're going to be done really soon.

Unsupported Browser

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