HTTP5201 OPTION 1-Create a Humber Countdown component Solved

Description

 

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 (10 marks maximum).

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)
• BE SURE TO READ THE RUBRIC BELOW BEFORE YOU START Marking Rubric

 

 

Criteria	Proficient	Competent	Novice
Data Display	1	0.5	0
	The correct data appears in the widget.	The widget appears but not with correct data.	The widget does not appear.
Humber Clock -Logic	1	0.5	0
	Clock displays the accurate time, and updates every second.	Values are missing colons.	Logic does not work, or Humber Countdown was submitted.
Humber Clock -Add 0	1		0
	Clock values less than 10 have a 0 in front of them.		0 has not been appended, or Humber Countdown was submitted.
Widget Styling Accuracy	1	0.5	0
	The widget matches the mockup provided in the requirements.	The widget matches the provided mockup, except in one of the following aspects: fonts, colours, border, layout, position, or size.	The widget misses two or more of the styling specifications.
<template> Used	1	0.5	0
	A <template> element is used to create the widget, and includes the main styling for the widget.	A <template> element is used, but main styling is in a separate CSS file.	A <template> element is not used.
Custom Element Used	1	0.5	0
	A custom element with the required name is used to display the widget.	A custom element is used to display the widget, but it does not have the required name.	A custom element is not used to attach the template to the shadow DOM.
App Logic File Used	1		0
	The web page logic is in a dedicated js file separate from the widget logic.		The web page logic is not in a dedicated js file separate from the widget logic.
Criteria	Proficient	Competent	Novice
Module File Used	1	0.5	0
	The widget logic is in a dedicated js file separate from the main web page logic.	The widget logic is found in more than one js file.	The widget logic is found in the HTML file.
Module IIFE	1	0.5	0
	The module file contains a namespace IIFE that returns an object to expose a public method and protect private variables.	Widget functions are methods of a regular object.	Functions are not contained in an object.
Module DOM Access	1		0
	The widget module file does not access the DOM directly.		The widget module file accesses the DOM directly.