ALEX SCUOLA by @alessandrostano - Codewith.it

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

Referenze

<label>Mostrare un testo di etichetta per un elemento di input.
valueValore alfanumerico o booleano contenuto in un elemento
minImposta il valore numerico o temporale minimo per un elemento input
methodDetermina il metodo di invio dei dati di un form al server
<abbr>Inserisce abbreviazioni e acronimi
_parentApre collegamenti ipertestuali nell'elemento genitore

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Borsino politico(2)

Compito informatica

prototipo di form tag

CalcoloTriangolo

sanchez ximena html 3

DEMO: For Loop 2

attività della settimana

UFFICIALE SITO REGIONI

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<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