Today’s goals:

• Review grading for 3rd quarter
• Discuss what you’ll be doing 4th quarter
• Create countdown timer webpage with JavaScript

 Today’s featured site:

• http://www.imdb.com/title/tt0451279/– The IMDB.com page for the movie Wonder Woman has a countdown clock to the movie’s release date on June 2, 2017

 Grades:

• Click here to see how you will be graded

 4th Quarter Preview

• jQuery, a very popular JavaScript library
• Parallax scrolling effect for webpages using jQuery
• Internet browser security and privacy
• Mobile apps- design and development options
• Independent projects

 Countdown Timer Webpage with JavaScript

• 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 Friday June 23, 2017 as my date).
  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, and body tags. Save it as countdown.html.
  3. 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.
  4. Use this code to add your JavaScript. You will have to change the date in the code to the date you want to use.
  5. Add the HTML from the code above for the paragraph so your countdown will display. Basically it’s a paragraph tag with an id of “demo”.
  6. Add the CSS for your paragraph tag (see example from W3Schools code). Change the font-color and size of your paragraph to make your countdown larger and more visible against your background image. Maybe add a text-shadow.
  7. Add a Google Font to make your page more visually interesting.
  8. Position your countdown timer by adding margin-top: some numerical value in pixels or percentage; in your paragraph’s CSS.
• Questions: How does JavaScript know the time/date? Hint: check out the getTime() method below. How does JavaScript know what time to display locally (for example, if you go here and you see it’s our time). Hint: check out your cellphone and see how it compares to your computer’s time.
• More info: Read about JavaScript’s setInterval() method (keeps the countdown clock updating in this example). The getTime() method is used in date calculations. Math.floor is making sure we don’t get decimals.