In this lab, you will write three JavaScript functions to generate a bar graph of letter grades from a distributions of scores.
Implement parseScores() (1 point)

Implement the parseScores() function to take a space-separated string of scores as an argument and return an array of score strings. Each score is a number in the range [0, 100]. Ex: "45 78 98 83 86 99 90 59" → ["45", "78", "98", "83", "86", "99", "90", "59"]

Hint: The string method split() can create the array with one line of code.
Implement buildDistributionArray() (2 points)

Implement the buildDistributionArray() function to take an array of scores, built by parseScores(), as an argument. The function should return a grade distribution array of length 5.

Loop through the scores array and tally up the number of A, B, C, D, and F scores using the standard scoring system (90 and above = A, 80‐89 = B, 70‐79 = C, 60-69 = D, 59 and below = F). Store these totals in a distribution array where the number of As is the first number, number of Bs is the second number, etc. Ex: ["45", "78", "98", "83", "86", "99", "90", "59"] → [3, 2, 1, 0, 2]

buildDistributionArray() returns [0, 0, 0, 0, 0] when the scoresArray argument is empty.
Implement setTableContent() (7 points)

Implement the setTableContent() function to take a space-separated string of scores as an argument. setTableContent() should call parseScores() and buildDistributionArray() and produce a grade distribution graph by setting the table's inner HTML. The table has id="distributionTable".

Use a <div> for each bar. Each bar gains 10 pixels in height per grade occurrence. Apply the classes from the embedded style sheet so that each bar is a different color. The CSS vertical-align property is set for <td> 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.

<tr>
   <td><div style="height:30px" class="bar0"></div></td>
   <td><div style="height:20px" class="bar1"></div></td>
   <td><div style="height:10px" class="bar2"></div></td>
   <td><div style="height:0px"  class="bar3"></div></td>
   <td><div style="height:20px" class="bar4"></div></td>
</tr>

If the scores string contains at least one score, then create 3 rows in the table:

    First row: Contains divs for the bars.
    Second row: Contains letter grade labels.
    Third row: Contains the number of occurrences of each grade.

Below is a sample of what the table might look like.

If the scores string does not contain any scores, then create only 1 cell in the table with text content "No graph to display".
Testing your solution

The given index.js file calls setTableContent() with several different scores. Replace the scores string with other scores to verify the web page produces a table with the correct bar graph. Replace the scores string with an empty string ("") to verify the table displays "No graph to display".