JAVASCRIPT TASK URGENT

JUST COMPLETE CODE PROVIDED TO DO TASK

Task 4: Time penalty (4-time-penalty, 8 pts)

In an imaginary competition, participants can receive time penalties for various reasons. We are creating an application that displays and manages these penalties. The file index.js contains an example data structure for storing contestants. We store the identification number (id), name (name), and penalties (penalties) for each contestant. The array penalties stores the start of each penalty in JavaScript's internal date format (timestamp, milliseconds) and the length of the penalty (milliseconds) for each penalty.

Technical help: JavaScript stores dates as the number of milliseconds since 1970-01-01, and the easiest way to produce this is using the Date.now() method. The date that belongs to this internal format can be nicely outputted as follows: new Date(ms).toLocaleString().

a. (1 pt) Display the list of contestants in the list contestants in the format specified in index.html. (

Note1 45s

)

b. (1 pt) Display the remaining cumulative penalty time for each contestant at the time the page is loaded. To do this, we must check the difference in seconds between the end of each penalty and the current time, and calculate the sum of the positive values. If the cumulative sum is greater than 0, apply the penalty class to the list item!

c. (1 pt) When clicking on a contestant, display their details. The clicked contestant's ID can be read from the corresponding data attribute. The details are in the div contestant-editor, which is initially hidden. Display it and update the h2 element's content with the contestant's name. Technical help: it is advised to store the selected contestant's id in a state variable! This can later be used to index the contestants object and find their data.

d. (1 pt) Display the selected contestant's list of penalties in the details panel using the format specified in the file index.html (start + length, progress bar, remaining time). Set the max attribute of the progress element to duration, and its value to the remaining time (also displayed as text after the progress bar).

e. (1 pt) Some buttons are already prepared on the details panel. Clicking on them issues another penalty that starts at the current time (Date.now()) and its length is determined by the data-duration of the button. Update the details panel.

f. (1 pt) Make it possible to add a new contestant using the "Add new contestant" button.

g. (1 pt) Refresh the list of contestants and the details panel every second.

h. (1 pt) Save the contestants object to localStorage after every change, and read it from localStorage if it exists when the page is loaded.

INDEX.JS

// Selected elements

const ulContestants = document.querySelector("ul#contestants");

const divEditor = document.querySelector("#contestant-editor");

const btnNew = document.querySelector("#btnNew");

const inputNew = document.querySelector("#inputNew");

// Data

let contestants = {

"1": {

id: "1",

name: "Contestant 1",

penalties: [

{ timestamp: Date.now(), duration: 60000 },

{ timestamp: Date.now() - 2000, duration: 10000 },

{ timestamp: Date.now() - 10000, duration: 30000 },

],

},

"2": {

id: "2",

name: "Contestant 2",

penalties: [

{ timestamp: Date.now(), duration: 10000 },

{ timestamp: Date.now() - 5000, duration: 10000 },

{ timestamp: Date.now() - 30000, duration: 30000 },

],

},

};

let selectedContestant = null;