To the best of your abilities, your task will be to recreate the website you see in the video

INSTRUCTIONS TO CANDIDATES

ANSWER ALL QUESTIONS

Final Project Part 2:

To the best of your abilities, your task will be to recreate the website you see in the video below. Assume 1-4hrs to do this depending on how much work you want to do refining your answer.

Download this video and watch it all the way through before continuing: https://introweb.tech/cse134-final/part-2.mp4

Notes on Implementation

1. You DO NOT need to host this website, just turn in all of the files to gradescope below.

2. The data for the completion times will be fetched from an endpoint

a. The endpoint is https://introweb.tech/cse134-final/fake-data.php

b. You MUST add a query parameter of "year" with a value between 2018 and 2022. Each year must be retrieved individually

c. Once fetched, this JSON should be stored in localStorage. Every subsequent page load should read this JSON from localStorage. In a normal webpage, you'd want to set an "expiration" date on this data to check for newer data, but for this assignment, you won't need to.

d. This data is UNSORTED and the time is in seconds

e. You will need to sort the data before displaying it on screen (hint: JavaScript Arrays have a built-in sort() function you can utilize, you will need to give it a custom comparing function as a parameter)

 f. You will need to convert this time from seconds to HH:MM:SS before displaying it on screen

g. The hours are allowed to be a single digit (e.g. 9:12:35)

h. The minutes and seconds must have a zero in front if they are single digits (e.g. 9:01:03, NOT 9:1:3)

3. Every other asset given to you should be downloaded locally, DO NOT link directly to the background image or question image. You may download Google's font locally if you choose, but it is not required.

4. The timer in the top right should display how much time is left until midnight, everyday, PST (Pacific standard time)

a. It should be in the format of HH:MM:SS b. The hours are allowed to be a single digit (e.g. 9:12:35)

c. The minutes and seconds must have a zero in front if they are single digits (e.g. 9:01:03, NOT 9:1:3)

5. Use as much semantic markup as possible

6. The pop-up dialog that displays when you click on the question mark should disappear if you click anywhere on the screen

7. Your website should be responsive, but only as much as you see in the video. Assume that if you don't see it in the video, you don't need to do it.

8. The data for this assignment is not real and has been made up. Your name & final finish time are not actually being recorded.

 

Attachments:

Related Questions

. Introgramming & Unix Fall 2018, CRN 44882, Oakland University Homework Assignment 6 - Using Arrays and Functions in C

DescriptionIn this final assignment, the students will demonstrate their ability to apply two ma

. The standard path finding involves finding the (shortest) path from an origin to a destination, typically on a map. This is an

Path finding involves finding a path from A to B. Typically we want the path to have certain properties,such as being the shortest or to avoid going t

. Develop a program to emulate a purchase transaction at a retail store. This program will have two classes, a LineItem class and a Transaction class. The LineItem class will represent an individual

Develop a program to emulate a purchase transaction at a retail store. Thisprogram will have two classes, a LineItem class and a Transaction class. Th

. SeaPort Project series For this set of projects for the course, we wish to simulate some of the aspects of a number of Sea Ports. Here are the classes and their instance variables we wish to define:

1 Project 1 Introduction - the SeaPort Project series For this set of projects for the course, we wish to simulate some of the aspects of a number of

. Project 2 Introduction - the SeaPort Project series For this set of projects for the course, we wish to simulate some of the aspects of a number of Sea Ports. Here are the classes and their instance variables we wish to define:

1 Project 2 Introduction - the SeaPort Project series For this set of projects for the course, we wish to simulate some of the aspects of a number of