Today’s Goals:

• Get hidden ghost answer code and review general code trouble-shooting steps
• Create countdown timer webpage with JavaScript

 Today’s featured website:

• https://withjoy.com/anthony-contardo-and-ari-avellino– I get to embarrass my cousin and at the same time show you an example of a countdown on a webpage!

 Hidden Ghost Answer Code

• If you couldn’t get yours to work, download this code, copy and paste it into a new Notepad++ file, and save it under a different name than your other ghost page.

 General Code Trouble-Shooting Steps

1. Re-read (or READ) the instructions in the tutorial or documentation you’re following
2. Get another set of eyes– another classmate, mine. Often others will see things we didn’t notice.
3. Check your code for common errors:
   • Missing things: opening or closing tag, pointy or curly bracket, semi-colon, quotation mark
   • Code in the wrong place: CSS should be inside style tags in head section; JavaScript should be inside script tags in body section or head section
4. Retrace your steps: comment out code– begin with most recent first- and see at what point things were working and then didn’t. If you don’t remember how to create comments in HTML and CSS, Google is your friend- look it up. In some cases, you might want to simply start over by creating a new page but saving your other one so you don’t lose that work. Sometimes a new file helps.
5. Refresh the browser again. Close the browser and relaunch your page again.

 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 June 21, 2018 as my date). Here is last year’s example (and you’ll see it is expired). One more example- a student’s countdown page for the Spiderman movie.
  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.
  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. You will need two paragraphs- one with your countdown description and one without text that has an id of “demo” so you will have a place for the countdown timer to appear. See the HTML here as an example and/or view the code of my example.
  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. See a good color chart here.
  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.