CSC1401 Days to Go

Your Task

"Days-To-Go" is an interesting and useful feature in website design. It shows up the remaining number of days (or even with hours, minutes, and seconds) towards an event. For example, at anytime you visit the official website of Tokyo 2020 Olympic Game (https://tokyo2020.org/en/), you will see such a feature showing the number of days, hours, minutes and seconds towards the starting date of Tokyo 2020. In this assignment, you are going to write a JavaScript program to implement the Days-To-Go feature.

The Concept of Time in JavaScript

In JavaScript a time is defined as a Date Object. Each date object stores its state as a time value, which is a primitive number that encodes a date as milliseconds since 1 January 1970 00:00:00 UTC. Thus, a date later than 1 January 1970 00:00:00 UTC will have a positive time value, whereas an earlier date will have a negative time value. On the basis of the common timeline (which we all live on), the distance between any two dates can be calculated using their time values in milliseconds. Figure 1 illustrates the concept, where C is a date earlier than 1 January 1970 00:00:00 UTC, and A and B are later with B being further than A.

Figure 1: The Difference Between Two Date Instances: see image.

Functional Requirements

Constants and Variables

Within the script section, create constants and variables following professional conventions and initialise them using right values. Some constants and variables have been suggested in the following tables. You should create more when necessary.

Table 1: Constants

Table 2: Variables

Calculation

1. Create a Date object for the event by using the variables created previously.

• Use one prompt function to input the name of event as Figure 2.
• Use another three prompt functions to input the year, month, day of the event one by one and then transfer them to the Date constructor.
• Mind the order of arguments sent to the constructor;
• Note that month numbers in Date constructor begin at 0 for January ('1' entered in prompt function), 1 for February (2 entered in prompt function) and so on;

Figure 2: Illustration of the four inputs: see image.

2. Create a Date object for the current time.

• No arguments need to be supplied to the constructor.

3. Calculate the difference between the current time and the event time (assume it is the starting time 0:00:00 a.m. on the date of the event):

• Use the getTime() member function to get a Date object's time value in milliseconds
• Deduct the time value of current time by using the value of event time.

4. Calculate the number of days to the event:

• Divide the time value difference by the number of milliseconds in a day.
• Use the Math.floor() function to reduce the result number to an integer.

Presentation

Figure 3 shows a sample output when running the "Days-To-Day" program. Note that

• the information should be displayed using the alert() function;
• wherever possible you should use variables in expressions instead of explicit values (e.g., literals and numbers), for example, using the variable created for the name of event instead of a string value of "Christmas"; XXXX is the number of days to the date of event.
• the layout of output may vary depending on web browsers.

Figure 3: Illustration of the Output: see image.

Testing

Test your program by enter the date of Christmas in 2021 to see whether the outcome is correct or not.

Non-functional Requirements

Structure of the Source Code

• All code should appear in the script section in the head of the HTML document
• Do not write any code in the HTML body. All functionality are delivered by JavaScript.
• In the script order your code as follows:
  • Constants;
  • Variables and objects (declared and initialised);
  • Other statements.

Comments

• You are required to add at least three comments to the source code.
• Do not comment every single line, instead, comment on blocks of code with a common purpose.
• Do not simply translate the syntax into English for comments, instead, describe the purpose of blocks of code.