Lista delle Attività by @silvione87 - Codewith.it

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

References

<h1>Titolo di intestazione di primo livello
<em>Formatta il testo in corsivo/italico enfatizzato
valueValore alfanumerico o booleano contenuto in un elemento
acceptDefinisce e filtra il formato dei file per il tag <input type=file>
<nav>Definisce un menu di navigazione
selectedPre-seleziona un elemento di input

Users

Log in to search for users

Explore

Find inspiration

Lola Harrel Project 2

informatica 13/10

PixFlow Agency | Web Design, Video

Form per il torneo misto disfo

Prova di programmazione html

Un Giorno a Napoli: Itinerario Det

prova elenco puntato

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 lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lista delle Attività</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Lista delle Attività</h1>

    <input type="text" id="nuovo-compito" placeholder="Aggiungi un nuovo compito">
    <button onclick="aggiungiAttività()">Aggiungi</button>

    <ul id="lista-attività">
    </ul>

    <script src="script.js"></script>
</body>
</html>

body {
    font-family: sans-serif;
    margin: 0;
    padding: 20px;
}

h1 {
    font-size: 2em;
    margin-bottom: 20px;
}

#nuovo-compito {
    width: 70%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
}

button {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    background-color: #4CAF50;
    color: white;
    font-weight: bold;
    cursor: pointer;
}

button:hover {
    background-color: #3e8e41;
}

#lista-attività {
    list-style: none;
    padding: 0;
    margin: 0;
}

.elemento-attività {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

.elemento-attività p {
    font-size: 18px;
}

.elemento-attività button {
    padding: 5px 10px;
    border: none;
    border-radius: 5px;
    background-color: #f00;
    color: white;
    font-weight: bold;
    cursor: pointer;
}

.elemento-attività button:hover {
    background-color: #c00;
}

function aggiungiAttività() {
    // Recupera il teso dal campo di input
    var nuovoCompito = document.getElementById("nuovo-compito").value;
  
    //Controlla se il compito è vuoto
    if (nuovoCompito === "") {
      return;
    }
  
    // crea un nuovo elemento della lista
    var elementoLista = document.s("li");
    elementoLista.classList.add("elemento-attività");
  
    // Crea un paragrafo per visualizzare il compito
    var testoCompito = document.createElement("p");
    testoCompito.innerText = nuovoCompito;
  
    // Crea un pulsante per eliminare il compito
    var eliminaButton = document.createElement("button");
    eliminaButton.innerText = "X";
    eliminaButton.onclick = function() {
      this.parentNode.remove();
    };
  
    // Aggiungi il paragrafo e il pulsante all'elemento della lista
    elementoLista.appendChild(testoCompito);
    elementoLista.appendChild(eliminaButton);
  
    //Aggiungi l'elemento della lista alla lista delle attività
    var listaAttività = document.getElementById("lista-attività");
    listaAttività.appendChild(elementoLista);
  
    // Svuota il campo di input
    document.getElementById("nuovo-compito").value = "";