ALEX SCUOLA by @alessandrostano - Codewith.it

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

References

langSpecifica la lingua del contenuto di un elemento
_topApre collegamenti ipertestuali nell'elemento parent assoluto
<q>Indica una parte di testo come citazione breve
<i>Formatta il testo in corsivo/italico non enfatizzato
<tfoot>Definisce il footer o sezione inferiore di una tabella.
formactionPermette di definire l'URL di una pagina web a cui inviare i dati di un form

Users

Log in to search for users

Explore

Find inspiration

Calcolatrice Pitagora

I giornali online

PROGETTO DIGITAL

Prep. Esame pt.4

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.

<form>
  <label for="voto">Inserisci il tuo voto:</label>
  <input type="text" id="voto" name="voto">
  <label for="materia">Inserisci la materia:</label>
  <input type="text" id="materia" name="materia">
  <button type="button" onclick="aggiungiVoto()">Aggiungi Voto</button>
</form>
<br>
<form>
  <label for="filtroMateria">Filtra per materia:</label>
  <input type="text" id="filtroMateria" name="filtroMateria">
  <button type="button" onclick="filtraVoti()">Filtra</button>
</form>
<br>
<ul id="listaVoti"></ul>
<br>
<button type="button" onclick="calcolaMedia()">Calcola Media</button>
<br>
<p id="risultato"></p>

body {
    background-image: linear-gradient(to bottom, #F6D365, #FDA085);
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    color: #333;
    padding: 20px;
}

h1, h2, h3 {
    font-family: 'Montserrat', sans-serif;
    color: #0D47A1;
    text-align: center;
}

form {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px #ccc;
    margin: 20px auto;
    width: 80%;
}

input[type="text"], input[type="number"] {
    border: none;
    border-bottom: 2px solid #0D47A1;
    padding: 10px;
    margin-bottom: 20px;
    width: 100%;
}

label {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 10px;
    display: block;
}

button {
    background-color: #0D47A1;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 20px;
    font

<script>
  // crea un array per salvare i voti inseriti
  var voti = [];

  // funzione per aggiungere i voti alla lista
  function aggiungiVoto() {
    // prendi il valore del voto e della materia inseriti dall'utente
    var voto = document.getElementById("voto").value;
    var materia = document.getElementById("materia").value;

    // verifica se il voto è un numero valido
    if (isNaN(voto) || voto < 0 || voto > 10) {
      alert("Inserisci un voto valido (da 0 a 10)");
      return;
    }

    // verifica se la materia è stata inserita
    if (materia === "") {
      alert("Inserisci una materia valida");
      return;
    }

    // crea un oggetto per il voto corrente con la materia e il voto
var votoCorrente = {materia: materia, voto: voto};
    // aggiungi il voto alla lista
voti.push(votoCorrente);

// aggiungi il voto alla lista visualizzata sulla pagina
var listaVoti = document.getElementById("listaVoti");
var nuovoVoto = document.createElement("li");
nuovoVoto.innerHTML = materia + ": " + voto;
listaVoti.appendChild(nuovoVoto);

// reset input voto e materia
document.getElementById("voto").value = "";
document.getElementById("materia").value = "";

  }

// funzione per filtrare i voti per materia
function filtraVoti() {
// prendi il valore della materia inserita
  
var materiaFiltro = document.getElementById("filtroMateria").value;
// nascondi tutti gli elementi "li" della lista
var listaVoti = document.getElementById("listaVoti");
var elementi = listaVoti.getElementsByTagName("li");
for (var i = 0; i < elementi.length; i++) {
elementi[i].style.display = "none";
}
// mostra solo gli elementi "li" che corrispondono alla materia filtrata
for (var j = 0; j < voti.length