Files
freeCodeCamp/curriculum/challenges/italian/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-markdown-previewer.md
Shaun Hamilton c2a11ad00d feat: add 'back/front end' in curriculum (#42596)
* chore: rename APIs and Microservices to include "Backend" (#42515)

* fix typo

* fix typo

* undo change

* Corrected grammar mistake

Corrected a grammar mistake by removing a comma.

* change APIs and Microservices cert title

* update title

* Change APIs and Microservices certi title

* Update translations.json

* update title

* feat(curriculum): rename apis and microservices cert

* rename folder structure

* rename certificate

* rename learn Markdown

* apis-and-microservices -> back-end-development-and-apis

* update backend meta

* update i18n langs and cypress test

Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>

* fix: add development to front-end libraries (#42512)

* fix: added-the-word-Development-to-front-end-libraries

* fix/added-the-word-Development-to-front-end-libraries

* fix/added-word-development-to-front-end-libraries-in-other-related-files

* fix/added-the-word-Development-to-front-end-and-all-related-files

* fix/removed-typos-from-last-commit-in-index.md

* fix/reverted-changes-that-i-made-to-dependecies

* fix/removed xvfg

* fix/reverted changes that i made to package.json

* remove unwanted changes

* front-end-development-libraries changes

* rename backend certSlug and README

* update i18n folder names and keys

* test: add legacy path redirect tests

This uses serve.json from the client-config repo, since we currently use
that in production

* fix: create public dir before moving serve.json

* fix: add missing script

* refactor: collect redirect tests

* test: convert to cy.location for stricter tests

* rename certificate folder to 00-certificates

* change crowdin config to recognise new certificates location

* allow translations to be used

Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com>

* add forwards slashes to path redirects

* fix cypress path tests again

* plese cypress

* fix: test different challenge

Okay so I literally have no idea why this one particular challenge
fails in Cypress Firefox ONLY. Tom and I paired and spun a full build
instance and confirmed in Firefox the page loads and redirects as
expected. Changing to another bootstrap challenge passes Cypress firefox
locally. Absolutely boggled by this.

AAAAAAAAAAAAAAA

* fix: separate the test

Okay apparently the test does not work unless we separate it into
a different `it` statement.

>:( >:( >:( >:(

Co-authored-by: Sujal Gupta <55016909+heysujal@users.noreply.github.com>
Co-authored-by: Noor Fakhry <65724923+NoorFakhry@users.noreply.github.com>
Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com>
2021-08-13 21:57:13 -05:00

3.0 KiB

id, title, challengeType, forumTopicId, dashedName
id title challengeType forumTopicId dashedName
bd7157d8c242eddfaeb5bd13 Costruisci un visualizzatore di anteprima per il Markdown 3 301372 build-a-markdown-previewer

--description--

Obiettivo: Costruisci un'app CodePen.io funzionalmente simile a questa: https://codepen.io/freeCodeCamp/full/GrZVVO.

Compila le user stories qui sotto e fai passare tutti i test. Dalle 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).

User Story #5: Quando il mio visualizzatore di markdown viene caricato inizialmente, il testo predefinito nel campo #editor dovrebbe contenere 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 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--

// solution required