Class Gradebook by @SoranyiL - Codewith.it

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

References

novalidateImpedisce la convalida dei campi con valori tipizzati di elemento input
<strong>Definisce una parte del testo importante con formattazione in grassetto.
<h4>Titolo di intestazione di quarto livello
methodDetermina il metodo di invio dei dati di un form al server
idIdentifica univocamente un elemento HTML
<table>Tag primario per la creazione di tabelle

Users

Log in to search for users

Explore

Find inspiration

Pro Vercelli LB(2)

La Storia di Cappuccetto Rosso

pagina_personale

La Ghigliottina | Matteo Greco &

Esercitazione 1

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();
}