freeCodeCamp/curriculum/challenges/portuguese/03-front-end-libraries/front-end-libraries-projects/build-a-markdown-previewer.md

---
id: bd7157d8c242eddfaeb5bd13
title: Construa um Pré-Visualizador de Marcação
challengeType: 3
forumTopicId: 301372
dashedName: build-a-markdown-previewer
---

# --description--

**Objetivo:** Construir um app [CodePen.io](https://codepen.io) que seja funcionalmente semelhante a: <https://codepen.io/freeCodeCamp/full/GrZVVO>.

Atenda às [especificações de usuário](https://en.wikipedia.org/wiki/User_story) abaixo para passar em todos os testes. Dê à página o seu próprio estilo pessoal.

Você pode usar qualquer mistura de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e JQuery para completar este projeto. Você deve usar um framework frontend (como React por exemplo) porque essa seção trata de aprender frameworks fronted. Tecnologias adicionais não listadas acima não são recomendadas e usá-las é por sua conta e risco. Estamos olhando para apoiar outros frameworks frontend como Angular e Vue, mas eles não são atualmente suportados. Vamos aceitar e tentar corrigir todos os relatórios de problemas que usem o conjunto de tecnologias sugeridas para esse projeto. Boa programação!

**User Story #1:** Eu consigo ver um elemento `textarea` com o id correspondente `id="editor"`.

**User Story #2:** Eu consigo ver um elemento com o id correspondente `id="preview"`.

**User Story #3:** Quando eu insiro texto no elemento `#editor`, o elemento `#preview` é atualizado enquanto eu escrevo para exibir o conteúdo do textarea.

**User Story #4:** Quando insiro marcação do GitHub no elemento `#editor`, o texto é renderizado como HTML no elemento `#preview` enquanto eu escrevo (DICA: Você não precisa analisar a marcação você mesmo - você pode importar a biblioteca Marked para isso: <https://cdnjs.com/libraries/marked>).

**User Story #5:** Quando meu pré-visualizador de marcação carregar pela primeira vez, o texto padrão no campo `#editor` deve conter uma marcação válida que representa pelo menos um de cada um dos elementos a seguir: um header (tamanho H1), um sub header (tamanho H2), um link, um código em linha, um código de bloco, uma lista de item, um blockquote, uma imagem, e um texto em negrito.

**User Story #6:** Quando meu pré-visualizador de marcação carregar pela primeira vez, a marcação padrão no campo `#editor` deve ser renderizado como HTML no elemento `#preview`.

**Bônus opcional (você não precisa fazer esse teste passar):** Meu pré-visualizador de marcação interpreta retorno de carro e os renderiza como elementos `br` (quebra de linha).

Você pode construir seu projeto com <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando este template CodePen</a> e clicando `Save` para criar seu próprio pen. Ou você pode usar esse link CDN para rodar os testes em qualquer ambiente que você goste:`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`

Quando você terminar, envie a URL para o seu projeto em trabalho com todos os testes passando.

# --solutions--

```js
// solution required
```