{
    "componentChunkName": "component---src-templates-challenges-projects-frontend-show-tsx",
    "path": "/learn/front-end-development-libraries/front-end-development-libraries-projects/build-a-markdown-previewer",
    "result": {"data":{"challengeNode":{"challenge":{"forumTopicId":301372,"title":"Build a Markdown Previewer","description":"<section id=\"description\">\n<p><strong>Objective:</strong> Build a CodePen app.</p>\n<p>Fulfill the below user stories and get all the tests to pass. Give it your own personal style.</p>\n<p>You can use HTML, JavaScript, and CSS to complete this project. Plain CSS is recommended because that is what the lessons have covered so far and you should get some practice with plain CSS. You can use Bootstrap or SASS if you choose. Additional technologies (just for example jQuery, React, Angular, or Vue) are not recommended for this project, and using them is at your own risk. Other projects will give you a chance to work with different technology stacks like React. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding!</p>\n<p><strong>User Story #1:</strong> I can see a <code>textarea</code> element with a corresponding <code>id=\"editor\"</code>.</p>\n<p><strong>User Story #2:</strong> I can see an element with a corresponding <code>id=\"preview\"</code>.</p>\n<p><strong>User Story #3:</strong> When I enter text into the <code>#editor</code> element, the <code>#preview</code> element is updated as I type to display the content of the textarea.</p>\n<p><strong>User Story #4:</strong> When I enter GitHub flavored markdown into the <code>#editor</code> element, the text is rendered as HTML in the <code>#preview</code> element as I type (HINT: You don't need to parse Markdown yourself - you can import the Marked library for this: <code>https://cdnjs.com/libraries/marked</code>).</p>\n<p><strong>User Story #5:</strong> When my markdown previewer first loads, the default text in the <code>#editor</code> field should contain valid markdown that represents at least one of each of the following elements: a heading element (H1 size), a sub heading element (H2 size), a link, inline code, a code block, a list item, a blockquote, an image, and bolded text.</p>\n<p><strong>User Story #6:</strong> When my markdown previewer first loads, the default markdown in the <code>#editor</code> field should be rendered as HTML in the <code>#preview</code> element.</p>\n<p><strong>Optional Bonus (you do not need to make this test pass):</strong> My markdown previewer interprets carriage returns and renders them as <code>br</code> (line break) elements.</p>\n<p>Once you're done, submit the URL to your working project with all its tests passing.</p>\n</section>","instructions":null,"challengeType":3,"helpCategory":"JavaScript","superBlock":"front-end-development-libraries","certification":"front-end-development-libraries","block":"front-end-development-libraries-projects","translationPending":false,"fields":{"blockName":"Front End Development Libraries Projects","slug":"/learn/front-end-development-libraries/front-end-development-libraries-projects/build-a-markdown-previewer"}}}},"pageContext":{"challengeMeta":{"certification":"front-end-development-libraries","superBlock":"front-end-development-libraries","block":"front-end-development-libraries-projects","template":"","required":[],"nextChallengePath":"/learn/front-end-development-libraries/front-end-development-libraries-projects/build-a-drum-machine","prevChallengePath":"/learn/front-end-development-libraries/front-end-development-libraries-projects/build-a-random-quote-machine","id":"bd7157d8c242eddfaeb5bd13"},"projectPreview":{"showProjectPreview":false,"challengeData":{"challengeType":3,"challengeFiles":[]}},"slug":"/learn/front-end-development-libraries/front-end-development-libraries-projects/build-a-markdown-previewer"}},
    "staticQueryHashes": ["3216307819","3851966407"]}