markdown
🖥️

Markdown Previewer

Built with

html5
css
sass

Overview

I took FreeCodeCamp Front End Development Libraries Projects to improve my front end skills. With this project I wanted to improve my React skills and gain experience using a frontend framework. With the styling I kept it simple with CSS.

Goals

For this project I decided to make the Markdown Previewer mirror tumblr. You can generate a new blog item by writing with markdown.

Lessons Learned

In this project I started to test my understanding of React.

markdown-mobile
Fig.1 - Mobile View of App

Process

I followed the freecodecamp user story:

  • User Story #1: I can see a textarea element with a corresponding id="editor".
  • User Story #2: I can see an element with a corresponding id="preview".
  • User Story #3: When I enter text into the #editor element, the #preview element is updated as I type to display the content of the textarea.
  • User Story #4: When I enter GitHub flavored markdown into the #editor element, the text is rendered as HTML in the #preview element as I type (HINT: You don't need to parse Markdown yourself - you can import the Marked library for this: https://cdnjs.com/libraries/marked).
  • User Story #5: When my markdown previewer first loads, the default text in the #editor field should contain valid markdown that represents at least one of each of the following elements: a header (H1 size), a sub header (H2 size), a link, inline code, a code block, a list item, a blockquote, an image, and bolded text.
  • User Story #6: When my markdown previewer first loads, the default markdown in the #editor field should be rendered as HTML in the #preview element.
markdown-tablet
Fig.2 - Tablet View of App