Lista delle Attività by @silvione87 - Codewith.it

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

References

<input>Definisce un area di input per l'invio di dati e informazioni
dirnameInvia informazioni sulla direzione di scrittura da un elemento input
autofocusAttiva un elemento al caricamento della pagina.
<em>Formatta il testo in corsivo/italico enfatizzato
<ul>Usato per la creazione di liste non ordinate.
widthImposta la larghezza di un elemento HTML

Users

Log in to search for users

Explore

Find inspiration

Esercizio lezione 9

Lola Harrel CSS Styling Assignment

Progetto personale

Heads Or Tails Random Tally

Verifica Subappalto (Art. 119)

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 = "";