Enhance the countdown application to use objects and libraries

1. run application in Chromw, add an event name and event date, and click the countdown button to see how it works. Then , review the code in the event handler for the click event of the countdown button, Note that the code is reletivelydifficult to read and understand.

Add three JavaScript Library files

2. Add three JavaScript files ti the application. Name them library_event, library_validation, and library_messages.

4. Add script elements to the head elements of the index.html file to include these new lines. For now, dont worry about the order of the files.

Use a constructor to create an Even object type in the event library file

5. In the event library file, code a constructor function named Event that accepts two parameters named name and date String. Store the values of the se parameters in properties of the same name.

6. Add another property named date. Set this propertys value to a new Date object, passing it the value of the dateString parameter.

7. Back in the event handler for the click event of the Countdown button, find the code that loads the data entered by user into variables named event and date. Replace this code with a new instance of the Event object. Be sure to pass the values entered by the user to the constructor.

8. Replace all the code in the event handlerthat uses the event or date variables with code that uses the name, dateString, or date property of the instance of the Event object. Then, test the application to make sure it will works correctly.

9. Add another property named days to the Even consturctor.

Please Check the CSS, Html and .js files

Html file:

Countdown To...

Event Name:

Event Date:

.js file:

"use strict";

$(document).ready(function(){

$("#countdown").click( function() {

var event = $("#event").val();

var dt = $("#date").val();

//make sure task and due date are entered

if (event.length === 0 || dt.length === 0) {

$("#message").text( "Please enter both a name and a date." );

return;

}

//make sure due date string has slashes and a 4-digit year

if (dt.indexOf("/") === -1) {

$("#message").text( "Please enter the date in MM/DD/YYYY format." );

return;

}

var year = dt.substring(dt.length - 4);

if (isNaN(year)) {

$("#message").text( "Please enter the date in MM/DD/YYYY format." );

return;

}

//convert due date string to Date object and make sure date is valid

var date = new Date(dt);

if (date.toString() === "Invalid Date") {

$("#message").text( "Please enter the date in MM/DD/YYYY format." );

return;

}

//calculate days

var today = new Date();

var oneDay = 24*60*60*1000; // hours * minutes * seconds * milliseconds

var days = ( date.getTime() - today.getTime() ) / oneDay;

days = Math.ceil(days);

//create and display message

if (days === 0) {

$("#message").text( "Hooray! Today is ".concat(event.toLowerCase(),

"! (", date.toDateString(), ")") );

}

if (days < 0) {

//capitalize event

event = event.substring(0,1).toUpperCase() + event.substring(1);

$("#message").text( event.concat(" happened ", Math.abs(days),

" day(s) ago. (", date.toDateString(), ")") );

}

if (days > 0) {

$("#message").text( days.toString().concat(" day(s) until ",

event.toLowerCase(), "! (", date.toDateString(), ")") );

}

});

$("#event").focus();

});

Please help me to complete this task.