Date - time
Solution
...
- 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
titletag: Good morningdiv#result: black text on a light gray backgrounddiv#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
titletag: Good daydiv#result: black text on a white backgrounddiv#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
titletag: Good nightdiv#result: white text on a black backgrounddiv#result: a welcome message (Good night), the date and time, the server timezone and an image assets/dateTime/night.png
- Between 6:00 and 10:00
Tip
- 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 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 a simple script to submit the form when the select list is changed (
onchange="this.form.submit()")