To do list in JavaScript

In questa lezione realizzeremo una semplice to do list in JavaScript, un classico esercizio di JavaScript che permette di sperimentare i metodi appresi finora.

Per realizzare questo progetto infatti utilizzeremo alcuni metodi per manipolare il DOM in JavaScript.

Intanto provate il progetto che andremo a realizzare assieme inserendo una voce e cliccando poi sul pulsante add della figura sotto:

App To Do List

To do list in JavaScript – sviluppo del codice

Innanzitutto realizziamo il codice HTML del progetto.

Creiamo dunque una casella di input con un button e predisponiamo una lista dove appariranno tutti gli elementi che aggiungeremo a mano a mano.





Realizziamo poi del CSS a piacere per dare un tocco grafico, io ad esempio ho realizzato questo:



.container{
    background: #ff6676;
    padding: 30px;   
    display: flex;
    flex-direction: column;
}

.container h3{
    color: white;
    text-align: center;
    margin-bottom: 15px;
    height: auto;
}

form{
    display: flex;
    width: 100%;
}

.textInput{
    width: 100%;
    border: none;
    padding: 14px;
}

#add{
    width: 30%;
    cursor: pointer;
    background: #2c45a3;
    border: none;
    color: white;
    font-size: 18px;
}

ul#lists{
    display: flex;
    flex-direction: column;
    margin: 10px 0;
    list-style: none;
}

ul#lists li{
    padding: 12px;
    background: white;
    border: 1px solid #2c45a3;
    display:flex;
    justify-content: space-between;
}

.delete{
    padding: 10px;
    cursor: pointer;
    border: none;
    background: #ff6676;
    color: white;
}

Infine sviluppiamo il codice JavaScript necessario a far funzionare la nostra to do list:



const buttonAdd = document.getElementById('add');
const lists = document.getElementById('lists');
const textInput = document.querySelector('.textInput');

buttonAdd.addEventListener('click', generateList);

function generateList(event) {
    event.preventDefault();

    if (textInput.value === '') return;

    const li =  document.createElement('li');
    lists.appendChild(li);    
    li.appendChild(document.createTextNode(textInput.value));
    
    const buttonDelete = document.createElement('button');
    buttonDelete.className = 'delete';
    buttonDelete.appendChild(document.createTextNode('X'));    
    li.appendChild(buttonDelete);
    
    textInput.value = '';
    
    buttonDelete.addEventListener('click', (event) =>{
        const parentNodeEl = event.target.parentNode;
        setTimeout(() =>{
            parentNodeEl.remove();
        }, 500)
        
    });
         
}



Prima di tutto abbiamo controllato che la casella di input contenesse del testo ed in caso contrario si esce dalla funzione con un return. In questo modo, se la casella è vuota non si crea una lista.

Dopo, abbiamo utilizzato il metodo addEventListener per catturare il click dapprima sul pulsante add per aggiungere una voce nell’elenzo e poi sul pulsante delete per eliminare la voce corrispondente.

All’interno della funzione generateList abbiamo utilizzato i metodi createElement e createTextNode rispettivamente per creare dei tag necessari (li e button) ed aggiungere del testo.

Dopo aver aggiunto la voce svuotiamo la casella di input.

Conclusione

In questa lezione abbiamo sviluppato una semplice to do list in JavaScript, provate anche voi a svilupparne una e scrivete nei commenti sotto. Nelle prossime lezioni svilupperemo tanti altri progetti creativi.

Alcuni link utili

Indice tutorial JavaScript

Introduzione al tutorial JavaScript

Il linguaggio JavaScript

Come utilizzare JavaScript alert

Variabili in JavaScript

Gioco indovina numero in JavaScript

Gioco della morra cinese in JavaScript

Semplice quiz utilizzando gli array

Come realizzare il gioco dei dadi online

Comments

No comments yet. Why don’t you start the discussion?

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *