first time posting right here. I am taking my first programming class and am scuffling with one of many initiatives. I’m speculated to create a program that takes in a string of grades(IE “45 78 98 83 86 99 90 59”) turns it into an array of particular person grades( [“45″,”78″,”98”, “83”,”86″,”99″,”90″,”59″]) after which counts occurrences of A’s, B’s, C’s, D’s,F’s. I obtained that half down with this code.
operate parseScores(scoresString) {
return scoresString.break up(" ");
}
operate buildDistributionArray(scoresArray) {
var a = 0;
var b = 0;
var c = 0;
var d = 0;
var f = 0;
if (scoresArray.size < 1 || scoresArray == undefined){
return [a,b,c,d,f]
}
else{
for(i=0; i<(scoresArray.size); i++){
if (scoresArray[i]>=90){
a++
}
else if(scoresArray[i]>=80){
b++
}
else if(scoresArray[i]>=70){
c++
}
else if(scoresArray[i]>=60){
d++
}
else{
f++
}
}
return [a,b,c,d,f]
Then create a bar graph utilizing that prevalence array by ending off this code:
operate setTableContent(userInput) {
var tbl = doc.getElementById("distributionTable");
if (!userInput) {
tbl.innerHTML = "<tr><td>No graph to show</td></tr>";
return;
}
// First construct the distribution array from the enter
var distribution = buildDistributionArray(parseScores(userInput));
// Specification will state that until the enter is empty, the
// following necessities have to be met:
// - The desk will need to have three rows
// - The highest row should comprise the bars
// - Every TD with a bar has the CSS vertical-align property set to "backside"
// - The center row should comprise the grade labels
// - The underside row should comprise the frequencies
// - Every bar features 10 pixels in top per prevalence
// - (From HW): "Write your code in such a approach that the person might enter any quantity
// of scores. In different phrases, make your graph develop bigger when the person enters
// extra scores."
// Initialize markup string for desk's innerHTML
var markup = "";
// Enter your code right here
// ----------document----------
// Set the desk's innerHTML
tbl.innerHTML = markup;
}
operate bodyLoaded() {
// The argument handed to writeTableContent may be modified for
// testing functions
setTableContent("45 78 98 83 86 99 90 59");
}
Right here is the HTML that runs it:
<!DOCTYPE html>
<html>
<head>
<type>
.bar0 { vertical-align: backside; background-color: #00C000; }
.bar1 { vertical‐align: backside; background-color: #309000; }
.bar2 { vertical‐align: backside; background-color: #606000; }
.bar3 { vertical‐align: backside; background-color: #903000; }
.bar4 { vertical‐align: backside; background-color: #C00000; }
td { vertical-align: backside }
</type>
<script src="index.js"></script>
</head>
<physique onload="bodyLoaded()">
<desk type="border: 2px stable black" id="distributionTable">
</desk>
</physique>
</html>
I am at a loss right here. I’ve no clue tips on how to create the bar graph. The immediate asks us to create the graph utilizing html’s desk operate. It is speculated to appear to be this:
HTML desk primarily based graph
I believe I’m speculated to fill within the markup variable however I am unsure tips on how to us the css class kinds from the html code to creak the bar graph. I might respect any perception somebody might give.