CalcolatoreMedia by @davideCasadei1983 - Codewith.it

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

References

<datalist>Crea una lista di opzioni pre-definite ed editabili per elementi di input
<h1>Titolo di intestazione di primo livello
methodDetermina il metodo di invio dei dati di un form al server
<head>Tag primario di un documento HTML
colspanDefinisce il numero di colonne di una cella all'interno di una tabella.
valueValore alfanumerico o booleano contenuto in un elemento

Users

Log in to search for users

Explore

Find inspiration

GEMELLAGGIO IN DEUTSCHLAND

inserimento immagini in un testo

esercizio HTML modalità interna

pag. 1 progetto

esercizio 01 pagina semplice

Elaborato esame

JS Esercizio Concetti Gen es1

copia di follow

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