667
edits
Changes
no edit summary
## When the user refreshes the page, or loads it after closing it, the contents of the '''/note''' file should reappear.
===Step 6: Adding FeaturesPush and Setup Gh-Pages Hosting===
# Once you have the basics working from Step 5, use <code>git add</code>, <code>git commit</code>
, and <code>git push</code> as discussed above to sync your GitHub repo with your local machine.
# Next, we'll enable [https://help.github.com/en/articles/configuring-a-publishing-source-for-github-pages#enabling-github-pages-to-publish-your-site-from-master-or-gh-pages Gh-Pages for our master branch]. This will tell GitHub to create a web server to host our content. Follow these steps:
## Click '''Settings''' in your GitHub repo's main page header
## Under the '''GitHub Pages > Source''' dropdown, choose the '''master branch''' option.
## Click '''Save'''
# Your site will get built and hosted at https://username.github.io/repo-name. Every time you push new code to your master branch, these changes will get rebuilt and hosted again. NOTE: it may take some time between when you push, and when it shows up on github.io.
===Step 7: Add Something Cool===
For the final step, add something unique, interesting, fun, cool, etc. your app. Here are some ideas, but you are free to do anything you'd like:
* Update the "save" logic so it uses keyboard shortcuts. You could use a library like [https://wangchujiang.com/hotkeys/ Hotkeys.js]. If you use this library, make sure you see the [https://github.com/jaywcjlove/hotkeys#filter note about enabling it for contenteditable].
* Add some UI, maybe a toolbar with a Save button.
* Change the fonts using something like [https://fonts.google.com/ Google Fonts]
* 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
* 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].
===Step 8: Blog about Your App===
Write a blog post about your app. Include links to the code on GitHub, as well as the live version on github.io. Explain how it works, and which extra feature(s) you added. Also discuss any new technical things you learned along the way.
==Submission==
{| class="wikitable"
|-
| Example Name
| https://github.com/example/coolnotepad-repoapp| https://example.github.io/notepad-app| https://examplestudent.wordpress.com/2019/09/05/introducing-coolnotepade/|-|||||-|||||-|||||-|||||-|||||-repo/|||||-|||||-|||||-|||||-|||||-|||||-|||||-|||||-|||||-|||||-||||
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
