OPTION 1: Create a Humber Countdown component).
REQUIREMENTS: Using the provided code…
1. Create a template to match the provided specifications (see the following image and Additional Specifications at the end of this document).
2. The template should display “XX day(s) left in the semester.”, where XX is the number of days until April 30, 2021 17:00.
3. The custom element will be called <humber-countdown.
4. The <template will be in the included HTML document.
OPTION 2: Create a Humber Clock web component).
REQUIREMENTS: Using the provided code…
1. Create a template to match the provided specifications (see the following image and Additional Specifications at the end of this document).
2. The template will display the current time updated every second. Note: “:05” in the image is not “5”.
3. The custom element will be called <humber-clock.
4. The <template will be in the included HTML document.
Additional Specifications for Both Options
• <template should be attached to the Shadow DOM
• Your module functionality will be in a dedicated module file, and your main application (web page) logic will be in a separate file.
Your module file will not access the DOM.
• The Humber logo is included in the assignment folder
• Grab blue & gold colours from the Humber logo
• Black is black, white is white, light blue is #00A2E8
• width: 350px height: 200px
• Fonts are from the list of generic font families, no font files are required.
• Use your custom element on the included web page to implement it (component should appear at the top right, 20px in from the right and 20px down from the top; and should always be there, even if the user scrolls)
