Esercizio To-do List Interattiva con Javascript

Esercizio To-do List Interattiva con Javascript

Crea una lista interattiva con Javascript usando il selettore querySelectorAl, il ciclo for sull'array e l'aggiunta di una classe al passaggio del mouse e un altra al click.

indice

Esercizio in funzione: Esercizio lista impegni interattiva con Javascript

  • Lavare i giornali
  • Salire l'ascensore
  • Pulire il detersivo
  • Comprare i Soldi
  • Saldare il Salvabile
  • Amputare l'aspirapolvere
  • SciaQQuare lo sciaQQuone
  • Stringere gli applausi
  • Navigare nella Ruota

Codice della lezione: Esercizio lista impegni interattiva con Javascript

const mialista= document.querySelectorAll(".listalavagna > li");
//creare un loop con index che parte da 0 
for(let i = 0; i < mialista.length; i++ ) {
  // accesso alla creazione dell'array e crea funzione che aggiunge una classe al mouseover, al mouseout e al click
  mialista[i].addEventListener('mouseover',function(){
    this.classList.add("selezione");
  });
  mialista[i].addEventListener('mouseout',function(){
    this.classList.remove("selezione");
  });
  mialista[i].addEventListener('click',function(){
    this.classList.toggle("fatto");
  });
};				

Scritto da Donato Pirolo

Ciao, sono Donato, frontend developer con una smisurata passione per la SEO. Creo strumenti ad hoc per aiutare aziende e professionisti ad essere cercati sul web e trovare clienti.

Potrebbero interessarti

Lascia un commento

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

Copyright © 2022
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram