Files
freeCodeCamp/curriculum/challenges/espanol/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-markdown-previewer.md
Shaun Hamilton c2a11ad00d feat: add 'back/front end' in curriculum (#42596)
* chore: rename APIs and Microservices to include "Backend" (#42515)

* fix typo

* fix typo

* undo change

* Corrected grammar mistake

Corrected a grammar mistake by removing a comma.

* change APIs and Microservices cert title

* update title

* Change APIs and Microservices certi title

* Update translations.json

* update title

* feat(curriculum): rename apis and microservices cert

* rename folder structure

* rename certificate

* rename learn Markdown

* apis-and-microservices -> back-end-development-and-apis

* update backend meta

* update i18n langs and cypress test

Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>

* fix: add development to front-end libraries (#42512)

* fix: added-the-word-Development-to-front-end-libraries

* fix/added-the-word-Development-to-front-end-libraries

* fix/added-word-development-to-front-end-libraries-in-other-related-files

* fix/added-the-word-Development-to-front-end-and-all-related-files

* fix/removed-typos-from-last-commit-in-index.md

* fix/reverted-changes-that-i-made-to-dependecies

* fix/removed xvfg

* fix/reverted changes that i made to package.json

* remove unwanted changes

* front-end-development-libraries changes

* rename backend certSlug and README

* update i18n folder names and keys

* test: add legacy path redirect tests

This uses serve.json from the client-config repo, since we currently use
that in production

* fix: create public dir before moving serve.json

* fix: add missing script

* refactor: collect redirect tests

* test: convert to cy.location for stricter tests

* rename certificate folder to 00-certificates

* change crowdin config to recognise new certificates location

* allow translations to be used

Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com>

* add forwards slashes to path redirects

* fix cypress path tests again

* plese cypress

* fix: test different challenge

Okay so I literally have no idea why this one particular challenge
fails in Cypress Firefox ONLY. Tom and I paired and spun a full build
instance and confirmed in Firefox the page loads and redirects as
expected. Changing to another bootstrap challenge passes Cypress firefox
locally. Absolutely boggled by this.

AAAAAAAAAAAAAAA

* fix: separate the test

Okay apparently the test does not work unless we separate it into
a different `it` statement.

>:( >:( >:( >:(

Co-authored-by: Sujal Gupta <55016909+heysujal@users.noreply.github.com>
Co-authored-by: Noor Fakhry <65724923+NoorFakhry@users.noreply.github.com>
Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com>
2021-08-13 21:57:13 -05:00

3.1 KiB

id, title, challengeType, forumTopicId, dashedName
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