Hello Today


Build a dynamic webpage that shows the curret day, date and time
Use arrays to lookup the names of weekdays and months.

Here is an example of a completed page


Directions
  1. Create a standard HTML page with a button and two text labels (use <p> or <div>). Make sure the labels have id attributes and the button has an onClick attribute.

  2. When the button is pressed, run a function that will have one lablel say "TIME" and the other "DAY"

  3. Find a JavaScript function that can tell you todays Date. (its usually called the Date function) From that function, get the current day of the week represented as a number. Show that number when the button is pressed. (So if its a Monday, the label should show "Today is day 1".)

  4. Create an array holding the names of all the days of the week so ["Sunday", "Monday", "Tuesday" etc]

  5. Figure out how to lookup the day of the week in the array using the number you have. Show that name in the label instead. Have it say: "Today is Monday"

  6. Now do the same for the month. Get the number of the month from the Date function, setup an array with all the month names ["January", "February", ] and look up the name of the month using the number of the month.

  7. Your DAY label should now say "Today is Monday and the month is April"

  8. Add the day of the month and year, so your label says: "Today is Monday, April 17, 2018"

  9. Do the same for the TIME label: show Hours, Minutes.

  10. Test if the hour is > 12, converted to 12 hour format and show AM or PM

  11. If the minutes are less then ten, add a zero to make "8" show "08"

  12. For extra credit, show seconds and have the page refresh automaticaly to act like a real-time clock.

  13. Style your page, make it look good, add any variations you'd like.







(c) 2018 by Code Craft Academy