NOTES:
1.30pm - Coding ends
2.30pm - Code Review + Votes end
Today's objective is to create your own Markdown Editor that actually saves to Express!
Markdown, as you probably already know, is a formatting language for text-based documents. This document is written in Markdown. You can see its source to get a taste for what Markdown looks like.
Some examples of Markdown Editors include:
- StackEdit (simple web-based)
- Dillinger (simple web-based)
- Typora (installed, with advanced features)
- hackmd (this is a lot more than just a simple markdown editor)
- Input area
- Compilation logic (you can use a library for this)
- Preview panel (no need to do live preview, using a submit button is fine)
Also, you should try to have a good stylesheet for the output HTML (you can use something like Bootstrap, Bulma, etc.)
You should save your form to Express such that anyone can access the data online after you've submitted it!
You get bonus points for any features other than the above that you can successfully demo.
For example:
- Live preview (where your edits in the input area automatically show up in the preview panel)
- Syntax highlighting for input area
- Selectable themes for input area
- Selectable themes for preview panel
- Print to PDF
- Locally installed (using Electron, for example)
- Responsive design
That's it!
The most interesting, useful, and cool designs will have a chance of winning -- and they must be written well, too. So, get creative :-)
Building a markdown editor is remarkably simple. You can use libraries for a lot of the functionality, and stitch them together using JavaScript logic.
Here are some suggested components for the various components above:
- Ace Editor
Well, for this one, you just output the compiled HTML to the DOM. :-)
It is completely possible to build this using jQuery.
You can use React, Vue, Angular if you wish.
- Your project must use JavaScript.
There are no other restrictions.