7
edits
Changes
m
switched repo and pages link
# Our note taking web app needs a way to save and load our work. To prepare you for your 0.1 Release, we'll use the [https://github.com/filerjs/filer FilerJS Browser Filesystem library].
# Add a <code>script</code> tag to the bottom of your HTML <code>body</code> that uses the following '''src''': https://unpkg.com/filer/dist/filer.min.js: <pre><script src="https://unpkg.com/filer/dist/filer.min.js"></script></pre># Below this, add a second <code>script</code> that initializes a filesystem: <codepre><script>const fs = new Filer.FileSystem();...</codepre>
# The <code>fs</code> instance can be used to call any of the filesystem operations like [https://github.com/filerjs/filer#readFile readFile()] or [https://github.com/filerjs/filer#writeFile writeFile()].
# Write some code to accomplish the following set of steps:
## When the page's DOM is finished loading (use the [https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event DOMContentLoaded event]), try to <code>fs.readFile('/note', 'utf8', function(err, data) {...})</code>. If there is an error (i.e., if <code>err</code> is non-null), use a default string like '''"Welcome to my notepad!"'''. If the file does exist (i.e. <code>data</code> is non-null), use that for your string instead.
## Use the string from the previous step to display in a <code><div></code> that you add to the page. You can give it an '''id="notepad"'''. Also make this <code><div></code> editable using the [https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content contenteditable] attribute (i.e., the user should be able to edit the text in the page).: <pre><div id="note" contenteditable></div></pre>## Use a [https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval setInterval()] call to register an interval callback that saves whatever is in the notepad div every 2-5 seconds (try different amounts of time to see what works best) to the '''/note''' file. NOTE: recall that you can use <code>document.querySelector('#note').innerHTML</code> to get/set the contents of the div.
## When the user refreshes the page, or loads it after closing it, the contents of the '''/note''' file should reappear.
* 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/ Trix] or [https://quilljs.com/ Quill] (there are dozens if you do some research).
===Step 8: Blog about Your App===
| https://examplestudent.wordpress.com/2019/09/05/introducing-notepad/
|-
|Cheng-Tuo Shueh|https://github.com/jerryshueh/simple-noter|https://jerryshueh.github.io/simple-noter/|https://osstudent.blogspot.com/2019/09/dps909-lab-2-git-practice-simple-noter.html
|-
|Josue Quilon Barrios|https://github.com/manekenpix/miniNote|https://manekenpix.github.io/miniNote/|https://whataboutopensource.blogspot.com/2019/09/mininote-your-new-web-based-note-taking.html
|-
|James Inkster|https://github.com/grommers00/my-note|https://grommers00.github.io/my-note/|https://grommers.wordpress.com/2019/09/11/the-simple-note/
|-
|Ehsan Ekbatani|https://github.com/eekbatani/micro-note|https://eekbatani.github.io/micro-note/|https://eekbatani.blogspot.com/2019/09/micro-note-my-first-steps-into-open.html
|-
|Kartik Budhiraja|https://github.com/kartik-budhiraja/Notify|https://kartik-budhiraja.github.io/Notify/|https://kartikopensource.wordpress.com/2019/09/12/notify-online-notes-taking/
|-
|Jordan Sie|https://github.com/jrdnlx/noteboard|https://jrdnlx.github.io/noteboard/|https://jrdnlxnoteboard.blogspot.com/2019/09/phase-one-of-my-noteboard-application.html
|-
|Wajeeh Sheikh |https://github.com/wajeehsheikh/Waj-Notes|https://wajeehsheikh.github.io/Waj-Notes/|https://opensourcebywajeehsheikh.blogspot.com/2019/09/my-online-notepad.html
|-
|Cindy Le|https://github.com/cindyledev/my-note|https://cindyledev.github.io/my-note/|https://cindyledev.wordpress.com/2019/09/12/lab-2-programming-with-git-and-github/
|-
|Ryan Wilson|https://github.com/RyanWils/my-note|https://ryanwils.github.io/my-note/|https://medium.com/@rwilson31/note-taker-edb92f268d7b
|-
|David Medeiros|https://github.com/drwm-base/my-note|https://drwm-base.github.io/my-note/|https://discoveropensource.blogspot.com/2019/09/my-note-my-first-step-into-open-source.html
|-
|Robert Begna|https://github.com/robertbegna/my-note|https://robertbegna.github.io/my-note/|https://robertbegnastechblog.blogspot.com/2019/09/dps909-lab2-my-note.html
|-
|Bowei Yao|https://github.com/ragnarokatz/my-note|https://ragnarokatz.github.io/my-note/|https://ragnarokatz.wordpress.com/2019/09/12/a-simple-note-taker/
|-
|Varshan Nagarajan|https://github.com/varshannagarajan/my-notepad|https://varshannagarajan.github.io/my-notepad/|https://varshannagarajan.wordpress.com/2019/09/12/learning-about-github/
|-
|Carlos Gomez|https://github.com/cagomezr/WebNote|https://cagomezr.github.io/WebNote/|https://cagomezr.wordpress.com/2019/09/12/git-github-and-source-control/
|-
|Gia Tuong Tran|https://github.com/giatuongtran9/my-note|https://giatuongtran9.github.io/my-note/|https://giatuongtran.wordpress.com/2019/09/12/osd600-lab-2-simple-note-app/
|-
|Luca Cataldo|https://github.com/lucacataldo/my-note|https://lucacataldo.github.io/my-note/|https://cataldosoft.wordpress.com/2019/09/12/creating-a-note-taking-app-with-filer-js/
|-
|Hansol Cho|https://github.com/Hansol-Cho/my-note-app|https://hansol-cho.github.io/my-note-app/|https://medium.com/@hansol.cho613/web-based-note-app-348e5f77c650?sk=2046b8cc5db6eec62fbaf75562dac1b8
|-
|Bruno Alexander Cremonese de Morais|https://github.com/brucremo/whiteboard|https://brucremo.github.io/whiteboard/|https://bacmme.blogspot.com/2019/09/whiteboard-note-what-you-want-with.html
|-
|Minuk Park|https://github.com/mpark86/my-note|https://mpark86.github.io/my-note/|https://minukpark.wordpress.com/2019/09/12/simple-note-taking-app/
|-
|Reza Rajabi|https://github.com/Reza-Rajabi/nOTeTOn|https://reza-rajabi.github.io/nOTeTOn/|https://opensourcebrowsing.blogspot.com/2019/09/a-simple-note-taking-app-noteton-if-you.html
|-
|Matthew Clifford|https://github.com/smilegodly/whiteboardapp|https://smilegodly.github.io/whiteboardapp/|https://awesomeresponsibility.wordpress.com/2019/09/19/whiteboardapp/
|-
|Timothy Morris|https://github.com/MeisterRed/micro-note|https://meisterred.github.io/micro-note/|https://medium.com/@tjmorris56/micronote-a-web-based-note-taking-app-99d90eb9ff67
|-
|Paul Luu|https://github.com/ImmutableBox/whiteboard/tree/master|https://immutablebox.github.io/whiteboard/|https://paulopensourceblog.wordpress.com/2019/09/12/simple-whiteboard-application/
|-
|Wing Tung Lau|https://aprilllllllll.github.io/OSD600/|https://github.com/aprilllllllll/OSD600|https://aprilprogrammer.blogspot.com/2019/09/web-based-notepad.html
|-
|Igor Naperkovskiy|https://github.com/cryolis/whiteboard|https://cryolis.github.io/whiteboard/|https://sentech849662565.wordpress.com/2019/09/13/first-git-project
|-
||Xin (Jack) Nian|https://github.com/nianjack/MicroNote|https://nianjack.github.io/MicroNote|https://jacknian.wordpress.com/2019/09/12/micronote-a-web-based-note-taking-app
|-
|Hayley McIldoon|https://github.com/shmooey/my-note|https://shmooey.github.io/my-note/|https://hmcildoon.wordpress.com/2019/09/13/my-note/
|-
|Jatin Arora|https://github.com/jatinAroraGit/note-down|https://jatinaroragit.github.io/note-down/|https://jatinoopensource.wordpress.com/2019/09/12/lab-2-taking-notes/
|-
|Krystyna Lopez|https://github.com/lozinska/my-note|https://lozinska.github.io/my-note/|https://klopez8.blogspot.com/2019/09/filer-open-source-project.html
|-
|Minyi Chen|https://github.com/KarlaChen/my-note|https://karlachen.github.io/my-note/|https://karlachen.blogspot.com/2019/09/simple-take-note-app.html
|-
|Anton Biriukov|https://github.com/birtony/my-note-keeper.git|https://birtony.github.io/my-note-keeper/|https://medium.com/@birtony/implementing-a-simple-web-based-note-taking-application-5f57a74caf4
|-
|Ngoc Nam Khang Nguyen|https://github.com/vitokhangnguyen/my-lightweight-noteboard|https://vitokhangnguyen.github.io/my-lightweight-noteboard/|https://khangnguyenopensource.blogspot.com/2019/09/my-lightweight-noteboard-10.html
|-
|Jacob Shuman|https://github.com/jacob-shuman/midnote|https://jacob-shuman.github.io/midnote/|https://medium.com/@jacobshuman7/midnote-99f1a231e31c
|-
|Ryan Marzec|https://github.com/RyanMarzec/micro-notes|https://ryanmarzec.github.io/micro-notes/|https://marss64.wordpress.com/2019/09/13/micro-notes-a-step-into-open-source-on-github/
|-
|Adith Syam|https://github.com/asyam1/my-note|https://asyam1.github.io/my-note/|https://adithsyam2.blogspot.com/2019/09/my-notes-web-application-for-my-first.html
|-
|Sina Lahsaee|https://github.com/ODAVING/Whiteboard|https://odaving.github.io/Whiteboard/|https://opensourceprojects19.blogspot.com/2019/09/simple-whiteboard.html
|-
|Siwen Feng|https://github.com/SiwenFeng/whiteboard|https://siwenfeng.github.io/whiteboard/|https://fengsiwen.blogspot.com/2019/09/whiteboard-app-v10.html
|
|-
|Brett Dennis|https://github.com/UltimaBGD/micro-note|https://ultimabgd.github.io/micro-note/|https://ultimaopensource.wordpress.com/2019/09/13/filer-js-testing-micro-note/
|-
|Hansal Bachkaniwala|https://github.com/hansal7014/Notes-Forever|https://hansal7014.github.io/Notes-Forever/|https://medium.com/@hansal7014/notes-forever-a-note-taking-web-app-77309b62bc82
|-
|Neil Ong|https://github.com/neilong31/foreverNote|https://neilong31.github.io/foreverNote/|https://neilong31.wordpress.com/2019/09/13/web-based-note-taker-forevernote/
|-
|Andre Rosa|https://github.com/Cadesh/whiteboard|https://cadesh.github.io/whiteboard|https://medium.com/@andrewvrosa/github-tricks-80709e9c1fc7
|-
|Julie Philip James|https://github.com/jpjjulie/my-note|https://jpjjulie.github.io/my-note/|https://juliephilipjames.wordpress.com/2019/09/13/creating-my-note-through-github/
|-
|Jayson Sherry|https://github.com/jayson528/WebNotes|https://jayson528.github.io/WebNotes/|https://mlforiphone.blogspot.com/2019/09/taking-notes-on-fly-have-you-ever.html
|-
|Yohan Choi|https://github.com/cyh0968/notepad|https://cyh0968.github.io/notepad|https://ychoi63.blogspot.com/2019/09/developing-note-taking-app-step-01.html
|-
|Jordan Hui|https://github.com/jordanhui19/whiteboard|https://jordanhui19.github.io/whiteboard/|https://jhuiosd600.blogspot.com/2019/09/the-whiteboard-note-taking-app.html
|-
|Miguel Roncancio|https://github.com/miggs125/mini-note|https://miggs125.github.io/mini-note/|https://codepen.io/miggs125/post/mini-note
|-
|Thomas Luu|https://github.com/ThomasLuu00/micro-note|https://thomasluu00.github.io/micro-note/|https://thomasopensourceblog.wordpress.com/2019/09/14/playing-with-github-and-filer/
|-
|Calvin Ho|https://github.com/c3ho/whiteboard|https://c3ho.github.io/whiteboard/|https://c3ho.blogspot.com/2019/09/whiteboard-app.html
|-
|Rafi Ungar|https://github.com/Silvyre/zennotate|https://silvyre.github.io/zennotate/|https://raungar.wordpress.com/2019/09/13/zennotate-on-first-open-source-experiences/
|-
|Haichuan He|https://github.com/haichuan0424/my-note|https://haichuan0424.github.io/my-note/|https://medium.com/@haichuan0424/my-notepad-app-1d146ff4b1f4
|-
|Nazneen Nahar|https://github.com/nazneennahar/my-note-|https://nazneennahar.github.io/my-note-/|https://inspirationalnation.wordpress.com/2019/09/14/my-note-note-taking-app/
|-
|Muqing Li|https://github.com/a8a9a16/whiteboard|https://a8a9a16.github.io/whiteboard/|https://muqingli.wordpress.com/2019/09/14/notepad-app-based-on-github-io/
|-
|Musawar Bajwa|https://github.com/MusaBajwa/micro-note|https://musabajwa.github.io/micro-note/|https://musawarbajwa.wordpress.com/2019/09/14/my-first-web-based-note-taking-app/
|-
|Daniel Beigi|https://github.com/dbeigi/whiteboard|https://dbeigi.github.io/whiteboard/|https://danwithopensource.blogspot.com/2019/09/whiteboard-application-built-with-open.html
|-
|Sefa Baah - Acheamphour|https://github.com/Sbaah/Micro-note|https://sbaah.github.io/Micro-note/|https://opensourcedps909blog.blogspot.com/2019/09/dps909-fall-2019-lab-2.html
|-
|Ana Garcia|https://github.com/agarcia-caicedo/tinyNote|https://agarcia-caicedo.github.io/tinyNote/|https://semortea.wordpress.com/2019/09/14/tinynote/
|-
|Mykola Skuybeda|https://github.com/mskuybeda/my-note|https://mskuybeda.github.io/my-note/|https://nicksopensource.wordpress.com/2019/09/14/github-tutorial/
|-
|Ilya Zhuravlev|https://github.com/izhuravlev/z-Note|https://izhuravlev.github.io/z-Note/|https://medium.com/@ilya.zhurik/meet-z-note-e6449e80c8da
|-
|Sarika Hanif|https://github.com/s-arika/my-note|https://s-arika.github.io/my-note/|https://medium.com/@shanif5/my-note-online-note-taking-app-d89b52487453
|-
|Evelyn Yeung|https://github.com/evlnyng/CornellNote|https://evlnyng.github.io/CornellNote/|https://evlnyng.tumblr.com/post/187713806753/cornell-method-notetaking-app
|-
|Zufishan Ali|https://github.com/zufishanali/my-note|https://zufishanali.github.io/my-note/|https://medium.com/@ali.zufishan/my-note-6cc78bd51f9d
|-
|Pavan Kamra|https://github.com/PavanKKamra/note-taking-app|https://pavankkamra.github.io/note-taking-app/|https://pavankamra.blogspot.com/2019/09/note-taking-application.html
|-
|Sukhbeer Dhillon|https://github.com/sukhbeersingh/notaker/|https://sukhbeersingh.github.io/notaker/|https://medium.com/@sukhbeerdhillon305/notaker-99c1c1722f77
|-
|Manan Patel|https://github.com/Manan311/My_Note|https://manan311.github.io/My_Note/|https://manan-patels-blog.blogspot.com/2019/09/notepad.html
|-
|
