In questa lezione sviluppiamo un semplice slideshow in JavaScript.
Gli slideshow di immagini sono un modo efficace ed accattivante per presentare visivamente un sito web. È superfluo quindi evidenziare che occorre selezionare foto di alta qualità, ben illuminate e nitide e di forte impatto visivo. L’obiettivo è quello di raccontare la storia attraverso le immagini, mantenendo coerenza e connessione tra di esse.
Slideshow in JavaScript
Lo slideshow che svilupperò avrà dei pulsanti ai lati per scorrere le immagini e i button sotto per selezionare l’immagine desiderata. Inoltre lo slideshow inizia in automatico ma non appena si clicca sui button lo slideshow si interrompe.
Provate adesso la versione realizzata scorrendo lo slideshow sotto:
Il codice HTML, sopra descritto, crea un semplice slider di immagini con pulsanti di navigazione laterali e punti di navigazione.
Innanzitutto ho creato il contenitore principale, assegnando la classe “slider-container”, che racchiude tutte le componenti dello slider. Dopo, al’interno, ho inserito il div a cui ho assegato la classe “slider”, che contiene le singole slide, ciascuna contenente un’immagine ed i relativi testi alternativi sono incorporati nelle slide.
Poi ho inserito due pulsanti di navigazione, uno per passare all’immagine precedente e l’altro per passare all’immagine successiva, che ho posizionato sopra le slide. Infine, un div con la classe “dot-container” fornisce una barra di punti di navigazione posta sotto le immagini, riflettendo il numero di slide disponibili. L’HTML fornisce la struttura di base su cui verranno implementati gli stili CSS e gli script JavaScript per rendere lo slider completamente funzionale e visivamente accattivante.
Codice CSS del nostro Slideshow JavaScript
Ecco il codice CSS che ho realizzato per sviluppare l’esempio:
Ho creato uno stile CSS pulito, semplice e moderno per rappresentare lo slider di immagini.
Il corpo della pagina è strutturato con il font di base Arial, senza margini o padding, allo scopo di garantire una base uniforme. Il contenitore principale dello slider (slider-container) occupa l’intera larghezza della pagina, nascondendo eventuali overflow per mantenere un layout coerente.
Per quanto riguarda il contenitore delle slide (slider), si fa uso del display flessibile per allineare orizzontalmente le immagini. Ogni slide (slide) è minimamente larga al 100%, garantendo così di occupare l’intero spazio disponibile.
Le immagini all’interno delle slide sono dimensionate in modo da adattarsi alla larghezza del loro contenitore, assicurando un aspetto uniforme e responsivo. Posizionati ai lati dello slider, i pulsanti di navigazione (prev e next) presentano uno sfondo semitrasparente che si schiarisce al passaggio del mouse.
Inoltre, i punti di navigazione sono visualizzati in una barra sotto lo slider, con uno sfondo grigio chiaro che si illumina al passaggio del mouse o quando il punto corrispondente è attivo. Infine ho inserito transizioni e animazioni per dare un aspetto fluido e moderno al cambio delle slide e all’interazione con i pulsanti e i punti di navigazione.
Concludiamo la realizzazione del nostro Slideshow JavaScript inserendo le funzioni e la gestione degli eventi necessari. Ecco come si potrebbe sviluppare il codice:
let currentIndex = 0;
let autoSlideInterval;
let slides = document.querySelectorAll('.slide');
const prev = document.getElementById('prevSlide');
prev.addEventListener('click', prevSlide)
const next = document.getElementById('nextSlide');
next.addEventListener('click', nextSlide)
startAutoSlide(); // Avvia lo scorrimento automatico all'avvio
function showSlide(index) {
const dots = document.querySelectorAll('.dot');
if (index < 0) {
index = slides.length - 1;
} else if (index >= slides.length) {
index = 0;
}
currentIndex = index;
slides.forEach((slide, i) => {
slide.classList.toggle('active', i === index);
});
dots.forEach((dot, i) => {
dot.classList.toggle('active', i === index);
});
}
function nextSlide() {
stopAutoSlide();
showSlide(currentIndex + 1);
}
function prevSlide() {
stopAutoSlide();
showSlide(currentIndex - 1);
}
function startAutoSlide() {
autoSlideInterval = setInterval(() => {
nextSlide();
}, 3000);
}
function stopAutoSlide() {
clearInterval(autoSlideInterval);
}
// Creazione dinamica dei punti di navigazione
const dotsContainer = document.getElementById('dots-container');
for (let i = 0; i < slides.length; i++) {
const dot = document.createElement('span');
dot.classList.add('dot');
dot.addEventListener('click', () => {
showSlide(i);
stopAutoSlide();
});
dotsContainer.appendChild(dot);
}
Innanzitutto inizializziamo le variabili:
currentIndex: che serve a memorizzare l’indice della slide corrente.
autoSlideInterval: che serve a memorizzare l’ID dell’intervallo per il passaggio automatico tra le slide. Inzialmente non diamo alcun valore.
slides: rappresenta tutte le slide che contengono le immagini del documento.
prev e next: rappresentano gli elementi HTML dei pulsanti “precedente” e “successivo”.ù
Dopo gestiamo gli eventi al click sui pulsanti next e prev utilizzando addEventListeners e creiamo le funzioni nextSlide e prevSlide che richiamano la funzione showSlide.
La funzione showSlide(index) è responsabile di mostrare la slide corrispondente all’indice passato come parametro. Inoltre gestisce il loop circolare, quindi se si raggiunge l’ultima slide e si preme “successivo”, tornerà alla prima slide e viceversa. Infine aggiorna le classi active per evidenziare la slide corrente e il pallino corrispondente.
Ho creato anche le funzioni startAutoSlide e stopAutoSlide:
startAutoSlide imposta un intervallo che chiama automaticamente nextSlide ogni 3000 millisecondi (3 secondi).
stopAutoSlide cancella l’intervallo per interrompere lo scorrimento automatico.
La chiamate iniziale è alla funzione startAutoSlide per avviare lo scorrimento automatico.
Inoltre ho creato dinamicamente anche i punti di navigazione corrispondenti alle slide. Ogni pallino ha un evento click associato che chiama la funzione showSlide con l’indice corrispondente e interrompe lo scorrimento automatico.
Conclusione
Nel corso di questa lezione, abbiamo creato un slideshow utilizzando JavaScript. È importante sottolineare che quanto sviluppato rappresenta soltanto una delle molteplici soluzioni possibili. Vi incoraggo a sperimentare e creare altre varianti dello slideshow per approfondire la comprensione e ampliare le vostre competenze nel linguaggio di programmazione.
In questa lezione propongo il gioco dell’impiccato in JavaScript, uno dei passatempi più noti e accessibili a tutti. Difatti, le regole del gioco dell’impiccato sono abbastanza semplici e divertenti. Il gioco dell’impiccato è un classico passatempo che può essere giocato anche da una sola persona oppure in gruppo.
Potete innanzitutto provare a giocare alla variante del gioco dell’impiccato che vi propongo, qui sotto. Le possibilità massime di errore sono 6.
Gioco dell’Impiccato
Clicca sulle lettere per indovinare la parola!
💀
💀
💀
💀
💀
💀
Lettere dette:
Regole del gioco
Ecco come si gioca:
Obiettivo del Gioco dell’impiccato: L’obiettivo del gioco consiste nell’indovinare la parola segreta, scegliendo le lettere una alla volta. Il giocatore ha un numero limitato di tentativi prima di perdere la partita.
Regole di Base:
All’avvio, il gioco inizia con una parola segreta pensata da una persona, nel nostro caso sarà una parola scelta casualmente da un array predefinito di parole.
La lunghezza della parola è rappresentata da underscore (_). Ogni _ rappresenta una lettera che può essere una vocale oppure una consonante.
Il giocatore deve indovinare le lettere che compongono la parola, scegliendole una alla volta. Si può dare la possibilità di dire che quella lettera è già stata detta.
Ogni volta che il giocatore indovina correttamente una lettera, la lettera viene rivelata nella posizione corretta, altrimenti, viene visualizzata una parte di un personaggio “impiccato”.
Il giocatore ha un numero limitato di tentativi prima di perdere, di solito sono sei tentativi, ma si possono creare delle varianti incrementando o decrementando il numero di tentativi
Il gioco termina quando il giocatore indovina correttamente tutte le lettere della parola oppure supera il numero massimo di tentativi.
Varianti e Personalizzazioni:
La difficoltà può essere regolata selezionando parole più semplici o più complesse.
Alcune versioni del gioco includono categorie specifiche per le parole (es. animali, cibo, ecc.).
Noi apporteremo una piccola variante, facendo apparire un teschio al posto dell’impiccato per semplificarne la realizzazione. Questa variante creativa mantiene comunque la sfida e l’emozione del classico gioco. Buon divertimento nell’indovinare le parole!
Gioco dell’impiccato in JavaScript
Sviluppiamo il codice per la realizzazione del nostro gioco in JavaScript.
Codice HTML
Iniziamo dal codice HTML necessario per l’implementazione del gioco.
Dopo ho creato il container per la parola, un’altra sezione per l’elenco delle lettere già dette e una sezione dove appariranno tutte le lettere dell’alfabeto che saranno rese cliccabili per facilitare la scelta.
Infine ho inserito il pulsante per resettare la parola da indovinare.
Codice css
Realizziamo adesso il codice CSS necessario per visualizzare il gioco. Personalizzatelo come preferite.
Innanzitutto creiamo un array con delle parole da indovinare. Poi estraiamo una parola a caso generando l’indice con la funzione Math.random.
Successivamente creiamo un array di nome guessedWord che tiene traccia delle lettere indovinate della parola. Inizializziamo questo array con i caratteri di sottolineatura (_), i quali corrispondono alla lunghezza della parola scelta in maniera random.
Poniamo come limite massimo di tentativi 6 e creiamo anche un array che tiene traccia delle lettere che il giocatore ha già detto.
Inizializzamo dunque il display della parola e popoliamo l’alfabeto all’avvio del gioco.
Quindi realizziamo le funzioni:
displayWord(): Una funzione che aggiorna la visualizzazione della parola nel documento HTML, mostrando le lettere indovinate e le sottolineature per le lettere ancora non indovinate.
guessLetter(letter): La funzione principale chiamata quando il giocatore seleziona una lettera dell’alfabeto. Gestisce la logica del gioco, aggiornando le variabili in base alla correttezza della lettera.
updateHangman(): Una funzione che aggiorna la visualizzazione dei tentativi rimanenti dell’impiccato, mostrando o nascondendo i teschi in base al numero di tentativi rimanenti.
updateGuessedLetters(): Una funzione che aggiorna la visualizzazione delle lettere già dette dal giocatore.
resetGame(): Una funzione chiamata quando il giocatore vuole giocare nuovamente. Riporta il gioco allo stato iniziale, nascondendo i teschi, selezionando una nuova parola e inizializzando le variabili.
populateAlphabet(): Una funzione che popola l’alfabeto nel documento HTML, consentendo al giocatore di selezionare le lettere per indovinare la parola. Ogni lettera è un elemento cliccabile che chiama la funzione guessLetter quando cliccato.
const words = ["javascript", "html", "css", "developer", "programming", "code"];
let selectedWord = words[Math.floor(Math.random() * words.length)];
let guessedWord = Array(selectedWord.length).fill('_');
let remainingAttempts = 6;
let guessedLetters = [];
// Inizializza il display della parola all'avvio del gioco
displayWord();
// Popola l'alfabeto
populateAlphabet();
function displayWord() {
document.getElementById("word-container").innerText = guessedWord.join(" ");
}
function guessLetter(letter) {
if (guessedLetters.includes(letter)) {
alert("Hai già detto questa lettera. Prova con un'altra.");
return;
}
guessedLetters.push(letter);
if (selectedWord.includes(letter)) {
for (let i = 0; i < selectedWord.length; i++) {
if (selectedWord[i] === letter) {
guessedWord[i] = letter;
}
}
} else {
remainingAttempts--;
updateHangman();
}
displayWord();
updateGuessedLetters();
if (guessedWord.join('') === selectedWord) {
alert("Complimenti! Hai indovinato la parola!");
resetGame();
} else if (remainingAttempts === 0) {
alert("Mi dispiace, hai esaurito i tentativi. La parola era: " + selectedWord);
resetGame();
}
}
function updateHangman() {
const hangmanIndex = 6 - remainingAttempts + 1;
if (hangmanIndex >= 1 && hangmanIndex <= 6) {
const hangman = document.getElementById(`hangman-${hangmanIndex}`);
if (hangman) {
hangman.style.display = 'inline-block';
}
}
}
function updateGuessedLetters() {
document.getElementById("guessed-letters").innerText = "Lettere dette: " + guessedLetters.join(", ");
}
function resetGame() {
// Nascondi tutti i teschi
for (let i = 1; i <= 6; i++) {
document.getElementById(`hangman-${i}`).style.display = 'none';
}
selectedWord = words[Math.floor(Math.random() * words.length)];
guessedWord = Array(selectedWord.length).fill('_');
remainingAttempts = 6;
guessedLetters = [];
displayWord();
updateGuessedLetters();
populateAlphabet();
}
function populateAlphabet() {
const alphabetContainer = document.getElementById('alphabet-container');
alphabetContainer.innerHTML = '';
const rows = [];
for (let letterCode = 97; letterCode <= 122; letterCode++) {
const letter = String.fromCharCode(letterCode);
const alphabetLetter = document.createElement('div');
alphabetLetter.classList.add('alphabet-letter');
alphabetLetter.textContent = letter.toUpperCase();
alphabetLetter.addEventListener('click', () => guessLetter(letter));
const rowIndex = Math.floor((letterCode - 97) / 9);
rows[rowIndex] = rows[rowIndex] || document.createElement('div');
rows[rowIndex].classList.add('alphabet-row');
rows[rowIndex].appendChild(alphabetLetter);
}
rows.forEach(row => alphabetContainer.appendChild(row));
}
Chiaramente questa è una possibile implementazione del gioco dell’impiaccato, divertitevi a creare la vostra versione.
In questa lezione svilupperemo il gioco indovina numero in JavaScript utilizzando il DOM. Il gioco “Indovina il Numero” è un gioco interattivo in cui l’utente ha l’obiettivo di indovinare un numero segreto generato casualmente dal computer.
Il gioco da realizzare sarà dunque simile a questo:
Gioca!
Prova il gioco inserendo il numero da indovinare nella casella di input:
Indovina il Numero
Inserisci un numero compreso tra 1 e 100:
Tentativi rimanenti:
Funzionamento del gioco indovina numero
Ecco una descrizione del funzionametno del gioco:
Inizializzazione del gioco:
Al caricamento della pagina, il computer genera casualmente un numero compreso tra 1 e 100 e assegna questo numero come il "numero segreto".
Il gioco inizia con un numero fisso di tentativi (nel codice fornito, sono 5 tentativi).
Input dell'utente:
L'utente inserisce un numero nell'apposito campo di input e preme il pulsante "Conferma" per inviare il suo tentativo.
Feedback:
Il gioco fornisce un feedback all'utente basato sul suo tentativo:
Se il numero inserito è uguale al numero segreto, l'utente ha indovinato e riceve un messaggio di congratulazioni.
Se il numero è diverso, il gioco fornisce un suggerimento indicando se il numero segreto è più alto o più basso.
Viene anche aggiornato il numero di tentativi rimanenti.
Fine del gioco:
Il gioco continua finché l'utente indovina il numero segreto o esaurisce tutti i tentativi.
Se l'utente indovina, il gioco termina con un messaggio di successo.
Se l'utente esaurisce i tentativi, il gioco termina e viene mostrato il numero segreto.
Nuova Partita:
Dopo che il gioco è terminato (indipendentemente dal risultato), l'utente può iniziare una nuova partita premendo il pulsante "Nuova Partita". Questo reimposta il gioco, genera un nuovo numero segreto e riporta il numero di tentativi al valore iniziale.
L'obiettivo del gioco è indovinare il numero segreto nel minor numero possibile di tentativi. È un gioco semplice, ma può essere divertente e coinvolgente mentre gli utenti cercano di affinare le loro capacità di deduzione.
Sviluppiamo passo passo il gioco usando html, css e JavaScript ma prima guardiamo il risultato di ciò che dobbiamo creare.
<div class="container">
<h2>Indovina il Numero</h2>
<p>Inserisci un numero compreso tra 1 e 100:</p>
<input type="number" id="userGuess" min="1" max="100">
<button id="check">Conferma</button>
<p id="message"></p>
<p id="attempts">Tentativi rimanenti: <span id="remainingAttempts"></span></p>
<button id="new">Nuova Partita</button>
</div>
Nel codice HTMl ho inserito un <div class="container"> che serve come contenitore generico. Poi ho inserito una casella di input di tipo number <input type="number" id="userGuess" min="1" max="100"> che consente all'utente di inserire il numero da indovinare. Ho inserito gi attributi min e max per specificare il range consentito, in modo tale da prevenire l'inserimento di valori indesiderati.
Dopo ho inserito un <button id="check">Conferma</button>. Questo è un pulsante con l'ID "check" sarà utilizzato per confermare il numero inserito dall'utente. In un pragrafo vuoto <p id="message"></p> facciamo visualizzare un messaggio del tipo: "Troppo alto", "Troppo basso" o "Corretto" in base al numero inserito dall'utente.
Un altro paragrafo <p id="attempts">Tentativi rimanenti: <span id="remainingAttempts"></span></p> fa visualizzare i tentativi rimanenti. L'ID "remainingAttempts" sarà utilizzato per inserire dinamicamente il numero di tentativi rimanenti.
Infine ho inserito un button <button id="new">Nuova Partita</button> che sarà utilizzato per avviare una nuova partita.
Realizziamo il codice JavaScript per far funzionare il programma indovina numero:
let secretNumber;
let attempts;
const gameContainer = document.querySelector(".container");
function getRandomNumber(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
function initGame() {
secretNumber = getRandomNumber(1, 100);
attempts = 5;
updateAttemptsDisplay();
}
function checkGuess() {
const userGuessInput = document.getElementById("userGuess");
const userGuess = parseInt(userGuessInput.value);
if (isNaN(userGuess) || userGuess < 1 || userGuess > 100) {
showMessage("Inserisci un numero valido tra 1 e 100.", "red");
return;
}
attempts--;
if (userGuess === secretNumber) {
showMessage("Congratulazioni! Hai indovinato il numero!", "green");
disableInputAndButtons();
} else {
const message = userGuess < secretNumber ? "Troppo basso!" : "Troppo alto!";
showMessage(message, "red");
}
updateAttemptsDisplay();
if (attempts === 0) {
showMessage(`Hai esaurito tutti i tentativi. Il numero segreto era ${secretNumber}.`, "red");
disableInputAndButtons();
}
}
function updateAttemptsDisplay() {
document.getElementById("remainingAttempts").textContent = attempts;
}
function showMessage(message, color) {
const messageElement = document.getElementById("message");
messageElement.textContent = message;
messageElement.style.color = color;
}
function disableInputAndButtons() {
document.getElementById("userGuess").disabled = true;
document.getElementById("check").disabled = true;
document.getElementById("new").disabled = true;
}
function resetGame() {
const userGuessInput = document.getElementById("userGuess");
userGuessInput.value = "";
userGuessInput.disabled = false;
document.getElementById("check").disabled = false;
document.getElementById("new").disabled = false;
initGame();
showMessage("", "black");
}
document.getElementById("check").addEventListener("click", checkGuess);
document.getElementById("new").addEventListener("click", resetGame);
window.onload = initGame;
Spiegazione del codice
Abbiamo innanzitutto realizzato la funzione getRandomNumber seguendo anche le indicazioni di w3schools raggiungibile al link: funzione random in JavaScript.
Di seguito ecco una spiegazione della funzione getRandomNumber(min, max):
Questa funzione genera un numero casuale compreso tra i valori min e max inclusi.
Utilizza Math.random() per generare un numero casuale compreso tra 0 (incluso) e 1 (escluso), quindi moltiplica per (max - min + 1) per estendere il range.
Math.floor() arrotonda il risultato verso il basso per ottenere un numero intero.
Poi abbiamo creato la funzione initGame() che serve ad inizializzare il gioco e dunque richiamare la funzione precedentemente creata getRandomNumber(1, 100) per generare un numero segreto compreso tra 1 e 100. Sempre in questa funzione impostiamo i tentativi massimi a 5 e richiamiamo la funzione updateAttemptsDisplay() per aggiornare il display dei tentativi rimanenti.
Quindi entriamo nel cuore del programma sviluppando la funzion checkGuess() che verifica il numero inserito dall'utente. Se l'input non è un numero valido tra 1 e 100, mostra un messaggio di errore ed esce dal programma con un return. Poi recrementa il numero di tentativi. Se l'utente indovina il numero segreto, mostra un messaggio di congratulazioni e disabilita l'input ed il pulsante di conferma, altrimenti se l'utente sbaglia, mostra un messaggio "Troppo basso!" o "Troppo alto!" a seconda del tentativo. Quindi aggiorna il display dei tentativi rimanenti. Controllaimo anche se l'utente esaurisce tutti i tentativi, mostrando il numero segreto e disabilitando l'input e il pulsante di conferma.
La funzione updateAttemptsDisplay() si occupa di aggiornare il display dei tentativi rimanenti con il numero di tentativi attuali, mentre la funzione showMessage(message, color) mostra un messaggio all'utente nel div messageElement ed imposta il testo del messaggio e il colore del testo.
Poi ho sviluppato la funzione disableInputAndButton() per disabilitare l'input dell'utente e il pulsante di conferma ed infine la funzioneresetGame() che serve a ripristina il gioco per una nuova partita compiendo i seguenti passaggi:
Pulire l'input dell'utente.
Abilitare l'input dell'utente e il pulsante di conferma.
Inizializzare nuovamente il gioco chiamando initGame().
Nascondere eventuali messaggi precedenti impostando il testo a nero.
Inizializzamo il gioco al caricamento della pagina definendo le variabili globali secretNumber e attempts.
Dunque al caricamento della pagina, inizializzamo il gioco chiamando initGame().
Questa versione personalizzata del gioco dell'indovina numero in JavaScript con il DOM offre un'esperienza interattiva e coinvolgente. Una volta trovata la soluzione, il gioco fornisce un feedback immediato. Spero che questa implementazione renda il gioco divertente per chiunque lo giochi!
In this lesson we will develop a random quotes generator.
We will make sure that clicking on a button, from time to time, generates a new sentence.
Try the example below by clicking on the button:
Random Quotes Generator
Development of the random quotes generator
First let’s develop the simple HTML code needed to create the generator.
We insert a container to contain everything where inside we first insert a title, after a div where we will insert the randomly generated sentence and finally a button to generate the event on click.
Here is the HTML code:
Insert some CSS code to give some graphics to the project.
We then develop the JavaScript code.
First of all, let’s prepare the array that will contain all the phrases by choosing some quotes from famous people.
Then through the addEventListener event we call the function to generate a random element of the array upon clicking on the button.
We can simply use a function that generates a random number between 0 and the length of the array minus 1. Then we locate the sentence in the array using this number as an index.
Here is the complete code:
myQuotes = [
'A volte sono le persone che nessuno immagina che possano fare certe cose quelle che fanno cose che nessuno può immaginare.',
'La fantasia è più importante del sapere, perché il sapere è limitato.',
'Chi dice che è impossibile non dovrebbe disturbare chi ce la sta facendo.',
'C'è una forza motrice più forte del vapore, dell’elettricità e dell’energia atomica: la volontà.',
'La misura dell’intelligenza è data dalla capacità di cambiare quando è necessario.',
'La logica ti porta da A a B, l’immaginazione ti porta ovunque.',
'Gli occhi sono lo specchio dell’anima… cela i tuoi se non vuoi che ne scopra i segreti.',
'Imparerai a tue spese che nel lungo tragitto della vita incontrerai tante maschere e pochi volti.',
'Ma guardi signora è facilissimo, le insegno io ad esser pazza. Basta gridare la verità in faccia a tutti, loro non ci crederanno e ti prenderanno per pazza.'
];
const buttonQuote = document.getElementById('new-quote');
buttonQuote.addEventListener('click',generate);
function generate(){
randomQuote = randomNumber(myQuotes);
const quote = document.getElementById('quote');
quote.innerHTML = myQuotes[randomQuote];
}
function randomNumber(array) {
const num = Math.round(Math.random() * (array.length - 1));
return num;
}
Conclusions
In this lesson we have developed a simple random quotes generator, choosing some famous quotes including Pirandello, Turing and Albert Einstein.
In this article we will develop some simple JavaScript projects, such as displaying a counter that is incremented in various ways.
JavaScript projects – counter
In this first project we will build a counter using only Vanilla JavaScript.
Try clicking on the buttons below to increase or decrease the counter variable which starts from the initial value 0.
JavaScript Counter
0
How can we develop the code?
First here is the simple html code needed for our project.
We have inserted the button minus which has the function of decreasing the variable number and the button plus which instead has the function of increasing it.
To identify each element we used an id, in order to then be able to use the getElementById method in JavaScript.
We then add some simple CSS code of your choice. For example, I entered this:
And here is the JavaScript code that uses the addEventListener method to intercept the mouse click on the two plus and minus buttons.
What we will do by clicking the mouse on each button is simply to increase or decrease the value of the variable and write it in the element that has id number through the innerHTML property.
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;
}
JavaScript projects – counter with different increment values
In this second example we increment the counter with different values: 1, 5, 10 or 100.
Then click on the various buttons to see the increase of the starting variable.
JavaScript Counter
0
In this second example we used the onclick event directly on the button in the HTML code.
You can see that we passed a second parameter depending on the value we want to increase.
Here is the JavaScript code:
const number = document.getElementById('number');
let value = 0;
function add(n) {
value = value + n;
number.innerHTML = value;
}
Conclusion
In this article we have developed a simple counter. We will then continue in the next articles to develop many interesting JavaScript projects.
Commenti recenti