ALEX SCUOLA by @alessandrostano - Codewith.it

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

References

<address> Definisce una sezione contenente indirizzi, contatti e informazioni
<html>Tag primario di un documento HTML
<h3>Titolo di intestazione di terzo livello
mutedL'attributo muted viene utilizzato impostare risorse HTML audio e video con volume muto
maxlengthDetermina il numero massimo di caratteri consentiti in un elemento input
<u> Utilizzato definire una parte del contenuto come annotazione non testuale, con una sottolineatura.

Users

Log in to search for users

Explore

Find inspiration

Supermercato si

Aurora Flux — Concept Design

Unity WebGL Player | Hollow Knight

Design, Marketing & AI News (Portf

GreenBox - Giardinaggio a casa tua

20240126 pagina html

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