freeCodeCamp/curriculum/challenges/italian/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-random-quote-machine.md

---
id: bd7158d8c442eddfaeb5bd13
title: Costruisci una Macchina per le citazioni casuali
challengeType: 3
forumTopicId: 301374
dashedName: build-a-random-quote-machine
---

# --description--

**Obiettivo:** Costruisci un'app [CodePen.io](https://codepen.io) funzionalmente simile a questa: <https://codepen.io/freeCodeCamp/full/qRZeGZ>.

Soddisfa le seguenti [user story](https://en.wikipedia.org/wiki/User_story) e fai passare tutti i test. Usa il tuo stile personale.

Puoi utilizzare qualsiasi mix di HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e jQuery per completare questo progetto. Dovresti usare un framework frontend (come React per esempio) perché questa sezione riguarda l'apprendimento dei framework per il frontend. Ulteriori tecnologie non elencate sopra non sono raccomandate e usarle è a tuo rischio. Stiamo cercando di supportare altri framework per il frontend come Angular e Vue, ma attualmente non sono supportati. Accetteremo e cercheremo di risolvere tutte le segnalazioni di problemi che utilizzano lo stack tecnologico suggerito per questo progetto. Happy coding!

**User Story #1:** Posso vedere un elemento wrapper con un corrispondente `id="quote-box"`.

**User Story #2:** Dentro a `#quote-box` posso vedere un elemento con un corrispondente `id="text"`.

**User Story #3:** Dentro a `#quote-box` posso vedere un elemento con un corrispondente `id="author"`.

**User Story #4:** Dentro a `#quote-box`, posso vedere un elemento cliccabile con un corrispondente `id="new-quote"`.

**User Story #5:** Dentro a `#quote-box`, posso vedere un elemento cliccabile `a` con un corrispondente `id="tweet-quote"`.

**User Story #6:** Al caricamento iniziale, la mia macchina per le citazioni visualizza una citazione casuale nell'elemento con `id="text"`.

**User Story #7:** Al caricamento iniziale, la mia macchina per le citazioni visualizza l'autore della citazione casuale nell'elemento con `id="author"`.

**User Story #8:** Quando si clicca sul pulsante `#new-quote`, la mia macchina per le citazioni dovrebbe andare a prendere una nuova citazione e visualizzarla nell'elemento `#text`.

**User Story #9:** La mia macchina per le citazioni dovrebbe andare a prendere l'autore della nuova citazione quando viene cliccato il pulsante `#new-quote` e visualizzarlo nell'elemento `#author`.

**User Story #10:** Posso twittare la citazione corrente cliccando sull'elemento `a` `#tweet-quote`. Questo elemento `a` dovrebbe includere il percorso `"twitter.com/intent/tweet"` nel suo attributo `href` per twittare la citazione corrente.

**User Story #11:** L'elemento contenitore `#quote-box` dovrebbe essere centrato orizzontalmente. Ti preghiamo di eseguire i test con un livello di zoom del browser al 100% e la pagina massimizzata.

Puoi costruire il tuo progetto <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando questo modello CodePen</a> e facendo clic su `Save` per creare il tuo pen. Oppure puoi usare questo link CDN per eseguire i test in qualsiasi ambiente tu voglia: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`

Una volta fatto, invia l'URL del tuo progetto di lavoro con tutti i suoi test superati.

**Nota:** Twitter non consente di caricare i link in un iframe. Prova a usare l'attributo `target="_blank"` o `target="_top"` nell'elemento `#tweet-quote` se il tuo tweet non viene caricato. `target="_top"` sostituirà la scheda corrente quindi assicurati che il tuo lavoro sia stato salvato.

# --solutions--

```js
// solution required
```