3.1 KiB
| id | title | challengeType | forumTopicId | dashedName |
|---|---|---|---|---|
| bd7157d8c242eddfaeb5bd13 | Crea un previsualizador de Markdown | 3 | 301372 | build-a-markdown-previewer |
--description--
Objetivo: Construye una aplicación en CodePen.io que funcionalmente sea similar a esta: https://codepen.io/freeCodeCamp/full/GrZVVO.
Completa las siguientes historias de usuario y consigue que se aprueben todas las pruebas. Dale tu estilo personal.
Puede utilizar cualquier mezcla de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, y jQuery para completar este proyecto. Debe 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 a las indicadas anteriormente, su uso corre bajo tu propio riesgo. Estamos buscando dar soporte a otros frameworks de frontend como Angular y Vue, pero actualmente no están soportados. Aceptaremos e intentaremos arreglar todos los informes de incidencias que utilicen la pila de tecnología sugerida para este proyecto. ¡Feliz codificación!
User Story #1: Debe ver un elemento textarea con el correspondiente id="editor".
User Story #2: Debe ver un elemento con el correspondiente id="preview".
User Story #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 con sabor a 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 biblioteca marcada https://cdnjs.com/libraries/marked).
Historia de usuario #5: Cuando mi previsualizador de markdown se carga, el texto por defecto en el campo #editor debe contener un markdown 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 de bloques(blockquote), una imagen y texto en negrita.
User Story #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 las devoluciones de carro y las renderiza como elementos br (salto de línea).
Puedes construir tu proyecto con usando esta plantilla CodePen y haciendo clic en Save para crear tu propio entorno. O puedes usar este enlace CDN(Red de distribución de contenidos) para ejecutar las pruebas en cualquier entorno de tu preferencia: 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 aprobadas.
--solutions--
// solution required