freeCodeCamp

3.9 KiB

Raw Blame History

id	title	isRequired	challengeType	videoUrl	localeTitle
bd7157d8c242eddfaeb5bd13	Build a Markdown Previewer	true	3		Construir un previsualizador de rebajas

Description

Objetivo: crear una aplicación CodePen.io que sea funcionalmente similar a esta: https://codepen.io/freeCodeCamp/full/GrZVVO . Cumple las siguientes historias de usuario 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! Historia de usuario n. ° 1: Puedo ver un elemento de área de textarea con un id="editor" . Historia de usuario n. ° 2: Puedo ver un elemento con un id="preview" correspondiente id="preview" . Historia de usuario # 3: Cuando ingreso texto en el elemento #editor , el elemento #preview se actualiza a medida que #preview para mostrar el contenido del área de texto. Historia de usuario n. ° 4: cuando ingrese la #editor GitHub en el elemento #editor , el texto se representa como HTML en el elemento #preview mientras #preview (SUGERENCIA: No necesita analizar Markdown usted mismo: puede importar la biblioteca marcada para esto: https://cdnjs.com/libraries/marked ). Historia de usuario n. ° 5: Cuando mi previsualizador de markdown se carga por primera vez, el texto predeterminado en el campo #editor 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. Historia de usuario n. ° 6: Cuando mi previsualizador de markdown se carga por primera vez, el markdown predeterminado en el campo #editor debe representarse como HTML en el elemento #preview . Bonificación opcional (no es necesario que pase esta prueba): mi previsualizador markdown interpreta los retornos de carro y los presenta como elementos br (salto de línea). Puedes construir tu proyecto por medio de este bolígrafo CodePen . O puede usar este enlace CDN para ejecutar las pruebas en el entorno que desee: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js Una vez que haya terminado, envíe la URL a su cuenta Proyecto con todas sus pruebas aprobadas. Recuerda usar el método de lectura-búsqueda-pregunta si te atascas.

Instructions

Tests

tests: []

Challenge Seed

Solution

// solution required

3.9 KiB Raw Blame History