PART 1: 5.12 LAB: Grade distribution In this lab, you will write a JavaScript program that generates a bar graph of letter grades from a distributions of scores. Implement the parseScores function (1...

for each bar. Each bar gains 10 pixels in height per grade occurrence. Use the styles from the embedded style sheet so that each bar is a different color. The CSS vertical-align property is set for elements, so that the bars are aligned at the bottom of the containing cells. Below is a sample of what might be generated for the table's first row.





If the input contains at least one score, then create 3 rows in the table. The first row contains divs for the bars. The second row contains letter grade labels. The third row contains the number of occurrences of each grade. Below is a sample of what the table might look like. If the input does not contain any scores, then create only 1 cell in the table, with text content "No graph to display". LABACTIVITY 5.12.1: LAB: Grade distribution 0 / 10 Submission Instructions Downloadable files index.html and index.js PART 2: 5.13 LAB: Temperature conversion In this lab you will implement a temperature converter. Five UI elements are declared for you in the template: Element description Element's ID Text input field for Celsius temperature CInput Text input field for Fahrenheit temperature FInput Button that, when clicked, converts from one temperature to the other ConvertButton Div for displaying an error message when temperature cannot be converted ErrDiv Image corresponding to the temperature WeatherImage Implement the conversion functions (2 points) Implement the ConvertCtoF and ConvertFtoC functions to convert between Celsius and Fahrenheit. ConvertCtoF takes a single numerical argument for a temperature in Celsius and returns the temperature in Fahrenheit using the following conversion formula: °F = °C * 9/5 + 32 Similarly, ConvertFtoC takes a single numerical argument for a temperature in Fahrenheit and returns the temperature in Celsius using the following conversion formula: °C = (°F - 32) * 5/9 Register conversion button's click event in bodyLoaded() (2 points) When the page loads, the bodyLoaded function is called. Implement bodyLoaded to register a click event handler for the Convert button (id="ConvertButton"). Use addEventListener(), not onclick. When the Convert button is pressed, the text box that contains a number should be converted into the opposing temperature. So if a number is in the Celsius text box (id="CInput"), the temperature should be converted into Fahrenheit and displayed in the Fahrenheit text box (id="FInput") and vice versa. Use parseFloat() to convert from a string to a number and do not round the result. Ensure that only one text field contains a value (2 points) Ensure that only one text field contains a value at any moment in time unless the Convert button has been pressed. For example, when the Celsius field has a number and the user enters a Fahrenheit entry, the Celsius field should be cleared as soon as the user begins to type. This will require implementing an input event handler for each of the text fields that clears the opposing text field when a change occurs. Register each input event handler in the bodyLoaded function. Use addEventListener(), not oninput. Change the image to reflect the temperature (2 points) When the temperature is converted, change the image to reflect the temperature in Fahrenheit. Each image is in the same directory as your .html page. Below 32 F 32 - 50 F Above 50 F cold.gif cool.gif warm.gif Handle bad input (2 points) When parseFloat() returns a NaN for the temperature to be converted, set ErrDiv's textContent to the message: "X is not a number", where X is the string from the text input. When parseFloat() returns a valid number, set ErrDiv's textContent to an empty string. The image below shows a sample error message. LABACTIVITY 5.13.1: LAB: Temperature conversion 0 / 10 Submission Instructions Downloadable files index.html , index.js , cool.gif , cold.gif , and warm.gif PART 3: 5.14 LAB: JavaScript Tic-Tac-Toe Investigate the page elements The template .html page contains all needed page elements for a game of Tic-Tac-Toe: · A 3x3 table is used to provide 9 cells for the game board. · A div, initially containing text "TURN INFO", provides information about whether the current turn belongs to the player or computer. The div's ID is "turnInfo". · A "New game" button allows the player to clear the board and start a new game. The button's ID is "newGameButton". Investigate the existing script elements The template .js script has three declarations: · playerTurn: Boolean variable that is true when the turn belongs to the player and false when the turn belongs to the computer. · computerMoveTimeout: ID of an active timeout for the computer's move, or 0 if no such timeout exists. · getGameBoard(): Function that returns an array of 9 elements, representing all cells in the game board. The first 3 elements are the top row, the next 3 the middle row, and the last 3 are the bottom row. The getGameBoard() function is implemented for you and requires no alteration. · start(): Function that is called when the page loads, in order to start the game. Events for the "New game" button click and game board cell clicks are registered. Then newGame() is called to start the game. The start() function is implemented for you and requires no alteration. Implement the newGame() function (1 point) Implement the newGame() function to do the following: 1. Use clearTimeout to clear the computer's move timeout and then set computerMoveTimeout back to 0 2. Loop through all game board cells and set the inner HTML of each to a non-breaking space:   3. Reset to the player's turn by setting playerTurn to true 4. Set the text of the turn information div to "Your turn" Implement the cellClicked() function (2 points) Implement the cellClicked() function to do the following: · If playerTurn is true and the clicked cell is empty: 1. Set the cell's innerHTML to "X" 2. Set the cell's style color to "red" 3. Call switchTurn() Implement switchTurn() part 1: turn-switching logic (2 points) Implement the switchTurn() function to do the following: 1. If switching from the player's turn to the computer's turn, use setTimeout to call makeComputerMove after 1 second (1000 milliseconds). Assign the return value of setTimeout to computerMoveTimeout. The timeout simulates the computer "thinking", and prevents the nearly-instant response to each player move that would occur from a direct call to makeComputerMove(). 2. Toggle playerTurn's value from false to true or from true to false. 3. Set the turn information div's text content to "Your turn" if playerTurn is true, or "Computer's turn" if playerTurn is false. Implement makeComputerMove() (2 points) Implement makeComputerMove() so that the computer puts an "O" in a random, available cell. Set the cell's style color to "blue". Call switchTurn() at the end of the function to switch back to the player's turn. Implement switchTurn() part 2: checking for a winner (3 points) Add logic to the switchTurn() function that checks for a winner before the turn switch. · If the board contains 3 X's in a row, display the text "You win!" in the turn info div. · If the board contains 3 O's in a row, display the text "Computer wins!" in the turn info div. · If the board is full without either the player or computer having won, display the text "Draw game" in the turn info div. In the case of a winner or a draw game, set playerTurn to false and return without switching turns. This prevents the user from being able to place an X after the game is over. LABACTIVITY 5.14.1: LAB: JavaScript Tic-Tac-Toe 0 / 10 Submission Instructions Downloadable files index.html and index.js PART 4: 5.15 LAB: Medical device vulnerability scoring In this lab, you will complete the implementation of a Medical Device Vulnerability Scoring web page. The purpose of this web page is to return a score that numerically quantifies how vulnerable a specific vulnerability is to the particular attack. The properties of the system will be selected from a group of predetermined options, where each option is a styled radio button. Once options are selected for all possible properties, the web page will display the vulnerability score (and hide the warning label).  1. Implement a function called updateScore. This function must verify that one button from each property is selected. 2. Using JavaScript, add a click or change event listener to each radio button (Do not add the event listener to the button label). Notice that the radio buttons are hidden using CSS.  3. Once one button from each property is selected, the webpage should: · Hide the warning label by setting the display style of the