Countdown Timer
Applying what you’ve learned about HTML, CSS, and JavaScript, then pushing yourself to do some problem-solving and research, you are going to build a countdown timer!
You may have seen these before:
- countdown to graduation
- countdown to a vacation
- countdown to you see your best friend again
Must-Haves
- An event or big day to count down to
- A fun UI relevant to your event or big day
- A countdown in days (but could go down to the minute and even second!)
Tips
- You will need to utilize the JavaScript
Date()constructor - You will need to utilize JavaScripts
setInterval()function - You will probably have to do some work with around converting numbers to strings, and vice versa
- You will probably have to split apart strings
Here’s an example:
Iteration 1 - Wireframe & Vision
- Decide on the event or big day you will count down to
- Draw out your wireframe/vision for the way your Countdown Timer will look
- Like we did with the Twitter card, label each section with the HTML element that will be used
- Find your inspiration! Store links to images or any text you want to use in a GoogleDoc or as comments in a CodePen. Also, decide on your color palette. Color Supply is a great resource for this! FlatIcon is a great, free resource for icons. Make sure you give credit to the artists, if necessary
- Make sure your wireframe and assets are approved by your instructor before moving on
Notice that you haven’t written any code in CodePen yet. The planning process is extremely important and professional developers spend a lot of time in this phase.
Iteration 2 - Research and Pseudo-Code
- Psuedocode or whiteboard the JavaScript that will need to be in place to make your timer work.
- What DOM elements will you need to manipulate?
- How often will it “tick”?
- How will you get ahold of today’s date to compare it to the date in the future?
- Hint: The tips above give you some starting points on what to research.
- Play around in a CodePen or with some
console.log()statements to get familiar with the new tools/technologies you need to complete this project.
Iteration 3 - Implement JavaScript
- Write the code necessary to get your timer working!
Note: Once your event/big day takes place, this site will no longer… have any helpful info. If you ever want to re-set the date, you’ll update the date in the CodePen.