667
edits
Changes
→Step 5: Adding Features
# 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.