CalcolatoreMedia by @davideCasadei1983 - Codewith.it

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

Referenze

<source>Il tag HTML <source> si usa per indicare una o più risorse multimediali per elementi media
minImposta il valore numerico o temporale minimo per un elemento input
animation-delayDetermina il tempo prima dell'avvio di una animazione in secondi (es. 1s) o millisecondi (ms)
hrefDefinisce l'URL della risorsa/pagina di destinazione.
<tbody>Definisce il contenuto principale di una tabella.
<h5>Titolo di intestazione di quinto livello

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Indovina il Numero - Gioco

Esercitazione 1

Array of Colors

la matematica nel medio evo

Map System using Leaflet

Heads Or Tails Tally

esercitazione4.html

spotify dashboard

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.

<html>

<head>
  <title>Media voti classe</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
    integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>

<body>
  <main>
    <h1 class="text-center mt-3 mb-2 text-uppercase">Calcola media della classe</h1>

    <!--Inizializzo il form che permetterà di inserire il numero di studenti della classe-->
    <form id="manageClasse">
      <div class="form-group">
        <label for="studentsNumber">Numero studenti della classe</label>
        <input type="number" min="1" max="100" class="form-control" id="studentsNumber" aria-describedby="studentsNumberHelp" placeholder="20">
        <small id="studentsNumberHelp" class="form-text text-muted">Inserisci il numero totale degli studenti presenti nella tua classe.</small>
      </div>
      <a id="startFunct" class="btn btn-primary" href="#" role="button">Inizia</a>
    </form>
<!--Inizializzo il div che contiene la bacheca dei risultati completi-->
    <div id="showFunctionResults" class="container hidden">
      <h2 class="text-center text-uppercase mb-2">Bacheca dei risultati</h2>
      <div class="row">
        <div class="col col-12 text-center">
          La media dei voti degli studenti è: <span id="averageGrade"></span>
        </div>
        <div id="graduate" class="col col-6">
          <h3 class="text-center pd-1" style="background-color:green;color:white;">Studenti promossi</h3>
          <ul></ul>
        </div>
        <div id="notGraduate" class="col-6">
          <h3 class="text-center pd-1" style="background-color:red;color:white;">Studenti bocciati</h3>
          <ul></ul>
        </div>
      </div>
    </div>
  </main>
</body>

</html>

.hidden{
  display: none;
}
#showFunctionResults ul{
  margin: 0;
  padding: 0;
}
#showFunctionResults li{
  list-style-type: none ;
  display: flex;
  justify-content:space-between;
}

const sufficiency = 6;
// Array vuoto che conterrà nome e voto di ogni studente
let studentResults = [];
let startButton = document.querySelector("#startFunct");
let totGrades = 0;

startButton.addEventListener("click", function(e) {
    let studentNumbers = parseInt(document.querySelector("#studentsNumber").value);

    if (studentNumbers > 0) {
        for (let i = 0; i < studentNumbers; i++) {
            // Chiedo il nome dello studente
            let studentName;
            do {
                studentName = prompt("Inserisci il nome dello studente numero: " + (i + 1), "");
            } while (!studentName.trim());

            // Chiedo il voto dello studente
            let studentGrade;
            do {
                studentGrade = parseInt(prompt("Inserisci il voto dello studente numero: " + (i + 1), ""));
            } while (isNaN(studentGrade) || studentGrade < 1 || studentGrade > 10);

            // Assegna nome e voto dello studente ad un array
            studentResults[i] = [studentName, studentGrade];
        }

        studentResults.forEach(function(studentResult, index) {
            totGrades = totGrades + studentResults[index][1];
        });

        //Calcolo la media dividendo il totale dei voti per il numero degli studenti inserito nella variabile studentNumbers
        let media = totGrades / studentNumbers;
        console.log(media);
        let mediaInt = Math.floor(media);
        let mediaDec = media - Math.floor(media);

        if (mediaDec < 0.5) {
            media = Math.floor(media);
        } else {
            media = Math.ceil(media);
        }

        //Scrivo la media nello span dedicato nel mio html
        document.getElementById("averageGrade").innerHTML = media;

        //Vado ora a scrivere la lista degli studenti che hanno passato l'esame e quelli che no
        studentResults.forEach(function(studentResult, index) {
            //Vedo di capire se è un voto positivo o negativo in modo da assegnare il giusto div di destinazione
            let targetDiv = studentResults[index][1] >= sufficiency ? "#graduate ul" : "#notGraduate ul";
            let myDiv = document.querySelector(targetDiv);

            let studentNameElement = document.createElement("li");
            studentNameElement.textContent = studentResults[index][0];

            let gradeSpan = document.createElement("span");
            gradeSpan.textContent = studentResults[index][1];
            studentNameElement.appendChild(gradeSpan);

            myDiv.appendChild(studentNameElement);

            document.getElementById("showFunctionResults").classList.remove("hidden");
        });

    } else {
        // Se il numero di studenti inserito non è valido restituisci messaggio di errore
        let alertStudNum = "La classe deve contenere almeno uno studente! Il numero di studenti attuali è: " + studentNumbers;
        alert(alertStudNum);
    }
});