Shape of the Day:

• Create a countdown timer webpage with JavaScript
• Learning about JavaScript time and date methods and objects

Website of the Day:

https://cat-bounce.com/ – JavaScript is used here to bounce the cats around!

Background code of how to make your timer work:

• To keep the countdown clock updating every second, read here about the setInterval() method
• To clear the countdown when it has expired, read here about the clearInterval() method
• To calculate dates, read here about the getTime() method
• In order to avoid decimals, you will also need to read about the Math.floor static method

Time to create your countdown page!

• Using JavaScript and CSS, you will now create a countdown timer page. JS is going to handle the countdown while CSS will be used to style the page.
• Mr. Chastkavich will show you an example of the final product and what it should look like.

1. Pick a date to count down to (your personal grad date, this year’s last day of school, spring break, your birthday, Christmas, etc.)
2. Open Visual Studio and create a basic webpage. Save the file as countdown.html. Set up a wrapper inside a style tag and add margin: 0px auto; width: 100%; and height: 100%.
3. Add a div tag right below your opening body tag and give it an ID of wrapper. Add the closing div tag before your closing body tag.
4. Download a background image (Pexels.com or unsplash.com) and give credit to the image.
5. Add opening and closing script tags before your closing body tags so you have a place to put the JavaScript code.
6. Copy the JS code from here and add it inside of your script tags. Change the date and time to the date you want to use.
7. Add a description of your countdown to your webpage inside of either headline or paragraph tags. Style your headline or paragraph. Add a Google font and a text shadow.
8. Ensure to add opening and closing paragraph tags with the ID of “demo” so the getElementById() method can display the countdown on your webpage.
9. Position the countdown timer and other text by adding margin-top to selectors that would make sense.