54 lines
4.2 KiB
Markdown
54 lines
4.2 KiB
Markdown
|
---
|
||
|
|
id: bd7157d8c242eddfaeb5bd13
|
||
|
|
title: Build a Markdown Previewer
|
||
|
|
localeTitle: Construir un previsualizador de rebajas
|
||
|
|
isRequired: true
|
||
|
|
challengeType: 3
|
||
|
|
---
|
||
|
|
|
||
|
|
## Description
|
||
|
|
<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> .
|
||
|
|
Cumplir con las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a> y obtener todas las pruebas para pasar. Dale tu propio estilo personal.
|
||
|
|
Puede usar 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 # 1:</strong> Puedo ver un elemento de área de <code>textarea</code> con un <code>id="editor"</code> .
|
||
|
|
<strong>Historia de usuario n. ° 2:</strong> puedo ver un elemento con un <code>id="preview"</code> correspondiente <code>id="preview"</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 ingreso 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 el Marcado biblioteca para esto: <a href='https://cdnjs.com/libraries/marked' target='_blank'>https://cdnjs.com/libraries/marked</a> ).
|
||
|
|
<strong>Historia de usuario # 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, un código en línea, un bloque de código, un elemento de la lista, una cita en bloque, una imagen y un texto en negrita.
|
||
|
|
<strong>Historia de usuario # 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> cuando hago clic en un enlace que aparece en mi vista previa de markdown, el enlace se abre en una nueva pestaña (SUGERENCIA: lea los documentos de Marked.js para esta).
|
||
|
|
<strong>Bonificación opcional (no es necesario que pase esta prueba):</strong> Mi previsualizador de reducción de marca interpreta los retornos de carro y los presenta como elementos <code>br</code> (salto de línea).
|
||
|
|
Puede construir su 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 cualquier 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 Proyecto de trabajo 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>
|
||
|
|
|
||
|
|
## Instructions
|
||
|
|
<section id='instructions'>
|
||
|
|
|
||
|
|
</section>
|
||
|
|
|
||
|
|
## Tests
|
||
|
|
<section id='tests'>
|
||
|
|
|
||
|
|
```yml
|
||
|
|
tests: []
|
||
|
|
|
||
|
|
```
|
||
|
|
|
||
|
|
</section>
|
||
|
|
|
||
|
|
## Challenge Seed
|
||
|
|
<section id='challengeSeed'>
|
||
|
|
|
||
|
|
</section>
|
||
|
|
|
||
|
|
## Solution
|
||
|
|
<section id='solution'>
|
||
|
|
|
||
|
|
```js
|
||
|
|
// solution required
|
||
|
|
```
|
||
|
|
</section>
|