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

39 lines
3.9 KiB
Markdown
Raw Normal View History

2018-10-08 17:34:43 +00:00
---
id: bd7157d8c242eddfaeb5bd13
title: Build a Markdown Previewer
isRequired: true
challengeType: 3
2018-10-10 20:20:40 +00:00
videoUrl: ''
localeTitle: Construir un previsualizador de rebajas
2018-10-08 17:34:43 +00:00
---
## Description
2018-10-10 20:20:40 +00:00
<section id="description"> <strong>Objetivo:</strong> crear una aplicación <a href="https://codepen.io" target="_blank">CodePen.io</a> que sea funcionalmente similar a esta: <a href="https://codepen.io/freeCodeCamp/full/GrZVVO" target="_blank">https://codepen.io/freeCodeCamp/full/GrZVVO</a> . Cumple las siguientes <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">historias de usuario</a> y haz que pasen todas las pruebas. Dale tu propio estilo personal. Puede completar cualquier combinación de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux y jQuery para completar este proyecto. Debería usar un marco frontend (como React, por ejemplo) porque esta sección trata sobre el aprendizaje de marcos frontend. No se recomiendan las tecnologías adicionales no enumeradas anteriormente y su uso es bajo su propio riesgo. Estamos considerando la compatibilidad con otros marcos de frontend, como Angular y Vue, pero actualmente no se admiten. Aceptaremos e intentaremos solucionar todos los informes de problemas que utilizan la pila de tecnología sugerida para este proyecto. ¡Feliz codificación! <strong>Historia de usuario n. ° 1:</strong> Puedo ver un elemento de área de <code>textarea</code> con un <code>id=&quot;editor&quot;</code> . <strong>Historia de usuario n. ° 2:</strong> Puedo ver un elemento con un <code>id=&quot;preview&quot;</code> correspondiente <code>id=&quot;preview&quot;</code> . <strong>Historia de usuario # 3:</strong> Cuando ingreso texto en el elemento <code>#editor</code> , el elemento <code>#preview</code> se actualiza a medida que <code>#preview</code> para mostrar el contenido del área de texto. <strong>Historia de usuario n. ° 4:</strong> cuando ingrese la <code>#editor</code> GitHub en el elemento <code>#editor</code> , el texto se representa como HTML en el elemento <code>#preview</code> mientras <code>#preview</code> (SUGERENCIA: No necesita analizar Markdown usted mismo: puede importar la biblioteca marcada para esto: <a href="https://cdnjs.com/libraries/marked" target="_blank">https://cdnjs.com/libraries/marked</a> ). <strong>Historia de usuario n. ° 5:</strong> Cuando mi previsualizador de markdown se carga por primera vez, el texto predeterminado en el campo <code>#editor</code> debe contener un markdown válido que represente al menos uno de cada uno de los siguientes elementos: un encabezado (tamaño H1), un encabezado secundario (tamaño H2) , un enlace, código en línea, un bloque de código, un elemento de la lista, una nota de bloque, una imagen y texto en negrita. <strong>Historia de usuario n. ° 6:</strong> Cuando mi previsualizador de markdown se carga por primera vez, el markdown predeterminado en el campo <code>#editor</code> debe representarse como HTML en el elemento <code>#preview</code> . <strong>Bonificación opcional (no es necesario que pase esta prueba):</strong> mi previsualizador markdown interpreta los retornos de carro y los presenta como elementos <code>br</code> (salto de línea). Puedes construir tu proyecto por medio de <a href="http://codepen.io/freeCodeCamp/pen/MJjpwO" target="_blank">este bolígrafo CodePen</a> . O puede usar este enlace CDN para ejecutar las pruebas en el entorno que desee: <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code> Una vez que haya terminado, envíe la URL a su cuenta Proyecto con todas sus pruebas aprobadas. Recuerda usar el método de <a href="https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">lectura-búsqueda-pregunta</a> si te atascas. </section>
2018-10-08 17:34:43 +00:00
## Instructions
2018-10-10 20:20:40 +00:00
<section id="instructions">
2018-10-08 17:34:43 +00:00
</section>
## Tests
<section id='tests'>
```yml
tests: []
```
</section>
## Challenge Seed
<section id='challengeSeed'>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>