Primo progetto Javascript: creare un contatore

Che cosa realizzeremo in questo progetto ?

Andremo a realizzare un semplice contatore per iniziare a familiarizzare con i concetti base di Javascript. Verrà visualizzato un numero che parte da zero, insieme a tre pulsanti che serviranno a incrementare, decrementare oppure resettare il contatore. Inoltre, andremo a modificare il colore del numero in base al suo valore: se negativo, diventerà di colore rosso, se positivo, invece, diventerà di colore verde.

Come costruire il nostro contatore

La struttura HTML del contatore è abbastanza semplice. Avremo semplicemente un h1 che conterrà il titolo, ed un div che sarà il contenitore del contatore vero e proprio. Al suo interno, troviamo il div che tramite uno script mostrerà all'utente il valore numerico del contatore, ed il container che contiene i tre pulsanti tramite i quali potremo interagire. Potremo incrementare, decrementare e resettare il contatore.

  <main>
      <h1 class="social-row">Counter</h1>

      <div class="container-xl">
        <div class="social-row" id="count">0</div>

        <div class="container social-row justify-center gap-sm">
          <button class="button-xs minus">-</button>
          <button class="button-xs reset">reset</button>
          <button class="button-xs plus">+</button>
        </div>
      </div>
    </main>

Come selezionare i nodi dal DOM

Per prima cosa, andremo a dichiarare una variabile che figurerà in nostro contatore

let counter = 0;

Successivamente andremo a selezionare dal DOM i nodi di cui avremo bisogno. Selezioniamo il nodo in cui viene iniettato il valore del contatore, utilizzando il metodo getElementById

const count = document.getElementById("count");

Selezioneremo anche i nodi dei bottoni su cui sarà possibile cliccare. Per farlo utilizzeremo il metodo querySelectorAll, che ritorna una NodeList.

const buttons = document.querySelectorAll(".button-xs");

Modificare il valore del contatore

Avendo selezionato i nodi dei vari bottoni dal DOM, ora siamo in grado di modificare il valore del contatore in base al bottone su cui si clicca. Per farlo, andremo ad utlizzare il metodo forEach che ci permette di ciclare la NodeList contenente i nodi dei bottoni.

Per ogni pulsante andremo a controllare la classe che possiede, ed in base a questo andremo a modificare il valore della variabile counter creata poco fa, per poi andarla ad iniettare all'interno del nodo count, tramite il medoto textContent

buttons.forEach(function (button) {
  button.addEventListener("click", function (e) {
    const style = e.currentTarget.classList;
    if (style.contains("minus")) {
      counter--;
    } else if (style.contains("plus")) {
      counter++;
    } else {
      counter = 0;
    }

    count.textContent = counter;
  });
});

Modificare il colore del contatore

Come ultima cosa, faremo in modo che il numero del contatore, cambi colore in base al suo valore. Per farlo effettueremo un controllo tramite un if , in cui andremo a controllare che la variabile counter sia maggiore, minore o uguale a zero. Se zero il colore sarà bianco, se maggiore di zero il colore sarà verde, se minore di zero il colore sarà rosso. Questo verrà realizzato accedendo alla propietà style del nodo count.

Questo controllo verrà inserito all'interno della callback del metodo forEach, prima che il valore di counter sia settato all'interno del nodo count.

   if (counter > 0) {
      count.style.color = "lightgreen";
    } else if (counter < 0) {
      count.style.color = "red";
    } else {
      count.style.color = "white";
    }