Today’s goals:

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

 Today’s featured site:

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

 Countdown Timer Webpage with JavaScript

Live example: https://www.planetfitness.com/TeenSummerChallenge
FYI- you can work out for FREE this summer at Planet Fitness and there is one in Medford!!!!!!!

How it works

• setInterval() method – keeps the countdown clock updating every second
• clearInterval() method – clears the countdown when it has expired
• getTime() method– used for date calculations (JavaScript counts in milliseconds from January 1, 1970 and will calculate, in our example, the time elapsed between a date in the future and right now by using the getTime() method on two date objects- now and the future date)
• Math.floor– used so we don’t get decimals

Create a countdown page!

• You will use JavaScript and CSS to create an online countdown clock. The JavaScript will handle the countdown and CSS will be used to style the webpage. Here is my example page  showing a countdown to the last day of school (I used June 13, 2019 as my date and 2:18 pm as my time). Here is last year’s example  (and you’ll see it is expired).
  1. Pick a date to count down to (graduation, prom, last day of school, a game release, upcoming trip, movie release, etc.)
  2. Open Notepad++ and set up a basic webpage with opening and closing html, head, title, style, and body tags. Save it as countdown.html. Set up a wrapper inside of your style tags- #wrapper 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 (try Pexels.com  or Unsplash.com ). If you need a refresher on the CSS for adding a background image, see here .
  5. Add opening and closing script tags before your closing body tags so you have a place to put the JavaScript code you are going to copy and paste.
  6. Copy just the javascript code from here  to add inside of your script tags. You will have to the date and time in the code to the date you want to use.
  7. Add a description of your countdown (Countdown to Summer, Countdown to Graduation, etc.) to your webpage inside of either headline or paragraph tags. Style your headline or paragraph by adding CSS properties and values inside of the style tags in your head section. Use the color and font-size properties. Also add a Google Font . Maybe add a text-shadow  to help your text stand out more against the background image you chose.
  8. The getElementById() method is used here to display the countdown on your webpage. Add opening and closing paragraph tags and give the paragraph an ID of “demo”. Code example here: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_countdown 
  9. Position your countdown timer and other text by adding margin-top: some numerical value in pixels or percentage; in your paragraph’s (or headline’s) CSS (style tags inside of your head section).