Class Gradebook by @SoranyiL - Codewith.it

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

Referenze

<h4>Titolo di intestazione di quarto livello
valueValore alfanumerico o booleano contenuto in un elemento
<hr>Inserisce una linea orizzontale
_parentApre collegamenti ipertestuali nell'elemento genitore
<form>Crea un modulo/form HTML per consentire all'utente di inviare dati al server
formSpecifica a quale form appartiene un elemento.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

JS Strutture dati e funzioni es2

Calcolo Codice Fiscale

esercizio indice di un libro

es riepilogativo da correggere

Esercizio riepilogativo

esame di informatica

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

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