Counter JavaScript

In questo articolo, esploreremo la creazione di un counter in JavaScript, fornendo implementazioni che consentono sia l’incremento che il decremento in modi diversificati e interessanti.

Realizziamo un counter in JavaScript

In questo primo progetto, ci immergeremo nella creazione di un counter utilizzando esclusivamente JavaScript Vanilla. Sperimentate cliccando sui pulsanti sottostanti per incrementare o decrementare la variabile del counter, partendo dal valore iniziale di 0.

JavaScript Counter

Codice HTML

Per iniziare dunque, esploriamo il codice HTML necessario per il nostro progetto.

<div class="container">
    <h3>JavaScript Counter</h3>
    <button id="minus">-</button>
    <span id="number">0</span>
    <button id="plus">+</button>
</div>

Abbiamo inserito il button minus che ha la funzione di decrementare la variabile number ed il button plus che invece ha la funzione di incrementarla.

Per identificare ogni elemento abbiamo utilizzato un id, allo scopo di poter poi utilizzare il metodo getElementById in JavaScript.

Codice CSS per la realizzazione del counter in JavaScript

Successivamente, possiamo arricchire il nostro progetto aggiungendo del codice CSS a piacere. Nel mio caso, ho incluso il seguente:

.container {
    background-color: #2c45a3;
    text-align: center;
    padding: 20px;
    color: white;
}

h3 {
  font-size: 30px;  
}

button {
  font-size: 30px;
  background-color: #fc7180;
  color: #2c45a3;
  border: none;
  border-radius: 10px;
  padding: 10px 20px;
  cursor: pointer;
}

#number {
  font-size: 40px;
  padding: 0 50px;
}

Codice JavaScript per la realizzazione del counter

Adesso, presentiamo il codice JavaScript che fa uso del metodo addEventListener per catturare il click del mouse sui pulsanti “più” e “meno”. Al click di ciascun pulsante, l’azione svolta sarà l’incremento oppure il decremento della variabile, con successiva scrittura del suo valore nell’elemento con id “number”, attraverso la proprietà innerHTML.

Ecco di seguito una possibile implementazione:

const number = document.getElementById('number');
const buttonPlus = document.getElementById('plus');
const buttonMinus = document.getElementById('minus');

buttonPlus.addEventListener('click', add);
buttonMinus.addEventListener('click', subtract);

let value = 0;

function add() {
  value++;
  number.innerHTML = value;
}

function subtract() {
  value--;
  number.innerHTML = value;
}

Counter con diversi valori di incremento

In questo secondo esempio, effettuiamo l’incremento del counter utilizzando valori differenti: 1, 5, 10 o 100. Cliccate dunque sui rispettivi pulsanti per osservare l’incremento della variabile di partenza:

JavaScript Counter

In questo secondo esempio, abbiamo adottato l’uso dell’evento onclick direttamente sui pulsanti nel codice HTML.



<div class="container">
        <h3>JavaScript Counter</h3>
        <span id="number">0</span>
        <button onclick="add(1)">1</button>
        <button onclick="add(5)">5</button>
        <button onclick="add(10)">10</button>
        <button onclick="add(100)">100</button>
</div>

È importante notare che abbiamo incluso un secondo parametro in base al valore desiderato per l’incremento. Di seguito, presento il codice JavaScript che ho sviluppato:

const number = document.getElementById('number');

let value = 0;

function add(n) {
  value = value + n;
  number.innerHTML = value;
}

Conclusione

In questo articolo, abbiamo presentato un semplice counter implementato in JavaScript. Prossimamente, esploreremo una serie di progetti affascinanti basati su JavaScript.

>> approfondimento getElementById

to-do list >>