Description
OPTION 1: Create a Humber Countdown component).
REQUIREMENTS: Using the provided code…
- Create a template to match the provided specifications (see the following image and Additional Specifications at the end of this document).
- The template should display “XX day(s) left in the semester.”, where XX is the number of days until April 30, 2021 17:00.
- The custom element will be called <humber-countdown>.
- The <template> will be in the included HTML document.
OPTION 2: Create a Humber Clock web component).
REQUIREMENTS: Using the provided code…
- Create a template to match the provided specifications (see the following image and Additional Specifications at the end of this document).
- The template will display the current time updated every second. Note: “:05” in the image is not “5”.
- The custom element will be called <humber-clock>.
- 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)
