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:

Esplora l’universo infinito della programmazione con ’50 Algoritmi per imparare JavaScript’, il libro che trasformerà la tua passione per il codice in realtà digitale!

Acquistalo su Amazon

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.

>> accordion menu

form javascript >>