Reference no: EM132276290

Assignment - Decisions, Repetitions, Built In Objects

ASSIGNMENT OVERVIEW:

Your task in this assignment is to create the HTML markup and JavaScript code that simulates play of the 649 lottery.

In the 649 lottery, a player plays a ticket consisting of 6 different numbers from 1 to 49 inclusive. Another ticket of 6 numbers is also drawn (randomly) from the same set of 1 to 49 inclusive. Prizes are awarded based on the number of matches between the player's ticket and the one drawn - the greater the number of matches the higher the prize.

In the version you are coding a player can choose their numbers by using 49 checkboxes OR they can let the computer randomly ‘quick pick' the 6 numbers in their ticket.

The JavaScript code required will make significant use of:
• decision statements (if and/or switch)
• repetition statements (for and/or while)
• built in objects (properties and/or methods of Math, Date, Array) The HTML elements needed are:
• 2 radio buttons (input type="radio") to ask for a ‘quick pick' (YES, NO)
• 49 check boxes (input type="checkbox") to manually pick the 6 numbers
• a Play Lotto button to play the lottery
• a div to display or output the results

Clicking the button is the only event that calls JavaScript code i.e. it is the only element with an event handler.

Assuming that the player has correctly made their selection, clicking the Play Lotto button will cause the following to display in the div:
1. the date and time of the draw, suitably formatted
2. the six numbers drawn (as a single row table), sorted in ascending order
3. whether the played opted for a quick pick or manual selection
4. the six numbers played (as a single row table), also in ascending order
5. matching numbers in the player's ticket highlighted
6. a message showing the number of matches and description (if any)

The following screen capture shows these components of the display:

Your code will follow these client side programming best practices:
1. all JavaScript code is loaded from an external file
2. all event handler functions are set-up in JavaScript not in the HTML
i.e. no onclick, onchange, ... HTML attributes
3. all of the JavaScript code is inside the event handler for the onload event on the window object
4. no globals - all variables are declared inside the onload handler
5. all DOM elements are referenced once and stored using const
6. use const and let to declare variables, not var
7. the event handler is attached using addEventListener()
8. strict comparison operators are used e.g. === instead of ==

In order to complete this assignment some or all of the code constructs in the table below will be required.

CODING INSTRUCTIONS:

STEP 1 - Write the HTML markup
This assignment requires the following HTML elements:
• 2 radio buttons (input type="radio") to specify a ‘quick pick' (YES, NO)
• 49 check boxes (input type="checkbox") to manually pick the 6 numbers
• a Play Lotto button to play the lottery
• a div to display the results

Create an .html file and add to it these required elements and content so that it has the required content and structure, then validate your HTML.

NOTE: You are not required to apply any CSS styles i.e. you do not have to style the elements as shown in the screen capture above. But you are in a design program so why would you not want to make it look good?

STEP 2 - Code the JavaScript
1. Place all of your code inside the window.onload event handler function. Use the addEventListener() DOM method to register a click event handler function for the PLAY LOTTO button. Note that the JavaScript code to play the game is only called by clicking the PLAY LOTTO button.

2. The main logic flow in the PLAY LOTTO handler is controlled by the option chosen in the radio button. Use alert() to display an error messages if the player has opted to manually select their numbers (NO is selected as the radio button), but has chosen too few (< 6) or too many (> 6) numbers.

Do not reset the checkboxes if too few or too many numbers are chosen.

3. If the player has opted to pick their own numbers and has checked exactly 6 boxes, then store the 6 values checked in an array.

4. If the player has opted for a ‘quick pick', then randomly pick 6 different numbers from 1 through 49 and store them in an array. Code a loop that runs 6 times to do this. While there are several different ways to code this all of the approaches will rely on the Math.random() method. The challenge is ensuring the numbers selected are all different.

5. Repeat the procedure from the previous step to pick another set of 6 different numbers from 1 to 49 for the numbers drawn and store then in another array.

6. Sort the two arrays containing the picks in increasing numeric order by using the sort() array method with the parameter function(x,y) { return x - y;}.

7. Start the display of the results by using the Date object and its methods to display a time stamp of when the play occurred. The format of this time stamp must match the one in the screen captures exactly. In particular the day, month, and year must be displayed in full. As well, the minutes and seconds are always displayed using 2 digits. Note that all of the results can be concatenated into one string and written to the div using innerHTML.

8. Continue with the results by displaying the numbers drawn as a table with one row and six cells, each cell containing one of the six numbers in the ticket. Use a loop to create a string with the necessary table markup (table, tr, td elements) using the numbers drawn as the cell content.

9. Announce the player's numbers by indicating whether they opted for a quick pick or selected them using the checkboxes.

10. Display the player's numbers as in step #8.

11. Determine how many of the player's numbers match those in the draw. Display a message indicating the number of matches. The following screen capture shows these 5 components of the display:

12. By using CSS properties highlight the numbers in the player's ticket that match a number in the drawn ticket. See the screen captures that follow for examples. Note that the description of the number of matches changes in the text following the display of the player's ticket.

Attachment:- Assignment.rar