Create a smart watch UI. Demo

1. To embed an iFrame of google maps, go to google maps and search for a location. Then click on the hamburger menu on the left and select share or embed map. Copy the embed iframe code.

2. The watch asset is located in https://c0d3.com/challenges/assets/watch.jpg. Watch image is 600x800 pixels, Font size for Time: 5em with margin-top of 30px. Day and date are simple h2 tags.

3. Acceptance Criteria Make sure to pick a specific location so the red marker shows up!

   • When user clicks anywhere on the white background that has the time, the white background must slide up. On another click, it must slide back down and toggle back and forth based on user clicks.
   • The info box (including direction and rating etc.) should not appear (because it doesn't fit the screen and it creates a bad user experience). The solution is pure css, you do not have to do anything with the iframe.
   • When the page loads, the time must reflect the current time (does not have to update)

4. Steps and Points:

   • (20 points) Make a watch show up on the bottom left of the page.
   • (20 points) Create a div that is positioned where the watch face is supposed to be.
   • (30 points) Put in the map and the content that slides up and down when clicked.
   • (30 points) Add in the JavaScript to get the correct date.

Sample Code:

const d = new Date();
["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"][d.getDay()]; // Get Day
["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"][d.getMonth()]; // Get Month