cloud spire
Sorry for the vague title but I don't know how to word it
I have a table and the first row each has a div container and I change the height of it in Javascript to resemble a bar graph. Except the div seems to expand from the middle out? Instead of bottom to top and I know know how to fix it. Pictures of what it's supposed to be (the one with the black outline) vs what mine looks like. Been at it for a couple hours and I'm not sure how to fix it.
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Lab 7.11 Grade Distribution</title>
<link rel="stylesheet" href="stylesheet_lab09.css">
<script src="script_lab09.js"></script>
</head>
<header></header>
<body>
<div id="distributionTable">
<table>
<!--1st row: bar graph-->
<tr id="firstRow">
<td><div id="bar0"></div></td>
<td><div id="bar1"></div></td>
<td><div id="bar2"></div></td>
<td><div id="bar3"></div></td>
<td><div id="bar4"></div></td>
</tr>
<!--2nd row: grades-->
<tr id="secondRow">
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>F</td>
</tr>
<!--3rd row: number of occurrences-->
<tr id="thirdRow">
<td id="thirdRow0">0</td>
<td id="thirdRow1">0</td>
<td id="thirdRow2">0</td>
<td id="thirdRow3">0</td>
<td id="thirdRow4">0</td>
</tr>
</table>
</div>
</body>
</html>
script
var testScores = "45 78 98 83 86 99 90 59"
var gradeCount = [0, 0, 0, 0, 0] //A, B, C, D, F respectively
var bar = "bar"
var thirdRow = "thirdRow"
function parseScores(scores){
let newScores = scores.split(" ")
return newScores
}
function buildDistributionArray(scores){
for (let index = 0; index < scores.length; index++){
if (parseInt(scores[index]) >= 90) {
console.log("A")
gradeCount[0] += 1; //A count += 1
} else if (parseInt(scores[index]) < 90 && scores[index] >= 80){
gradeCount[1] += 1; //B count += 1
} else if (parseInt(scores[index]) < 80 && scores[index] >= 70){
gradeCount[2] += 1; //C count += 1
} else if (parseInt(scores[index]) < 70 && scores[index] >= 60){
gradeCount[3] += 1; //D count += 1
} else if (parseInt(scores[index]) < 60){
gradeCount[4] += 1; //F count += 1
}
}
return gradeCount
}
function setTableContent(scores, grades) {
console.log("Hello")
let newScores = parseScores(scores)
console.log(newScores)
buildDistributionArray(newScores)
for (let index = 0; index < gradeCount.length; index++){
let currentBar = bar + index
let barHeight = grades[index] * 10
//console.log(document.getElementsByClassName(currentBar)[0].style.height)
document.getElementById(currentBar).style.height = barHeight + "px";
console.log(document.getElementById(currentBar).style.height)
let currentThirdRow = thirdRow + index
document.getElementById(currentThirdRow).innerHTML = grades[index]
}
}
document.addEventListener("DOMContentLoaded", function () {
setTableContent(testScores, gradeCount)
})
stylesheet
#bar0 {
background-color: lawngreen;
height: 0px;
}
#bar1 {
background-color: darkgreen;
outline: 1px solid red;
//position: relative;
//bottom: 0px;
}
#bar2 {
background-color: burlywood;
}
#bar3 {
background-color: gray;
}
#bar4 {
background-color: red;
}
limpid leaf
seems like your problem is alignment
i haven't read through all of your code since I'm on my phone (i did now), but have you tried adding a class to every colored bar div and make that property have margin-top: auto;?
try putting this in a code.pen and i can try working on this with you later today, if you don't figure it out by then
cloud spire
I'll try that ^^
