--- id: bd7157d8c242eddfaeb5bd13 title: Costruisci un visualizzatore di anteprima per il Markdown challengeType: 3 forumTopicId: 301372 dashedName: build-a-markdown-previewer --- # --description-- **Obiettivo:** Costruisci un'app [CodePen.io](https://codepen.io) funzionalmente simile a questa: . 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 `textarea` con un corrispondente `id="editor"`. **User Story #2:** Posso vedere un elemento con un corrispondente `id="preview"`. **User Story #3:** Quando inserisco del testo nell'elemento `#editor`, l'elemento `#preview` viene aggiornato mentre scrivo per visualizzare il contenuto della textarea. **User Story #4:** Quando inserisco markdown in stile GitHub nell'elemento `#editor`, il testo viene presentato come HTML nell'elemento `#preview` mentre digito (SUGGERIMENTO: Non è necessario che analizzi tu stesso il Markdown - puoi importare la libreria Marked per questo: [https://cdnjs. om/libraries/marked](https://cdnjs.com/libraries/marked)). **User Story #5:** Quando il mio visualizzatore di markdown viene caricato inizialmente, il testo predefinito nel campo `#editor` dovrebbe contenere del markdown valido che rappresenti almeno uno dei seguenti elementi: un'intestazione (dimensione H1), una sotto-intestazione (formato H2), un collegamento, del codice in linea, un blocco di codice, un elemento di lista, un blockquote, un'immagine e un testo in grassetto. **User Story #6:** Quando il mio visualizzatore di markdown viene caricato inizialmente, il markdown predefinito nel campo `#editor` dovrebbe essere presentato come HTML nell'elemento `#preview`. **Bonus opzionale (non è necessario superare questo test):** Il mio visualizzatore di markdown interpreta i ritorni a capo e li presenta come elementi `br` (interruzione di riga). Puoi costruire il tuo progetto usando questo modello CodePen 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 passati. # --solutions-- ```js // solution required ```