CalcolatoreMedia by @davideCasadei1983 - Codewith.it

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

References

<embed>Tag per l'incorporamento di contenuti multimediali
<body>Tag primario di un documento HTML
<td>Definisce una cella di una tabella HTML.
<!doctype>Dichiara la versione del linguaggio di sviluppo della pagina
<form>Crea un modulo/form HTML per consentire all'utente di inviare dati al server
animationDefinisce i parametri dell'animazione di un elemento o selettore

Users

Log in to search for users

Explore

Find inspiration

HOTEL STELLA MARIS

informatica|inglese

lezione 9 informatica

20240126 pagina html

Navbar Example 4

Costruzione di tabella con html5

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.

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