Class Gradebook by @SoranyiL - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

References

minlengthDetermina il numero minimo di caratteri per un elemento input
<h6>Titolo di intestazione di sesto livello
<base>Specifica l'URL di base per tutti gli URL relativi all'interno della pagina.
<td>Definisce una cella di una tabella HTML.
<strong>Definisce una parte del testo importante con formattazione in grassetto.
requiredRende obbligatorio un campo di input

Users

Log in to search for users

Explore

Find inspiration

Quiz ristrutturazione

JS class value to input

Esercitazione n 1

progetto 3 morra cinese

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>Class Gradebook</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
		integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
	<div class="container">
		<h2 class="my-4">Gradebook</h2>

		<div class="form-group">
			<label for="gradeInput">Enter Grade:</label>
			<input type="number" class="form-control" id="gradeInput" placeholder="Enter a grade">
		</div>
		<button class="btn btn-primary" onclick="addGrade(parseInt(document.getElementById('gradeInput').value))">Add Grade</button>

		<h4 class="my-4">Grades:</h4>
		<ul id="grade-list" class="list-group"></ul>

		<h4 class="my-4" id="average">Average: 0</h4>
		<h4 id="median">Median: 0</h4>
    <h4 id="college">College 4.0 Scale: 0</h4>
	</div>

	<script src="script.js"></script>
</body>

</html>

html {
  height: 100%;
  width: 100%;
}

var grades = [];
var sorted = [];
var gradeTestData = [100, 97, 96, 93, 92, 90, 89, 87, 86, 83, 82, 80, 79, 77, 76, 73, 72, 70, 69, 67, 66, 65];
var avg = 0;

const gradeScale = [
    { letter: 'A', min: 90 },
    { letter: 'A-', min: 87 },
    { letter: 'B+', min: 83 },
    { letter: 'B', min: 80 },
    { letter: 'B-', min: 77 },
    { letter: 'C+', min: 73 },
    { letter: 'C', min: 70 },
    { letter: 'C-', min: 67 },
    { letter: 'D+', min: 65 },
    { letter: 'D', min: 60 },
    { letter: 'F', min: 0 }
];

function average() {
    if (grades.length === 0) return 0;
    var sum = grades.reduce((acc, grade) => acc + grade, 0);
    avg = sum / grades.length;
    return avg.toFixed(2);
}

function median() {
    sorted = [...grades].sort((a, b) => a - b); 
    var mid = Math.floor(sorted.length / 2);
    if (sorted.length % 2 === 0) {
        return ((sorted[mid - 1] + sorted[mid]) / 2).toFixed(2);
    } else {
        return sorted[mid];
    }
}

function fourPoint() {
    
    let totalGpa = 0;

    for (let i = 0; i < grades.length; i++) {
        const grade = grades[i];
        if (grade >= 96) totalGpa += 4.0;
        else if (grade >= 90) totalGpa += 3.7;
        else if (grade >= 87) totalGpa += 3.3;
        else if (grade >= 83) totalGpa += 3.0;
        else if (grade >= 80) totalGpa += 2.7;
        else if (grade >= 77) totalGpa += 2.3;
        else if (grade >= 73) totalGpa += 2.0;
        else if (grade >= 70) totalGpa += 1.7;
        else if (grade >= 67) totalGpa += 1.3;
        else if (grade >= 60) totalGpa += 1.0;
        else totalGpa += 0.0;
    }

    return (totalGpa / grades.length).toFixed(2);
}

function collegeScale(grade) {
    for (let scale of gradeScale) {
        if (grade >= scale.min) {
            return scale.letter;
        }
    }
    return 'F';
}

function display() {
    const gradeList = document.getElementById("grade-list");
    gradeList.innerHTML = '';  

    grades.forEach(grade => {
        let gradeColor = '';
        if (grade >= 85) {
            gradeColor = 'bg-success'; 
        } else if (grade >= 75) {
            gradeColor = 'bg-warning'; 
        } else if (grade >= 65) {
            gradeColor = 'bg-orange'; 
        } else {
            gradeColor = 'bg-danger'; 
        }

        const li = document.createElement("li");
        li.classList.add('list-group-item', gradeColor);
        li.textContent = `${grade} - ${collegeScale(grade)}`;
        gradeList.appendChild(li);
    });

    document.getElementById("average").textContent = `Average: ${average()}`;
    document.getElementById("median").textContent = `Median: ${median()}`;
    document.getElementById("college").textContent = `College 4.0 Scale: ${fourPoint()}`;
}

function addGrade(grade) {
    grades.push(grade);
    display();
}