to do list in JavaScript

da Cristina | Lug 27, 2021 | Javascript, Web

In questa lezione realizzeremo una semplice to do list in JavaScript. Si tratta di un esercizio classico che ci permetterà di mettere in pratica i concetti appresi finora e di sperimentare l’utilizzo di JavaScript per manipolare il DOM e gestire eventi.

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:

Esplora l’universo infinito della programmazione con ’50 Algoritmi per imparare JavaScript’, il libro che trasformerà la tua passione per il codice in realtà digitale!

Acquistalo su Amazon

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.

<div id="flexContainer">
    <h1>Lista delle Attività</h1>
    <div id="inputContainer">
       <input type="text" id="taskInput" placeholder="Aggiungi una nuova attività">
       <button class="addBtn" id="addButton">Aggiungi</button>
    </div>
    <ul id="taskList"></ul>
</div>

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

body {
      font-family: Arial, sans-serif;

      background-color: #f4f4f4;
      display: flex;
      justify-content: center;
      align-items: center;
 }

#flexContainer {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 600px;
      padding: 20px;
      margin: 80px;
      border-radius: 8px;
      background-color: #fff;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

h1 {
    color: #333;
    margin-bottom: 20px;
 }

#inputContainer {
     display: flex;
     margin-bottom: 20px;
 }

input[type="text"] {
     flex: 1;
     padding: 8px;
     font-size: 1em;
     margin-right: 10px;
}

button {
     padding: 10px 20px;
     font-size: 1em;
     cursor: pointer;
     border: none;
     border-radius: 4px;
     transition: background-color 0.3s;
 }

button.addBtn {
     background-color: #4CAF50;
     color: #fff;
 }

button.editBtn {
      background-color: #3498db;
            color: #fff;
}

button.deleteBtn {
    background-color: #e74c3c;
    color: #fff;
}

button:hover {
     background-color: #45a049;
 }

ul {
    list-style-type: none;
    padding: 0;
 }

 li {
    font-size: 1.2em;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    width: 100%;
 }
        
.taskText {
     flex: 1;
  }

.buttonContainer {
      display: flex;
      margin-left: auto;
  }

 .buttonContainer button {
      margin-left: 10px;
}

/* Finestra modale */
#modal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      justify-content: center;
      align-items: center;
 }

#modalContent {
      background-color: #fff;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#modalInput {
      margin-bottom: 10px;
}

 #modalButtons {
      display: flex;
      justify-content: flex-end;
}

#modalButtons button {
      margin-left: 10px;
}

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

const addButton = document.getElementById('addButton');
addButton.addEventListener('click', function () {
    let taskInput = document.getElementById('taskInput').value;
    const taskList = document.getElementById('taskList');

    if (taskInput.trim() !== '') {
         const newTask = document.createElement('li');

         newTask.innerHTML = `
          <span class="taskText">${taskInput}</span>
          <div class="buttonContainer">
              <button class="editBtn" onclick="openModal(this)">Modifica</button>
              <button class="deleteBtn" onclick="deleteTask(this)">Elimina</button>
           </div>  `;

           taskList.appendChild(newTask);
           taskInput = '';
            }
    });

    const modal = document.getElementById('modal');
    const modalInput = document.getElementById('modalInput');
    let editingTask = null;

    function deleteTask(button) {
        const taskItem = button.parentNode.parentNode;
        const confirmation = window.confirm("Sei sicuro di voler eliminare questa attività?");
    
    if (confirmation) {
        taskItem.parentNode.removeChild(taskItem);
    };

 }
        
function openModal(button) {
    const taskItem = button.parentNode.parentNode;
    const taskText = taskItem.querySelector('.taskText');
    modalInput.value = taskText.textContent;
    editingTask = taskItem;  // Memorizza l'attività che sta per essere modificata
    modal.style.display = 'flex';
 }

document.getElementById('confirmEdit').addEventListener('click', confirmEdit);
function confirmEdit() {
    const taskText = modalInput.value.trim();

    if (taskText !== '') {
       const span = editingTask.querySelector('.taskText');
       span.textContent = taskText;

       closeModal();
     }
 }

document.getElementById('closeModal').addEventListener('click', closeModal);
    function closeModal(confirmEdit) {
        modal.style.display = 'none';
        editingTask = null;  // Resetta l'attività in modifica
}

Descrizione dell’algoritmo per la to do list in JavaScript

In questo esempio ho creato alcune funzioni per la gestione della to-do list in JavaScript.

Innanzitutto ho creato la funzione aggiungi attività, e attraverso un listener l’ho collegata al button addButton. Dunque quando si clicca sul pulsante si avvia la funzione che consente di recuperare il valore dalla casella di input. Prima di inserirlo nella lista di cose da fare controlliamo che il campo di input non sia vuoto e se questa condizione è vera aggiunge l’attività attravesro al creazione di un nuovo elemento li. Per ogni attività ho creato anche due pulsanti per l’aggiunta e l’eliminazione della voce dell’elenco.

Dopo ho creato la funzione per eliminare l’attività che viene chiamata al click sul button “Elimina” all’interno dell’attività. In questa funzione ottengo il riferimento all’elemento <li> padre dell’attività e prima dell’eliminazione chiedo conferma attraverso una finestra di alert. Se l’utente conferma, rimuove l’elemento <li> dall’elenco.

Quindi ho sviluppato la funzione per la modifica dell’attività definendo una finestra openModal che viene chiamata quando viene cliccato il bottone “Modifica” all’interno di un’attività. Questa funzione Ottiene il riferimento all’elemento <li> padre dell’attività e al testo dell’attività. Dunque mostra una modal (una finestra modale) con un campo di input prepopolato con il testo dell’attività. Inoltre memorizza l’attività che sta per essere modifica.

Quando scriviamo nella casella di input le modifiche possiamo confermarle attraverso il pulsante “Modifica”. A questo pulsante ho infatti aggiunto un listener per gestire il click dell’utente. Quando viene cliccato il bottone di conferma, recupera il testo dall’input della modal. Se il testo non è vuoto, aggiorna il testo dell’attività nell’elemento <li> corrispondente e chiude la modal.

Altrimenti possiamo chiudere la finestra modale senza apportare nessuna modifica, cliccando sul pulsante Annulla. Quando si clicca su questo pulsante di chiusura, si chiude la modale nascondendola. Inoltre si resetta la variabile editingTask a null.

Esplora l’universo infinito della programmazione con ’50 Algoritmi per imparare JavaScript’, il libro che trasformerà la tua passione per il codice in realtà digitale!

Acquistalo su Amazon

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

Corso linguaggio JavaScript

Libro JavaScript

Indice 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

Memory game in JavaScript

da Cristina | Apr 11, 2021 | Javascript, Web

In questa lezione realizzeremo il gioco memory game in JavaScript, ovvero il famoso gioco di abbinamento per testare la memoria di un giocatore.

Per lo sviluppo di questo gioco utilizzeremo alcuni metodi e proprietà di JavaScript che abbiamo studiato nelle lezioni precedenti, tra cui anche metodi e proprietà utili per manipolare il DOM in JavaScript. Vedremo anche l’utilizzo delle funzioni.

Ecco dunque una demo del gioco che andremo a realizzare:

Primo passaggio del gioco memory game in JavaScript

Innanzitutto occorre decidere la dimensione della matrice, nel nostro esempio realizzeremo una matrice 4 x 4. Quindi decidiamo come popolare ciascun elemento della matrice. Lo potremmo fare con dei numeri oppure con delle icone.

Scegliamo di utilizzare queste icone: https://html-css-js.com/html/character-codes/ e inseriamo alcune icone di animali. Dato che stiamo realizzando una matrice 4 x 4 mi serviranno 8 simboli, ripetuti 2 volte ciascuno.

const arrayAnimali  = ['🐱', '🦉', '🐾', 
                     '🦄', '🦋', '🐛', 
                     '🐝', '🐬', '🐱',
                     '🦉', '🐾', '🦄', 
                     '🦋', '🐛', '🐝','🐬'];

Adesso dobbiamo generare un array random e quindi ci servirà creare una funzione che generi in maniera random gli elementi e li inserisca in un array. Per fare ciò utilizzeremo l'algoritmo Fisher-Yates Shuffle, chi vuole può approfondire al seguente link: https://en.wikipedia.org/wiki/Fisher%E2%80%93Yates_shuffle

function shuffle(a) {
  let currentIndex = a.length;
  let temporaryValue, randomIndex;

  while (currentIndex !== 0) {
    const randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;
    temporaryValue = a[currentIndex];
    a[currentIndex] = a[randomIndex];
    a[randomIndex] = temporaryValue;
  }
  return a;
}

Secondo passaggio del gioco memory game in JavaScript

Il gioco avrà un timer per i secondi trascorsi, dunque creiamo una funzione apposita, dove appena la variabile dei secondi (s) arriva a 60 incrementiamo i minuti. Quando i minuti (m) arrivano a 60 allora incrementeremo le ore (h). Notiamo che è necessario creare una variabile globale (interval) per poi ripulirla ogni volta che avviamo il gioco.

let interval;
/*creiamo la variabile globale interval 
per poterla poi ripulire ogni volta che si inizia il gioco.*/

function startTimer() {
  let seconds = 0;
  let minutes = 0;

  interval = setInterval(() => {
    timer.innerHTML = `Tempo: ${minutes} min ${seconds} sec`;
    seconds++;

    if (seconds === 60) {
      minutes++;
      seconds = 0;
    }

    if (minutes === 60) {
      minutes = 0;
    }
  }, 1000);
}

Terzo passaggio del gioco memory game in JavaScript

Adesso realizziamo la funzione startGame che si occupa di far partire il tutto.

Utilizzeremo un array di appoggio (arrayComparison) per confrontare ogni volta le due carte scoperte.

Quindi quando parte il gioco creiamo innanzitutto l'array random di animali. Poi ripuliamo la variabile interval che tiene traccia del tempo trascorso e azzeriamo l'arrayComparison.
Ripuliamo il contenuto del contenitore griglia e con un ciclo for creiamo un elemento div che all'interno contiene un altro elemento div con classe icon.

Facciamo partire il timer e per ogni card cliccata facciamo partire la funzione displayIcon:

function startGame() {
    clearInterval(interval);
    arrayComparison.length = 0;

    const arrayShuffle = shuffle(arrayAnimali);

    const lista = document.getElementById('griglia');
    while (lista.hasChildNodes()) {
      lista.removeChild(lista.firstChild);
    }

    for (let i = 0; i < 16; i++) {
      const box = document.createElement('div');
      const element = document.createElement('div');
      element.className = 'icon';
      document.getElementById('griglia').appendChild(box).appendChild(element);
      element.innerHTML = arrayShuffle[i];
    }

    startTimer();

    const icon = document.getElementsByClassName("icon");
    const icons = [...icon];

    for (let i = 0; i < icons.length; i++) {
      icons[i].addEventListener("click", displayIcon);
      icons[i].addEventListener("click", openModal);
    }
  }

Facciamo partire questa funzione al click del pulsante start o quando si carica la pagina html.

document.body.onload = startGame();

Quarto passaggio del gioco memory game in JavaScript

La funzione displayicon legge tutte le icone caricate e attiva per ciascuna carta scoperta la classe show. Inoltre inserisce la carta scoperta nell'arrayComparison. Quindi determina la lunghezza dell'arrayComparison e se è due confronta le carte, se uguali aggiunge le classi find per attivare l'effetto a rotazione e disabled per disabilitare il click.

Se non sono uguali dopo 700 millisecondi rimuove la classe show:

function displayIcon() {
    const icon = document.getElementsByClassName("icon");
    const icons = [...icon];

    this.classList.toggle("show");
    arrayComparison.push(this);

    const len = arrayComparison.length;
    if (len === 2) {
      if (arrayComparison[0].innerHTML === arrayComparison[1].innerHTML) {
        arrayComparison[0].classList.add("find", "disabled");
        arrayComparison[1].classList.add("find", "disabled");
        arrayComparison.length = 0;
      } else {
        icons.forEach(function (item) {
          item.classList.add('disabled');
        });
        setTimeout(function () {
          arrayComparison[0].classList.remove("show");
          arrayComparison[1].classList.remove("show");
          icons.forEach(function (item) {
            item.classList.remove('disabled');
            for (let i = 0; i < iconsFind.length; i++) {
              iconsFind[i].classList.add("disabled");
            }
          });
          arrayComparison.length = 0;
        }, 700);
      }
    }
  }

Finestra modale

Pensiamo adesso alla finestra modale che appare quando abbiamo indovinato tutte le combinazioni:

const modal = document.getElementById("modal");
const timer = document.querySelector(".timer");

function openModal() {
    if (iconsFind.length === 16) {
      clearInterval(interval);
      modal.classList.add("active");
      document.getElementById("tempoTrascorso").innerHTML = timer.innerHTML;
      closeModal();
    }
  }

 function closeModal() {
    closeicon.addEventListener("click", function (e) {
      modal.classList.remove("active");
      startGame();
    });
  }

Infine la funzione playAgain che ci consente di riavviare il gioco e chiudere la finestra modale:

function playAgain(){
  modal.classList.remove("active");
  startGame();
}

Pagina html del gioco memory game

Nella pagina html predispongo semplicemente la sezione griglia dove si inseriranno tutte le carte, la sezione che contiene il pulsante per ricominciare il gioco ed il tempo.

<div class="container icon-grid" id="griglia"></div>
  <div class="container text-center">  
    <input type="button" id="button" class="button" onclick=startGame() value="Ricomincia">
    <div class="timer">Tempo: 0 min 0 sec</div>  
  </div>

<div id="modal">       
   <div class="content">
       <h2>Congratulazioni hai risolto il gioco in </h2>
       <p><span id=totalTime> </span> </p>
       <p><input type="button" class="button" onclick=playAgain() value="Gioca Ancora!"></p>
   </div>        
</div>

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

Pagina CSS del gioco memory game in JavaScript

Potete personalizzare poi il CSS a vostro piacimento, vi allego quello creato nell'esempio:

.container{
  width: 600px;
  margin:auto;
  background-color: lightgrey;
}

.text-center {
  text-align: center;
}

.icon-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.show {
   visibility: visible;
   opacity: 100;
}

#griglia > div{
   margin: 20px 10px;
   width: 120px;
   height: 120px;
   background-color: #ffc83d;
   border: 1px solid #3889c4;
   border-radius: 10px;
}

.timer {
   padding: 10px 0;
}

.icon {
   font-size: 80px;
   text-align: center;
   visibility: visible;
   opacity:0;
   width: 100%;
   height: 100%;
   cursor: pointer;
}

.disabled {
   pointer-events: none;
   cursor:wait;
}

.show {
   animation-name: rotation-icon;
   animation-duration: .5s;
   background-color:white;
   border: 1px solid #3889c4;
   border-radius: 10px;
}

.find {
   animation-name: guessed;
   animation-duration: .5s;
   background-color:#3889c4;
   border: 1px solid #3889c4;
   border-radius: 10px;
}

.button{
  color: white;
  font-size: 22px;
  text-align: center;
  margin-top: 10px;
  padding: 10px;
  background-color: #ffc83d;
  border: 1px solid #3889c4;
  border-radius: 5px;
}

.button:hover{
  background-color: #16486c;
  border:none;
}

 #modal {
    display: none;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.9);
    position: fixed;
    top: 0;
    left: 0;
}

  #modal.active {
    display: flex;
  }
  
  #modal h2 {
    margin-top: 20px;
  }


@keyframes guessed{ 
 from { 
    transform: rotate(0deg);
   } 
  to { 
   transform: rotate(360deg);	 
  }
}

@keyframes rotation-icon {
   from {
	transform: perspective(300px) rotate3d(0, 1, 0, 80deg);
	animation-timing-function: ease-in;
   }

   50% {
	transform: perspective(300px) rotate3d(0, 1, 0, -10deg);
	animation-timing-function: ease-in;
   }

   to {
	transform: perspective(300px);
	animation-timing-function: ease-in;
   }
}

Divertitevi a creare altre varianti del Memory game in JavaScript.

Alcuni link utili

Indice tutorial JavaScript

Il linguaggio JavaScript

Come utilizzare JavaScript alert

Utilizzare JavaScript prompt

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