667
edits
Changes
→Step 7: Add Something Cool
* Add some UI, maybe a toolbar with a Save button.
* Change the fonts using something like [https://fonts.google.com/ Google Fonts]
* Make the UI responsive, so it works well on mobile, tablets, or desktop.
* Use a CSS library to make the UI look like it's using being done with hand-drawn, paper sketch styles (e.g., [https://www.getpapercss.com/ PaperCSS])
* Use a background image instead of a pure white document
* Add some kind of Google Docs style indicator to tell the user when their changes are saved(i.e., "Saving..." vs. "All changes saved!")
* Make it possible to support multiple pages/files. For example, if the user loads '''index.html?p=note''' you load the '''/note''' file, but '''index.html?p=opensource''' would cause the app to use the '''/opensource''' file instead.
* Add the ability to download and save your notepad. You can use a library like [https://github.com/eligrey/FileSaver.js/ FileSaver.js].
* Add a word count feature. There are lots of existing JavaScript text analysis libraries you could use, or write your own.
* Instead of a plain DIV using contenteditable, switch to a rich text editor control using an open source component like [https://trix-editor.org/] or [https://quilljs.com/] (there are dozens if you do some research).
===Step 8: Blog about Your App===
