Date - time

• Add an extra select list to the form, with which you can add (0 to 24) hours to the current (server) time
• Show a message and image according to the (simulated) time, i.e. the current time with the selected number of hours added
  • Between 6:00 and 10:00
    • title tag: Good morning
    • body tag: black text on a light gray background
    • div#result: a welcome message (Good morning), the date and time, the server timezone and an image assets/dateTime/morning.png
  • Between 10:00 and 22:00
    • title tag: Good day
    • body tag: black text on a white background
    • div#result: a welcome message (Good day), the date and time, the server timezone and an image assets/dateTime/day.png
  • Between 22:00 and 6:00
    • title tag: Good night
    • body tag: white text on a black background
    • div#result: a welcome message (Good night), the date and time, the server timezone and an image assets/dateTime/night.png

Tips

• Note that the simulated time can never be higher than 24 hours: 6h + 20h = 2h (not 26h)
• Add some embedded css to overwrite the default (body) colors of the framework and to style div#result
• If your (server) times are wrong, you probably forgot to adjust the timezone to 'Europe/Brussels', as explained in our course
• Add some simple jQuery-code to submit the form when the select list is changed