"use strict"
function parseScores(scoresString) {
   // TODO: Compete the function
    return scoresString.split(" ");
}

function buildDistributionArray(scoresArray) {
    // TODO: Compete the function
    let arr = [0,0,0,0,0];
    let score;

    for (var i =0;i<scoresArray.length;i++){
	score = Number(scoresArray[i]);
	if (score >= 90)
	    arr[0] += 1;
	else if (score >= 80)
	    arr[1] += 1;
	else if (score >= 70)
	    arr[2] += 1;
	else if (score >= 60)
	    arr[3] += 1;
	else
	    arr[4] += 1;	
    }
    return arr;
}

function setTableContent(userInput) {
    // TODO: Compete the function
    let arr = buildDistributionArray(parseScores(userInput))
    let table = document.getElementById("distributionTable")
    if (userInput.length > 1){
	let row0; // divs for bars
	let row1; // letter grade labels
	let row2; // number of each grade

	let barA = arr[0]*10;
	let barB = arr[1]*10;
	let barC = arr[2]*10;
	let barD = arr[3]*10;
	let barF = arr[4]*10;

	row0 = '<tr>\
<td><div style=' + '"height:' + barA + 'px" class="bar0"></div></td>\
<td><div style=' + '"height:' + barB + 'px" class="bar1"></div></td>\
<td><div style=' + '"height:' + barC + 'px" class="bar2"></div></td>\
<td><div style=' + '"height:' + barD + 'px" class="bar3"></div></td>\
<td><div style=' + '"height:' + barF + 'px" class="bar4"></div></td>\
</tr>';
	row1 = '<tr>\
<td>A</td>\
<td>B</td>\
<td>C</td>\
<td>D</td>\
<td>F</td>\
</tr>';

	row2 = '<tr>\
<td>' + arr[0] + '</td>\
<td>' + arr[1] + '</td>\
<td>' + arr[2] + '</td>\
<td>' + arr[3] + '</td>\
<td>' + arr[4] + '</td>\
</tr>';
/*table.innerHTML='<tr>\
   <td><div style="height:30px" class="bar0"></div>A</td>\
   <td><div style="height:20px" class="bar1"></div>B</td>\
   <td><div style="height:10px" class="bar2"></div>C</td>\
   <td><div style="height:0px"  class="bar3"></div>D</td>\
   <td><div style="height:20px" class="bar4"></div>F</td>\
   </tr>'*/

	table.innerHTML = row0 + row1 + row2;
    }
    else{
	table.innerHTML = "<tr><td>No graph to display</td></tr>";
    }
}

// The argument can be changed for testing purposes
setTableContent("45 78 98 83 86 99 90 59");