CalcolatoreMedia by @davideCasadei1983 - Codewith.it

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

References

dirnameInvia informazioni sulla direzione di scrittura da un elemento input
actionDetermina la pagina di destinazione a cui verranno inviati i dati di un form HTML
<strong>Definisce una parte del testo importante con formattazione in grassetto.
checkedPre-imposta su 'true' il valore di un elemento input checkbox o radio
multipleConverte in lista a selezione multipla
Inserisce un commento nel codice

Users

Log in to search for users

Explore

Find inspiration

esercizio 03 pagina form

Borsino politico(2)

Research Profiles

Review of Functions I

Nuovo sito travel

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