Memoria del colore in JavaScript

Memoria del colore in JavaScript

In questa lezione ci divertiremo nella realizzazione del gioco della memoria del colore in JavaScript.

Il gioco “Memory Color Game” è un gioco in cui il giocatore deve ricordare una sequenza di colori sempre più lunga man mano che il gioco avanza.

Provate ad indovinare quanti più colori, cliccate sul pulsante start ed iniziate a giocare:

Memory Color Game

Memory Color Game

Clicca sul pulsante start per far iniziare il gioco, dopo memorizza i colori che appaiono nel riquadro sotto e cerca di indovinarne la sequenza

Livello: 1

Regole del gioco “memoria del colore in JavaScript”

Innanzitutto spieghiamo il funzionamento del gioco:

  1. Inizio del gioco: Quando il giocatore preme il pulsante “Start”, il gioco inizia e viene mostrato un colore per un breve periodo di tempo.
  2. Memorizzazione della sequenza: Il colore mostrato è parte di una sequenza di colori generata casualmente dal computer. Il giocatore deve memorizzare la sequenza di colori che viene presentata.
  3. Ripetizione della sequenza: Dopo che la sequenza di colori è stata mostrata, il giocatore deve ripetere la sequenza cliccando sui colori nella stessa sequenza in cui sono stati presentati.
  4. Aumento della difficoltà: Ogni volta che il giocatore ripete correttamente la sequenza, il livello del gioco aumenta di uno e la sequenza diventa più lunga, aggiungendo un nuovo colore.
  5. Fine del gioco: Se il giocatore sbaglia a ripetere la sequenza, il gioco termina e viene visualizzato un messaggio con il punteggio finale, indicando quanti livelli sono stati completati con successo.

Il gioco si basa duqnue sull’abilità del giocatore di memorizzare e ripetere la sequenza di colori in modo accurato. Con l’aumentare dei livelli, la sfida diventa sempre più difficile poiché la sequenza diventa più lunga.

Dedichiamoci adesso allo sviluppo del gioco.

Codice HTML del gioco “memoria del colore in JavaScript”

Creiamo la struttura HTML di base per la realizzazione del gioco. Creiamo un div contenitore che racchiude l’intero gioco con all’interno un altro div con id game-container che contiene tutti gli elementi del gioco, come il titolo, il pulsante di avvio, il livello corrente, il display del colore, il messaggio e le opzioni di colore.

Aggiungiamo il pulsante start che consentirà di avvire il gioco e l’evento sarà catturato grazie all’indentificazione del pulsante attraverso l’id.

Nella sezione color-display mostriamo la sequenza di colori ovvero i colori che il giocatore deve cercare di memorizzare. Infine ho creato un div color-options che contiene le opzioni di colore che il giocatore può selezionare durante il gioco per indovinare la sequenza di colori precedentemente mostrata.

Ecco dunque il codice HTML per la creazione del gioco memoria del colore in JavaScript:

<div id="gioco">
    <div id="game-container">
        <h2 id="titolo-gioco">Memory Color Game</h2>
        <p class="desc-gioco"> Clicca sul pulsante start per far iniziare il gioco!</p>
        <button id="start-button">Start</button>
        <p id="level">Livello: 1</p>
        <div id="color-display" class="color-box"></div>
        <div id="message"></div>
        <div id="color-options"></div>
    </div>
</div>

Codice CSS del gioco “memoria del colore in JavaScript”

Adesso creeremo il codice CSS necessario per lo sviluppo del gioco, che potete personalizzare secondo le vostre preferenze.

div#gioco {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    background-color: #2c3e50;
    color: #ecf0f1;
}

#game-container {
    text-align: center;
}

#titolo-gioco {
    color: white;
    font-size: 36px;
    padding: 10px 0;
}

#start-button {
    background-color: #3498db;
    color: #ecf0f1;
    padding: 10px 20px;
    font-size: 18px;
    border: none;
    cursor: pointer;
    margin-bottom: 20px;
 }

.color-box {
    width: 100px;
    height: 100px;
    margin: 10px;
    cursor: pointer;
    display: inline-block;
    opacity: 0.9;
    transition: opacity 0.5s;
    border-radius: 8px;
 }

.color-box:hover {
    opacity: 1;
 }

#color-display {
    background-color: #3498db;
}

#color-options {
    margin-top: 20px;
 }

#message {
   font-size: 20px;
   margin-top: 10px;
 }

p.desc-gioco {
    font-size: 16px;
    padding: 10px 30px;
 }

Codice JavaScript del gioco “memoria del colore in JavaScript”

Infine creiamo il codice JavaScript per far funzionare il tutto. Innanzitutto dichiriamo quattro variabili: colors, sequence, userSequence e level. Dove:

  • colors contiene un array di colori utilizzati nel gioco.
  • sequence tiene traccia della sequenza di colori generata casualmente dal computer.
  • userSequence memorizza la sequenza di colori selezionati dall’utente.
  • level tiene traccia del livello attuale del gioco.

Poi creiamo le funzioni necessarie:

  • Funzione generateRandomColor(): genera un colore casuale dall’array colors.
  • Funzione showColorSequence(): genera e mostra la sequenza di colori che il giocatore deve memorizzare. Viene utilizzato setTimeout per mostrare ogni colore per un breve periodo di tempo. Quando la sequenza viene completata, vengono mostrate le opzioni di colore.
  • Funzione hideColorOptions(): rimuove le opzioni di colore dalla visualizzazione.
  • Funzione showColorOptions(): mostra le opzioni di colore che il giocatore può selezionare. Viene creato un elemento div per ogni colore nell’array colors e viene aggiunto un event listener per gestire il click sull’opzione di colore.
  • Funzione handleColorClick(selectedColor): gestisce il click sull’opzione di colore selezionata dall’utente. Aggiunge il colore alla sequenza dell’utente e verifica se la sequenza è stata completata correttamente.
  • Funzione arraysEqual(arr1, arr2): verifica se due array sono uguali confrontando le loro rappresentazioni JSON.
  • Funzioni endGame(), showMessage(), hideMessage() e resetGame(): Queste funzioni gestiscono rispettivamente la fine del gioco, la visualizzazione e la nascita del messaggio, il nascondere il messaggio e il ripristino del gioco al livello iniziale.
  • Event listener per il click sul pulsante “Start”: Quando il pulsante “Start” viene cliccato, viene avviata una nuova partita resettando il gioco e mostrando la sequenza di colori.
const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
    let sequence = [];
    let userSequence = [];
    let level = 1;

    function generateRandomColor() {
        const randomIndex = Math.floor(Math.random() * colors.length);
        return colors[randomIndex];
    }

    function showColorSequence() {
        sequence = [];
        hideColorOptions();
        hideMessage(); // Nascondi il messaggio "Gioco terminato!"

        for (let i = 0; i < level; i++) {
            const color = generateRandomColor();
            sequence.push(color);

            setTimeout(() => {
                const colorDisplay = document.getElementById('color-display');
                colorDisplay.style.backgroundColor = color;

                setTimeout(() => {
                    colorDisplay.style.backgroundColor = '#3498db';
                    if (i === level - 1) {
                        setTimeout(() => {
                            showColorOptions();
                        }, 500);
                    }
                }, 1000);
            }, i * 1500);
        }
    }

    function hideColorOptions() {
        const colorOptionsContainer = document.getElementById('color-options');
        colorOptionsContainer.innerHTML = '';
    }

    function showColorOptions() {
        const colorOptionsContainer = document.getElementById('color-options');
        colorOptionsContainer.innerHTML = '';

        for (let i = 0; i < colors.length; i++) {
            const colorBox = document.createElement('div');
            colorBox.classList.add('color-box');
            colorBox.style.backgroundColor = colors[i];

            colorBox.addEventListener('click', function () {
                handleColorClick(colors[i]);
            });

            colorOptionsContainer.appendChild(colorBox);
        }
    }

    function handleColorClick(selectedColor) {
        userSequence.push(selectedColor);

        if (userSequence.length === sequence.length) {
            if (arraysEqual(userSequence, sequence)) {
                level++;
                document.getElementById('level').textContent = `Livello: ${level}`;
                userSequence = [];
                setTimeout(() => {
                    showColorSequence();
                }, 1000);
            } else {
                endGame();
            }
        }
    }

    function arraysEqual(arr1, arr2) {
        return JSON.stringify(arr1) === JSON.stringify(arr2);
    }

    function endGame() {
        const message = document.getElementById('message');
        message.textContent = `Gioco terminato! Punteggio finale: ${level - 1}`;
        showMessage(); // Mostra il messaggio "Gioco terminato!"
        resetGame();
    }

    function showMessage() {
        const message = document.getElementById('message');
        message.style.display = 'block';
    }

    function hideMessage() {
        const message = document.getElementById('message');
        message.style.display = 'none';
    }

    function resetGame() {
        level = 1;
        userSequence = [];
        document.getElementById('level').textContent = 'Livello: 1';
    }

    document.getElementById('start-button').addEventListener('click', function () {
        resetGame();
        showColorSequence();
    });

Conclusione

In questa lezione abbiamo sviluppato una semplice versione del gioco della memoria del colore in JavaScript, sperimentate creando la vostra versione.

Alcuni link utili

Tutorial JavaScript

Come utilizzare JavaScript alert

Utilizzare JavaScript prompt

Variabili in JavaScript

Gioco indovina numero in JavaScript

Gioco della morra cinese in JavaScript

Semplice quiz utilizzando gli array

Accordion Menu

In questa lezione realizzeremo un Accordion Menu in JavaScript. Un Accordion Menu è un componente interattivo che consente di organizzare e presentare informazioni in modo chiaro e ordinato, con la possibilità di espandere o contrarre sezioni specifiche.

Durante questa lezione, esploreremo passo dopo passo come strutturare il nostro menu nell’HTML, applicare stili accattivanti con il CSS e implementare la logica interattiva con il JavaScript. Impareremo come gestire gli eventi di clic, aprire e chiudere sezioni in modo dinamico e migliorare l’esperienza utente con transizioni fluide e icone dinamiche.

Se siete pronti a scoprire il mondo degli Accordion Menu e ad arricchire le vostre competenze di sviluppo web, iniziamo questa emozionante avventura insieme!

Innanzitutto ecco il risultato di ciò che vogliamo ottenere. Cliccate dunque sulle varie sezioni per vedere aprire e chiudere i relativi menù:

HTML

HTML, acronimo di “HyperText Markup Language” (Linguaggio di Marcatura per l’IperTesto), è il linguaggio di markup standard utilizzato per la creazione e la strutturazione delle pagine web. Creato da Tim Berners-Lee, HTML fornisce un insieme di regole che definiscono la struttura logica di una pagina web, identificando e delimitando i vari elementi che la compongono.

CSS

CSS, acronimo di “Cascading Style Sheets” (Fogli di Stile in Cascata), è un linguaggio di stile utilizzato per definire l’aspetto e la formattazione di documenti HTML. La sua principale funzione è separare la struttura di una pagina web dal suo design, consentendo agli sviluppatori di applicare stili coerenti e personalizzati.

JavaScript

JavaScript è un linguaggio di programmazione ad alto livello, interpretato e orientato agli oggetti. Originariamente sviluppato per aggiungere interattività alle pagine web, JavaScript è ora utilizzato in una vasta gamma di contesti, inclusi sviluppo web, sviluppo di app lato client, server-side e persino per lo sviluppo di app mobili.

Codice HTML per l’Accordion Menu

Dapprima sviluppiamo la struttura HTML necessaria per il nostro menù. Ci sarà un container principale dove tutti gli elementi del menu saranno inclusi all’interno di questo div. Ogni div con la classe accordion-item rappresenta una sezione dell’Accordion Menu. Ogni sezione è composta da un’intestazione (header) e un contenuto. L’intestazione della sezione contiene il titolo della categoria (ad esempio, “HTML” o “CSS”) e un’icona di freccia (la classe .arrow), che ruoterà quando la sezione è aperta. Il contenuto della sezione contiene informazioni dettagliate sulla categoria specifica (ad esempio, una descrizione di HTML, CSS o JavaScript).

In questo modo abbiamo progettato un menù per espandersi e contrarsi quando si clicca sull’intestazione di ciascuna sezione, mostrando o nascondendo il contenuto corrispondente.

Ecco di seguito il codice HTML:

<div class="accordion">
    <div class="accordion-item">
      <div class="accordion-item-header">
        HTML
        <div class="arrow"></div>
      </div>
      <div class="accordion-item-content">
        <p>HTML, acronimo di "HyperText Markup Language" (Linguaggio di Marcatura per l'IperTesto), è il linguaggio di markup standard utilizzato per la creazione e la strutturazione delle pagine web. Creato da Tim Berners-Lee, HTML fornisce un insieme di regole che definiscono la struttura logica di una pagina web, identificando e delimitando i vari elementi che la compongono.</p>
      </div>
    </div>
    <div class="accordion-item">
      <div class="accordion-item-header">
        CSS
        <div class="arrow"></div>
      </div>
      <div class="accordion-item-content">
        <p>CSS, acronimo di "Cascading Style Sheets" (Fogli di Stile in Cascata), è un linguaggio di stile utilizzato per definire l'aspetto e la formattazione di documenti HTML. La sua principale funzione è separare la struttura di una pagina web dal suo design, consentendo agli sviluppatori di applicare stili coerenti e personalizzati.</p>
      </div>
    </div>
    <div class="accordion-item">
      <div class="accordion-item-header">
        JavaScript
        <div class="arrow"></div>
      </div>
      <div class="accordion-item-content">
        <p>JavaScript è un linguaggio di programmazione ad alto livello, interpretato e orientato agli oggetti. Originariamente sviluppato per aggiungere interattività alle pagine web, JavaScript è ora utilizzato in una vasta gamma di contesti, inclusi sviluppo web, sviluppo di app lato client, server-side e persino per lo sviluppo di app mobili.</p>
      </div>
    </div>
    <!-- Aggiungi altre sezioni se necessario -->
  </div>

Codice CSS per l’Accordion Menu

Impostiamo del codice CSS a piacere per la realizzazione dell’accordion menù.

.accordion {
    display: flex;
    flex-direction: column;
    width: 600px;
    margin: 20px auto;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
}

/* Stile per ogni elemento del menu */
.accordion-item {
   border-bottom: 1px solid #ddd;
   overflow: hidden;
   transition: background-color 0.3s;
}

 /* Stile per l'intestazione del menu (il titolo cliccabile) */
.accordion-item-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 15px;
   cursor: pointer;
   background-color: #3498db;
   color: #fff;
   font-weight: bold;
}

/* Stile per il contenuto del menu (il testo nascosto) */
.accordion-item-content {
   background-color: white;
   display: none;
   padding: 15px;
}

/* Stile per la freccia */
.arrow {
   width: 0;
   height: 0;
   border-left: 6px solid transparent;
   border-right: 6px solid transparent;
   border-top: 6px solid #fff;
   transition: transform 0.3s;
 }

/* Stile per la freccia quando la sezione è aperta */
.active .arrow {
   transform: rotate(180deg);
}

/* Hover effect */
.accordion-item:hover {
  background-color: #2980b9;
}

.accordion-item:hover .accordion-item-header {
  background-color: #2980b9;
}

.accordion-item:hover .arrow {
   border-top-color: #3498db;
}

Codice JavaScript

Crea il blocco di codice JavaScript che è responsabile della gestione interattiva del tuo Accordion Menu. Selezioniamo tutti gli accordion-item utilizzando il metodo querySelectorAll con la classe .accordion-item. Creiamo dunque una NodeList di elementi che rappresentano le sezioni dell’Accordion Menu. Iteriamo su ciascun elemento del menu e aggiungiamo un event listener per il clic.

Per ogni elemento del menu diverso da quello cliccato (item) e che ha la classe ‘active’:

  • Rimuove la classe ‘active’ per nascondere visivamente la sezione.
  • Nasconde il contenuto della sezione impostando display: 'none'.
  • Toglie o aggiunge la classe ‘active’ all’elemento del menu cliccato, cambiando il suo aspetto visivo.
  • Toglie o mostra il contenuto della sezione in base al suo stato corrente (display).

Ecco dunque il codice JavaScript necessario per realizzare il nostor Accordion Menu:

const accordionItems = document.querySelectorAll('.accordion-item');

accordionItems.forEach(function (item) {
    item.addEventListener('click', function () {
      // Chiudi tutti gli altri elementi del menu
      accordionItems.forEach(function (accordionItem) {
        if (accordionItem !== item && accordionItem.classList.contains('active')) {
          accordionItem.classList.remove('active');
          const content = accordionItem.querySelector('.accordion-item-content');
          content.style.display = 'none';
        }
      });

      // Toggle della classe "active" sull'elemento .accordion-item
      item.classList.toggle('active');

      // Toggle della visualizzazione del contenuto
      const content = item.querySelector('.accordion-item-content');
      content.style.display = (content.style.display === 'block') ? 'none' : 'block';
    });
  });

Conclusione

In questa lezione abbiamo sviluppato una semplice Accordion Menu in JavaScript, provate anche voi a svilupparne uno e scrivete nei commenti sotto. Nelle prossime lezioni svilupperemo ancora tanti altri progetti creativi.

Alcuni link utili

Indice tutorial JavaScript

Il linguaggio JavaScript

Come utilizzare JavaScript alert

Variabili in JavaScript

Gioco indovina numero in JavaScript

Gioco della morra cinese in JavaScript

Semplice quiz utilizzando gli array

Come realizzare il gioco dei dadi online

Tabs in JavaScript

Tabs in JavaScript

In questa entusiasmante lezione, ci immergiamo nel mondo dello sviluppo web per creare dinamiche e funzionali tabs utilizzando JavaScript! 🚀 Esploreremo insieme come rendere la navigazione tra diverse sezioni del tuo sito web più interattiva e intuitiva. Preparati a imparare e a implementare tabs che offriranno agli utenti un’esperienza di navigazione fluida e coinvolgente!

Prova l’esempio qui sotto, cliccando sulle tabs corrispondenti:

HTML

HTML, acronimo di “HyperText Markup Language” (Linguaggio di Marcatura per l’IperTesto), è il linguaggio di markup standard utilizzato per la creazione e la strutturazione delle pagine web. Creato da Tim Berners-Lee, HTML fornisce un insieme di regole che definiscono la struttura logica di una pagina web, identificando e delimitando i vari elementi che la compongono.

CSS

CSS, acronimo di “Cascading Style Sheets” (Fogli di Stile in Cascata), è un linguaggio di stile utilizzato per definire l’aspetto e la formattazione di documenti HTML. La sua principale funzione è separare la struttura di una pagina web dal suo design, consentendo agli sviluppatori di applicare stili coerenti e personalizzati.

JavaScript

JavaScript è un linguaggio di programmazione ad alto livello, interpretato e orientato agli oggetti. Originariamente sviluppato per aggiungere interattività alle pagine web, JavaScript è ora utilizzato in una vasta gamma di contesti, inclusi sviluppo web, sviluppo di app lato client, server-side e persino per lo sviluppo di app mobili.

HTML
CSS
JavaScript

Codice HTML per creare le tabs in JavaScript

Passiamo adesso all’implementazione del codice partendo dall’HTML necessario per realizzare l’applicazione. Abbiamo creato una struttura di base con un contenitore principale che racchiude sia il contenuto delle tabs (tab-content) che i pulsanti delle tabs (tab-button). Le sezioni tab-content contengono il contenuto specifico per ciascuna tab, ognuno di essi ha un id univoco e viene visualizzato o nascosto in base alla tab selezionata. I tab-button fungono da pulsanti per selezionare le tabs. Ogni pulsante è associato a una tab specifica attraverso la funzione showTab('tabID') in cui 'tabID' è l’ID della tab da mostrare.

<div class="tabs-container">
    <div id="tab1" class="tab-content active-tab">
        <h2>Contenuto Tab 1</h2>
        <p>Testo del Tab 1.</p>
    </div>

    <div id="tab2" class="tab-content">
        <h2>Contenuto Tab 2</h2>
        <p>Testo del Tab 2.</p>
    </div>

    <div id="tab3" class="tab-content">
        <h2>Contenuto Tab 3</h2>
        <p>Testo del Tab 3.</p>
    </div>

    <div class="button-container">
        <div class="tab-button" onclick="showTab('tab1')">Tab 1</div>
        <div class="tab-button" onclick="showTab('tab2')">Tab 2</div>
        <div class="tab-button" onclick="showTab('tab3')">Tab 3</div>
   </div>
</div>

Codice CSS per la realizzazione delle tabs in JavaScript

Impostiamo del codice CSS a piacere per la realizzazione delle tabs.

.tabs-container {
    max-width: 600px;
    margin: 20px auto;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 }

 .tab-content {
    display: none;
    padding: 20px;
}

.active-tab {
    display: block;
}

.button-container {
    display: flex;
 }

 .tab-button {
     cursor: pointer;
     padding: 15px;
     background-color: #3498db;
     color: #fff;
     text-align: center;
     width: 33.33%;
     transition: background-color 0.3s;
 }

.tab-button:hover {
     background-color: #2980b9;
 }

Codice JavaScript per le tabs

Creiamo una funzione JavaScript, showTab(tabId) che gestisce il cambiamento dinamico dei contenuti delle schede in una galleria di tabs. La funzione accetta un parametro tabId, che rappresenta l’identificatore della tab che si desidera visualizzare. Utilizzando poi document.getElementsByClassName('tab-content'), la funzione trova tutti gli elementi con la classe 'tab-content' (che rappresentano i contenuti delle schede) e rimuove la classe 'active-tab' per nascondere tutti i contenuti delle schede. Successivamente, la funzione trova l’elemento della scheda selezionata utilizzando l’id passato come parametro. Quindi, aggiunge la classe 'active-tab' a questo elemento, mostrando così il relativo contenuto.

In sostanza, questa funzione consente di passare dinamicamente tra le schede della galleria, nascondendo tutte le altre e mostrando solo il contenuto della tab selezionata. La classe .active-tab viene applicata alla prima scheda (tab1 nell’esempio HTML sopra), rendendola visibile. In questo modo, all’avvio della pagina, il contenuto della prima scheda sarà quello visualizzato, mentre gli altri saranno nascosti.

Ecco di seguito il codice JavaScript:

function showTab(tabId) {
      // Nascondi tutti i contenuti delle schede
      const tabContents = document.getElementsByClassName('tab-content');
      for (const content of tabContents) {
          content.classList.remove('active-tab');
       }

    // Mostra il contenuto della scheda selezionata
    const selectedTab = document.getElementById(tabId);
    selectedTab.classList.add('active-tab');
 }

Conclusione

In questa lezione abbiamo sviluppato una semplice to do list in JavaScript, provate anche voi a svilupparne una e scrivete nei commenti sotto. Nelle prossime lezioni svilupperemo tanti altri progetti creativi.

Alcuni link utili

Indice tutorial JavaScript

Il linguaggio JavaScript

Come utilizzare JavaScript alert

Variabili in JavaScript

Gioco indovina numero in JavaScript

Gioco della morra cinese in JavaScript

Semplice quiz utilizzando gli array

Come realizzare il gioco dei dadi online

Galleria di immagini con filtri

Galleria di immagini con filtri

Divertiamoci a realizzare una semplice galleria di immagini con filtri in JavaScript.

In questo esercizio, saremo in grado di selezionare una categoria specifica, e la galleria mostrerà solo le immagini corrispondenti a quella categoria. Questa funzionalità introduce interattività nella galleria, permettendo agli utenti di esplorare agevolmente diverse categorie di immagini. Inoltre, il codice HTML, CSS e JavaScript fornito si occupa del layout della galleria e dell’interattività dei filtri, offrendo in modo intuitivo la possibilità di organizzare e visualizzare varie tipologie di immagini.

Provate quindi a selezionare le categorie nella gallery sotto per provare l’esempio prima di realizzarlo!

Codice HTML per la galleria di immagini con filtri

Creiamo adesso il codice necessario per creare la struttura HTML di base.

Innanzitutto realizziamo il menu di filtraggio sopra la galleria. Per fare ciò utilizzeremo tre link che corrispondo alle tre categorie che vogliamo creare: “Tutte”, “Web” e “Fotografia”.

Ogni link ha un attributo href="#" per evitare che la pagina si sposti quando viene cliccato (l’# indica un link vuoto).

La funzione filterImages(category) viene chiamata al verificarsi dell’evento onclick con il parametro corrispondente alla categoria selezionata.

Infine inseriamo il blocco che contiene le immagini dove ad ogni classe assegniamo la classe fiori oppure animali a seconda che si tratti di fiori o animali. La classe assegnata sarà utile per applicare il filtro.

Ecco di seguito il codice html che ho realizzato:

<div class="container-gallery">
    <h2>Galleria di Immagini</h2>
    <div id="section" class="gallery-menu">
      <a href="#section" onclick="filterImages('all')">Tutte</a>
      <a href="#section" onclick="filterImages('fiori')">Fiori</a>
      <a href="#section" onclick="filterImages('animali')">Animali</a>
    </div>
  
    <div class="gallery">
      <img class="image fiori" src="..." alt="Immagine Fiori 1">
      <img class="image animali" src="..." alt="Immagine Animali 1">
      <img class="image animali" src="..." alt="Immagine Animali 2">
      <img class="image fiori" src="..." alt="Immagine Fiori 2">
      <img class="image fiori" src="..." alt="Immagine Fiori 3">  
      <img class="image animali" src="..." alt="Immagine Animali3">      
    </div>
  </div>

Codice CSS per la galleria di immagini con filtri

In questa sezione, vi presento una possibile formattazione della galleria di immagini, utilizzando i CSS. Personalizzate lo stile a vostro piacimento secondo le vostre necessità e gusti.

.container-gallery {
    max-width: 800px;
    margin: 20px auto;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
  }

h2 {
    text-align: center;
    color: #4CAF50; 
    margin: 20px 0;
  }

.gallery-menu {
    text-align: center;
    padding: 10px;
    background-color: #4CAF50; /* Green */
  }

.gallery-menu a {
    text-decoration: none;
    color: #fff;
    padding: 10px 20px;
    margin: 0 10px;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease;
  }

.gallery-menu a:hover {
    background-color: #45a049; 
  }

.gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 20px;
  }

.image {
    max-width: 50%;
    width: 220px;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  }

Codice JavaScript per la galleria di immagini con filtri

Infine inseriamo il codice JavaScript necessario per far funzionare il tutto.

Innanzitutto ascoltiamo l’evento DOMContentLoaded, che si ha quando il documento HTML è stato completamente caricato e analizzato dal browser. Dunque, quando la pagina è pronta viene chiamata la funzione filterImages('all'), che inizialmente mostra tutte le immagini senza filtro.

Dunque realizziamo la funzione filterImages che accetta come argomento la categoria. Questa funzione utilizza poi document.querySelectorAll('.image') per ottenere tutte le immagini con la classe ‘image’.

Dopo itera su ciascuna immagine usando il metodo forEach e verifica se l’immagine appartiene alla categoria specificata. Se la categoria è ‘all’ o se l’immagine ha la classe corrispondente alla categoria, imposta lo stile display su ‘block’, rendendo l’immagine visibile. Altrimenti, imposta lo stile display su ‘none’, nascondendo l’immagine.

In pratica, questa funzione controlla la visibilità delle immagini in base alla categoria selezionata.

Ecco di seguito una possibile implementazione:

document.addEventListener('DOMContentLoaded', function () {
      filterImages('all');
    });
  
    function filterImages(category) {
      const images = document.querySelectorAll('.image2');
  
      images.forEach(image => {
        if (category === 'all' || image.classList.contains(category)) {
          image.style.display = 'block';
        } else {
          image.style.display = 'none';
        }
      });
    }

Conclusione

Abbiamo appena creato una galleria di immagini con filtri in JavaScript. In conclusione, abbiamo reso più facile per gli utenti esplorare diverse categorie di immagini, migliorando l’interattività della galleria. Continuate a seguire gli articoli per altri interessanti esempi nell’ambito della programmazione in JavaScript.

Alcuni link utili

Tutorial JavaScript

Come utilizzare JavaScript alert

Utilizzare JavaScript prompt

Variabili in JavaScript

Gioco indovina numero in JavaScript

Gioco della morra cinese in JavaScript

Semplice quiz utilizzando gli array

Stringhe in JavaScript

Stringhe in JavaScript

Le stringhe in JavaScript, che sono sequenze di caratteri Unicode, svolgono un ruolo essenziale nella rappresentazione di testi di vario genere. È possibile definire una stringa in diversi modi, utilizzando singoli apici (‘ ‘), doppi apici (” “), oppure i backticks (``).

Esempi di Stringhe in JavaScript

Ecco alcuni semplici esempi di stringhe:

let stringaConSingoliApici = 'Coding Creativo';
let stringaConDoppiApici = "Coding Creativo";
let stringaConBackticks = `Coding Creativo`;

Caratteri Unicode

I caratteri Unicode rappresentano uno standard di codifica dei caratteri che cerca di coprire la maggior parte dei simboli di scrittura utilizzati in tutto il mondo. Gli Unicode sono assegnati a simboli, lettere, cifre e caratteri speciali, consentendo una rappresentazione più ampia e inclusiva di testi di diverse lingue e culture.

I primi 128 caratteri Unicode corrispondono ai primi 128 caratteri ASCII, il che significa che sono compatibili con il set di caratteri ASCII. Tuttavia, mentre ASCII utilizza solo 7 bit per rappresentare i caratteri, Unicode può utilizzare fino a 21 bit, consentendo la rappresentazione di un numero molto più elevato di caratteri.

Concatenare le stringhe in JavaScript

Per unire diverse stringhe, il primo metodo che propongo è l’utilizzo dell’operatore di concatenazione +. Questo operatore consente di combinare stringhe in modo semplice e diretto, offrendo un approccio immediato per la creazione di stringhe concatenate.

Ecco dunque un esempio di come possiamo concatenare le stringhe tra loro:

let primaStringa = 'Coding ';
let secondaStringa = 'creativo!';
let risultatoConcatenazione = primaStringa + secondaStringa;

In alternativa, possiamo adoperare il metodo concat(), il quale viene utilizzato specificando tra parentesi la stringa da concatenare alla prima. Questa opzione offre un approccio alternativo e leggibile per unire stringhe, consentendo di specificare chiaramente quale stringa si desidera aggiungere a quella esistente.

Come nell’esempio sotto:

let risultatoConcatenazione = primaStringa.concat(secondaStringa)

Inoltre è possibile utilizzare i template literal con i backticks (“) per concatenare più stringhe in JavaScript.

Vediamo dunque un esempio di utilizzo:

let stringa1 = "Coding ";
let stringa2 = "creativo";
let risultato = `${stringa1}${stringa2}`;
console.log(risultato);

Utilizzando i template literal è dunque possibile incorporare testo, variabili ed espressioni all’interno di una stringa in modo molto più flessibile rispetto agli altri metodi di concatenazione. Nel contesto di un template literal in JavaScript, le variabili vengono inserite all’interno delle parentesi graffe ${}. Questo approccio consente di incorporare dinamicamente il valore delle variabili all’interno di una stringa, rendendo il codice più flessibile e leggibile.

Ecco quindi un esempio che incorpora testo e variabili in una stringa:

let nome = "Cristina";
let saluto = `Ciao, ${nome}! Benvenuta.`;

console.log(saluto);

Accedere ai caratteri di una stringa in JavaScript

È possibile accedere ai singoli caratteri di una stringa mediante l’utilizzo della notazione delle parentesi quadre ([]). È importante tenere presente che gli indici iniziano da zero. Pertanto, grazie a questa notazione, è possibile recuperare o manipolare i singoli caratteri all’interno di una stringa in modo preciso e ordinato.

Ecco dunque un esempio:

let miaStringa = 'Coding Creativo!';
let primoCarattere = miaStringa[0]; // 'C'
let terzoCarattere = miaStringa[2]; // 'd'

Metodi con le stringhe in JavaScript

JavaScript inoltre fornisce anche molti metodi e proprietà incorporate per manipolare le stringhe. Tra questi troviamo length per ottenere la lunghezza di una stringa e altri metodi come toUpperCase(), toLowerCase(), slice(), indexOf(), replace(), e molte altre opzioni che facilitano la manipolazione avanzata delle stringhe.

Ecco dunque alcuni esempi:

let lunghezzaStringa = miaStringa.length; // 16
let stringaMaiuscola = miaStringa.toUpperCase(); // 'CODING CREATIVO!'
let sottostringa = miaStringa.slice(0, 6); // 'Coding'
let indiceLettera = miaStringa.indexOf('i'); // 3
let nuovaStringa = miaStringa.replace('!', '.'); // 'Coding Creativo.'

Conclusione

In questa lezione abbiamo parlato delle stringhe in JavaScript, nelle prossime lezioni esploreremo altri esercici sulle stringhe e affronteremo argomenti più avanzati, come gli array e gli oggetti, per comprendere come JavaScript gestisce i dati in modo più complesso.

Alcuni link utili

Indice tutorial JavaScript

Istruzione condizionale if else

Esercizi sulle istruzioni condizionali

Come utilizzare il console log in JavaScript

Generatore di frasi random

Generatore di frasi random

In questa lezione svilupperemo un generatore di frasi random.

Faremo in modo che cliccando su un pulsante, di volta in volta, si generi una nuova frase.

Provate l’esempio sotto, cliccando sul pulsante:

Generatore di frasi random

Sviluppo del generatore di frasi random

Innanzitutto sviluppiamo il semplice codice HTML necessario per creare il generatore.

Inseriamo un container per contentere tutto dove all’interno inseriamo dapprima un titolo, dopo un div dove inseriremo la frase generata random ed infine un button per generare l’evento al click.

Ecco di seguito il codice HTML:



<div class="container">
    <h3>Generatore di frasi random</h3>
    <div id="quote"></div>
    <button id="new-quote" class="new-quote">
     Genera una nuova frase
    </button>
</div>

Inserite del codice CSS a piacere per dare un pò di grafica al progetto.

Sviluppiamo poi il codice JavaScript.

Innanzitutto prepariamo l’array che conterrà tutte le frasi scegliendo alcune citazioni di personaggi famosi.

Poi attraverso l’evento addEventListener richiamiamo la funzione per generare un elemento random dell’array al click sul button. Possiamo utilizzare semplicemente una funzione che genera un numero random tra 0 e la lunghezza dell’array meno 1. Dopo individuiamo la frase nell’array utilizzando questo numero come indice.

Ecco di seguito il codice completo:



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

Conclusione

In questa lezione abbiamo sviluppato un semplice generatore di frasi random, scegliendo alcune citazioni famose tra cui Pirandello, Turing ed Albert Einstein.

Alcuni link utili

Indice tutorial JavaScript

Il linguaggio JavaScript

Come utilizzare JavaScript alert

Variabili in JavaScript

Gioco indovina numero in JavaScript

Gioco della morra cinese in JavaScript

Semplice quiz utilizzando gli array

Come realizzare il gioco dei dadi online