Progetti JavaScript – soloscuola

In questo articolo svilupperemo dei semplici progetti JavaScript, come ad esempio visualizzare un counter che si incrementa in vari modi.

Progetti JavaScript – counter

In questo primo progetto realizzeremo un counter utilizzando solo JavaScript Vanilla.

Provate a cliccare sui pulsanti sotto per incrementare o decrementare la variabile counter che parte dal valore inziale 0.

JavaScript Counter

Come possiamo sviluppare il codice?

Dapprima ecco il semplice codice html necessario per il nostro progetto.

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.

Aggiungiamo poi del semplice codice CSS a piacere. Io ad esempio ho inserito questo:



.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;
}

Ed ecco dunque il codice JavaScript che utilizza il metodo addEventListener per intercettare il clik del mouse sui due pulsanti più e meno.

Quello che faremo al click del mouse su ciascun button sarà semplicemente incrementare o decrementare il valore della variabile e scriverla nell’elemento che ha id number attraverso la proprietà innerHTML.



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;
}

Progetti JavaScript – counter con diversi valori di incremento

In questo secondo esempio incrementiamo il counter con valori diversi: 1, 5, 10 oppure 100.

Cliccate dunque sui vari button per vedere l’incremento della variabile di partenza.

JavaScript Counter

In questo secondo esempio abbiamo utilizzato l’evento onclick direttamente sul pulsante nel codice HTML.

Potete notare che abbiamo passato un secondo parametro a seconda del valore che vogliamo incrementare.

Ecco di seguito il codice JavaScript:



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

let value = 0;

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

Conclusione

In questo articolo abbiamo sviluppato un semplice counter. Continueremo poi nei prossimi articoli a sviluppare tanti interessanti progetti in JavaScript.