can you create the java script code in webstorm please & i just created outer looks upto here in nest image.

You are to update diceroller.html so that it allows you to graphically roll two 9-sided dice and keep track of the last 10 rolls. When the updated diceroller.html is initially opened, you should display the following: Assignment 01 - Dice Roller X + C O File Y:/-INSCollaboration/CST_Year... : Dice Roller Click on either die to roll: ::: ::: ... ... The previous 10 rolls were: 0,0,0,0,0,0,0,0,0,0 Roll 2 times in a row Gol Roll Statistics: My statistics for a total of 0 rolls: 4 0 Roll Frequency Percent of Total Rolls 0.000% 0.000 0.000 0.000% 0.000% 0.000% 0.000% 0.000 0.000% 0.000% 0.00096 0.000 0.000 0.000% 0.000% 0.000% 18 0 0.000% Here is an example screenshot after 12 rolls have been completed: Assignment #1 - Dice Roller x + - X E c File Y:/-INSCollaboration/CST_Year. Dice Roller Click on either die to roll: You rolled 6... The previous 10 rolls were: 6, 10, 16, 9, 11, 11, 10, 3, 13,6 Roll 3 times in a row Go! Roll Statistics: My statistics for a total of 12 rolls: Roll Frequency Percent of Total Rolls 0.000% 8.333% 0.000% 0.000% 25.000% 0.000 8.333% 8.333% 16.667% 16.667% 0.000% 8.333% 0.000% 0.000% 8.333% 0.000% 0.000% The completed diceroller.html should work as follows: 1. When the website visitor click on either of the dice images, the dice will begin "rolling and stop rolling 1 second later. a. A roll consists of a new random number (from 1 to 9) being generated every 100 milliseconds for each die. The image for each die must be updated to represent the current random number (dicel.png, dice2.png, ..., dice9.png) b. When the dice are rolling, the user should be prevented from rolling other dice. c. The result of the roll must be displayed in the pRolled paragraph (for example, "You rolled a 6!"). d. The result of the roll must be added to the list of the previous ten rolls in the pPrevious TenRolls paragraph. This list only displays the most recent 10 rolls; rolls older than 10 are bumped from the list. The most recent roll is at the end of the list. 2. For each roll, the roll statistics must be updated. a. The frequency of each possible roll (2 to 18 inclusive) must be updated, and the frequency as a percentage of the total number of accumulated rolls must be updated. b. The total number of rolls in the p Total Rolls paragraph must be updated. 3. When the visitor clicks on the btnRoll Multiple Times (Go!) button, the requested number of rolls must be automatically generated in succession. Each roll must behave exactly the same as a single roll (as described in requirements 1 and 2). WHAT YOU ARE TO DO The initial file diceroller.html contains a bare HTML document, with no JavaScript functionality. You are to add JavaScript code to this file to provide the desired functionality. A quick summary of what you'll need to do is as follows: You will need to add event handlers to handle when an image is clicked, and when the button is clicked. Add HTML elements as needed. Use an array to keep track of the previous 10 rolls. Note that your array should never contain more than 10 values; when there are 10 values in the array and you need to add another, remove the oldest value from the array. Use appropriate array methods to maintain this list. Use an array to keep track of the frequency of each roll. + C O x Homepage - CWL-190-002X D Table of Contents - COSA 150 X Assignment #1 - Dice Roller X C/Users/1234/AppData/local/temp/temp COSC190 Assignment%20p/diceroller.html R Elements Console Sources Network TU TERORIST 0, 0, /p> Dice Roller Performance 02 WWW Click on either die to roll: image of die lis type The previous 10 rolls were: 0,0,0,0,0,0,0,0,0,0 toll 2 times in a row Gol choll Statisties p id-pfotlos y statistics for a total of Pols/ Roll Statistics: Styles Eventstenen DOM report Peperties Acce.buty My statistics for a total of Orolls: user agent stylesheet internal root-color: COLOR Showa display Activate Windows Show all COSC190 Assig . Tip 1 .zip A storycard.doc A Acceptance Testido REM A D I N 2/12/2000 Start a search You are to update diceroller.html so that it allows you to graphically roll two 9-sided dice and keep track of the last 10 rolls. When the updated diceroller.html is initially opened, you should display the following: Assignment 01 - Dice Roller X + C O File Y:/-INSCollaboration/CST_Year... : Dice Roller Click on either die to roll: ::: ::: ... ... The previous 10 rolls were: 0,0,0,0,0,0,0,0,0,0 Roll 2 times in a row Gol Roll Statistics: My statistics for a total of 0 rolls: 4 0 Roll Frequency Percent of Total Rolls 0.000% 0.000 0.000 0.000% 0.000% 0.000% 0.000% 0.000 0.000% 0.000% 0.00096 0.000 0.000 0.000% 0.000% 0.000% 18 0 0.000% Here is an example screenshot after 12 rolls have been completed: Assignment #1 - Dice Roller x + - X E c File Y:/-INSCollaboration/CST_Year. Dice Roller Click on either die to roll: You rolled 6... The previous 10 rolls were: 6, 10, 16, 9, 11, 11, 10, 3, 13,6 Roll 3 times in a row Go! Roll Statistics: My statistics for a total of 12 rolls: Roll Frequency Percent of Total Rolls 0.000% 8.333% 0.000% 0.000% 25.000% 0.000 8.333% 8.333% 16.667% 16.667% 0.000% 8.333% 0.000% 0.000% 8.333% 0.000% 0.000% The completed diceroller.html should work as follows: 1. When the website visitor click on either of the dice images, the dice will begin "rolling and stop rolling 1 second later. a. A roll consists of a new random number (from 1 to 9) being generated every 100 milliseconds for each die. The image for each die must be updated to represent the current random number (dicel.png, dice2.png, ..., dice9.png) b. When the dice are rolling, the user should be prevented from rolling other dice. c. The result of the roll must be displayed in the pRolled paragraph (for example, "You rolled a 6!"). d. The result of the roll must be added to the list of the previous ten rolls in the pPrevious TenRolls paragraph. This list only displays the most recent 10 rolls; rolls older than 10 are bumped from the list. The most recent roll is at the end of the list. 2. For each roll, the roll statistics must be updated. a. The frequency of each possible roll (2 to 18 inclusive) must be updated, and the frequency as a percentage of the total number of accumulated rolls must be updated. b. The total number of rolls in the p Total Rolls paragraph must be updated. 3. When the visitor clicks on the btnRoll Multiple Times (Go!) button, the requested number of rolls must be automatically generated in succession. Each roll must behave exactly the same as a single roll (as described in requirements 1 and 2). WHAT YOU ARE TO DO The initial file diceroller.html contains a bare HTML document, with no JavaScript functionality. You are to add JavaScript code to this file to provide the desired functionality. A quick summary of what you'll need to do is as follows: You will need to add event handlers to handle when an image is clicked, and when the button is clicked. Add HTML elements as needed. Use an array to keep track of the previous 10 rolls. Note that your array should never contain more than 10 values; when there are 10 values in the array and you need to add another, remove the oldest value from the array. Use appropriate array methods to maintain this list. Use an array to keep track of the frequency of each roll. + C O x Homepage - CWL-190-002X D Table of Contents - COSA 150 X Assignment #1 - Dice Roller X C/Users/1234/AppData/local/temp/temp COSC190 Assignment%20p/diceroller.html R Elements Console Sources Network TU TERORIST 0, 0, /p> Dice Roller Performance 02 WWW Click on either die to roll: image of die lis type The previous 10 rolls were: 0,0,0,0,0,0,0,0,0,0 toll 2 times in a row Gol choll Statisties p id-pfotlos y statistics for a total of Pols/ Roll Statistics: Styles Eventstenen DOM report Peperties Acce.buty My statistics for a total of Orolls: user agent stylesheet internal root-color: COLOR Showa display Activate Windows Show all COSC190 Assig . Tip 1 .zip A storycard.doc A Acceptance Testido REM A D I N 2/12/2000 Start a search