ALEX SCUOLA by @alessandrostano - Codewith.it

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

References

_blankApre i collegamenti ipertestuali in una nuova scheda del browser
_selfApre collegamenti ipertestuali nella stessa pagina del browser
headersDetermina la relazione tra celle e celle di intestazione di una tabella.
<nav>Definisce un menu di navigazione
srcsetL'attributo srcset definisce la risorsa grafica tramite URL all'interno del tag <source> contenuto in <picture>
<address> Definisce una sezione contenente indirizzi, contatti e informazioni

Users

Log in to search for users

Explore

Find inspiration

esercitazione 3

Modulo preventivo

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