Markdown Preview

Input some markdown source on the left and see it rendered on the right.

Wireframes

 Markdown Preview!

 Source                        Preview
 _____________                 _____________
| # Hello     |  [>Render>]   | Hello       |
|             |               |             |
|_____________|               |_____________|

Tech

Setup

  • Clone the repo: (do this once)

    git clone git@github.com:BurlingtonCodeAcademy/markdown_preview.git
    
  • Install dependencies: (do this once)

    cd markdown_preview
    npm install -y
    
  • Launch the app locally:

    npm start
    
    • you can now visit http://localhost:8080/ to see your app running on your own computer!
    • (in this project, npm start launches a static file server so everything under the project directory is now a live website running on your own machine!)
  • Launch the Cypress Runner window:

    • open a different terminal window and cd to your project dir
    • run npx cypress open

  • Run the Cypress tests:

    • in the Cypress Runner window, click the "Run All Tests" button, or click on a single test to run it alone

Backlog (required user stories)

We have provided Cypress tests that run through the first few features. Please make sure to keep running the tests, to ensure later changes don't break earlier features.

Page Elements

Given a running app

Then the following elements should exist on the page:

  • headline: an H1 element containing the text Markdown Preview
  • source: a textarea element with the id source
  • preview: a div element with the id preview
  • render: a button element with the id render

Render Text

Given the user has entered text in the source text field

When the user clicks render button

Then the text is copied into the preview area

Render Markdown

Given the user has entered markdown format text in the source text field

When the user clicks render button

Then the text is rendered as styled HTML into the preview area

Hint: You can use the marked library to convert markdown source into styled HTML. You can load it like this: <script src='node_modules/marked/lib/marked.js'> since we added marked.js to the repository already. Alternately, you can use a CDN -- check the Usage section of Marked's GitHub repo for instructions.

Automatically Render Markdown

Given the user types into the source text field

And one second has elapsed since the user's last keypress

Then the render button should activate automatically

And the text is rendered as styled HTML into the preview area

Pretty Page

Make the app look pretty.

Pretty Preview

Make the formatted text in the preview area look pretty.

Maybe make different elements different colors, or improve margins and padding, or whatever you like.

Refactoring

This isn't a user story, but an invitation for you to clean your code and experiment with new techniques.

Ideas:

  • if you used <button onclick=...> or element.onclick=... you may want to try using element.addEventListener('click', ...) instead -- here's an example
  • if you used an inline <script> you may want to try using an external <script src=...> instead

More Information