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
0
Codice HTML
Per iniziare dunque, esploriamo il codice HTML necessario per il nostro progetto.
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
0
In questo secondo esempio, abbiamo adottato l’uso dell’evento onclick direttamente sui pulsanti nel codice HTML.
È 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.
In this lesson we will create a simple JavaScript to do list, a classic JavaScript exercise that allows you to experiment with the methods learned so far.
To carry out this project, in fact, we will use some methods to manipulate the DOM in JavaScript.
In the meantime, try the project that we are going to create together by inserting an item and then clicking on the add button in the figure below:
App To Do List
To do list in JavaScript – development
First we create the HTML code of the project.
So let’s create an input box with a button and prepare a list where all the elements that we will add gradually will appear.
We then create any CSS to give a graphic touch, for example I have created this:
First of all we checked that the input box contained some text and otherwise we exit the function with a return. In this way, if the box is empty, a list is not created.
After, we used the addEventListener method to capture the first click on the add button to add an item in the list and then on the delete button to delete the corresponding item.
Within the generateList function we used the createElement and createTextNode methods respectively to create the necessary tags (li and button) and add text.
After adding the entry we empty the input box.
Conclusion
In this lesson we have developed a simple to do list in JavaScript, try developing one yourself and write in the comments below. In the next lessons we will develop many other creative projects.
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:
