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.» (Alan Turing)',
    '«La fantasia è più importante del sapere, perché il sapere è limitato.» (Albert Einstein)',
    '«Chi dice che è impossibile non dovrebbe disturbare chi ce la sta facendo.» (Albert Einstein)',
    '«C’è una forza motrice più forte del vapore, dell’elettricità e dell’energia atomica: la volontà.» (Albert Einstein)',
    '«La misura dell’intelligenza è data dalla capacità di cambiare quando è necessario.» (Albert Einstein)',
    '«La logica ti porta da A a B, l’immaginazione ti porta ovunque.» (Albert Einstein)',
    '«Gli occhi sono lo specchio dell’anima… cela i tuoi se non vuoi che ne scopra i segreti.» (Luigi Pirandello)',
    '«Imparerai a tue spese che nel lungo tragitto della vita incontrerai tante maschere e pochi volti.» (Luigi Pirandello)',
    '«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.» (Luigi Pirandello)',
    '«Coloro che sognano di giorno sanno molte cose che sfuggono a chi sogna soltanto di notte.» (Edgar Allan Poe)',
    '«È curioso a vedere che quasi tutti gli uomini che valgono molto, hanno le maniere semplici; e che quasi sempre le maniere semplici sono prese per indizio di poco valore.» (Giacomo Leopardi)'
];

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