Class Gradebook by @SoranyiL - Codewith.it

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

References

<li>Inserisce voci all'interno di una lista
<strong>Definisce una parte del testo importante con formattazione in grassetto.
<h2>Titolo di intestazione di secondo livello
animationDefinisce i parametri dell'animazione di un elemento o selettore
<form>Crea un modulo/form HTML per consentire all'utente di inviare dati al server
<blockquote>Inserisce citazioni in un documento HTML

Users

Log in to search for users

Explore

Find inspiration

Navbar Example 3

Esercitazione 1

Image Comparison Slider

conta vocali con array

esercitazione5.html

Password validator

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