40 lines
3.0 KiB
Markdown
40 lines
3.0 KiB
Markdown
---
|
|
id: bd7157d8c242eddfaeb5bd13
|
|
title: Crea un previsualizador de Markdown
|
|
challengeType: 3
|
|
forumTopicId: 301372
|
|
dashedName: build-a-markdown-previewer
|
|
---
|
|
|
|
# --description--
|
|
|
|
**Objetivo:** Crear una aplicación que sea funcionalmente similar a <https://codepen.io/freeCodeCamp/full/GrZVVO>.
|
|
|
|
Completa las historias de usuario a continuación y obtén todas las pruebas para aprobar. Utiliza cualquier librería o API que necesites. Dale tu propio estilo.
|
|
|
|
Puedes utilizar cualquier combinación de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux y jQuery para completar este proyecto. Debes usar un framework frontend (como React por ejemplo), ya que esta sección trata sobre el aprendizaje de frameworks frontend. No se recomienda utilizar tecnologías adicionales que no estén enlistadas, su utilización corre bajo tu propio riesgo. Estamos buscando apoyar otros frameworks de frontend como Angular y Vue, pero actualmente no están soportados. Aceptaremos e intentaremos arreglar todos los informes de problemas que utilicen el stack de tecnologías sugeridas para este proyecto. ¡Feliz día programando!
|
|
|
|
**Historia de usuario #1:** Debo ver un elemento `textarea` con el correspondiente `id="editor"`.
|
|
|
|
**Historia de usuario #2:** Debo ver un elemento con el correspondiente `id="preview"`.
|
|
|
|
**Historia de usuario #3** Cuando introduzco texto dentro del elemento `#editor`, el elemento `#preview` se actualiza mientras escribo, para mostrar el contenido del textarea.
|
|
|
|
**Historia de usuario #4:** Cuando introduzco markdown tipo GitHub en el elemento `#editor`, el texto es renderizado como HTML en el elemento `#preview` mientras escribo (PISTA: No necesitas analizar markdown tú mismo: puedes importar la librería "Marked" <https://cdnjs.com/libraries/marked>).
|
|
|
|
**Historia de usuario #5:** Cuando la primera vez que mi previsualizador de lenguaje de marcado se carga, el texto por defecto en el campo `#editor` debe contener un lenguaje de marcado válido que represente al menos uno de los siguientes elementos: un encabezado (tamaño H1), un subencabezado (tamaño H2), un enlace, código en línea, un bloque de código, un elemento de lista, una cita en bloque, una imagen y texto en negrita.
|
|
|
|
**Historia de usuario #6:** Cuando mi previsualizador de markdown se carga, el markdown predeterminado en el campo `#editor` debe ser renderizado como HTML en el elemento `#preview`.
|
|
|
|
**Bonus opcional (No necesitas hacer esto para pasar esta prueba):** Mi previsualizador de markdown interpreta los retornos de carro y las renderiza como elementos `br` (salto de línea).
|
|
|
|
Puedes construir tu proyecto con <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando esta plantilla CodePen</a> y haciendo clic en `Save` para crear tu propio pen. O puedes utilizar este enlace CDN para ejecutar las pruebas en cualquier entorno que desees: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
|
|
|
Una vez que hayas terminado, envía la URL de tu proyecto funcional con todas las pruebas pasadas.
|
|
|
|
# --solutions--
|
|
|
|
```js
|
|
// solution required
|
|
```
|