Created
May 2, 2016 06:21
-
-
Save shkesar/6b68e439507f198afbf7a24d767cfc74 to your computer and use it in GitHub Desktop.
A very simple notes taking app using HTML5 local storage
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> | |
| <title>Notes</title> | |
| <link rel="stylesheet" type="text/css" href="style.css"> | |
| </head> | |
| <body> | |
| <header> | |
| <h2>Notes</h2> | |
| </header> | |
| <section id="controls"> | |
| <header> | |
| <input type="button" id="new_note" value="New Note"> | |
| <input type="button" id="delete_note" value="Delete Note"> | |
| </header> | |
| <section> | |
| <ul id="list"> | |
| </ul> | |
| </section> | |
| </section> | |
| <section id="editor"> | |
| <p>Title</p> | |
| <p id="title" contenteditable></p> | |
| <br> | |
| <p>Note</p> | |
| <p id="content" contenteditable></p> | |
| <br> | |
| <input type="button" id="save" value="Save"> | |
| </section> | |
| <script src="jquery-2.1.1.js"></script> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(function() { | |
| function defaultValue(id) { | |
| var default_title = 'Enter title here'; | |
| var default_content = 'Enter your note here'; | |
| switch(id) { | |
| case 'title': | |
| return default_title; | |
| break; | |
| case 'content': | |
| return default_content; | |
| break; | |
| default: | |
| return ''; | |
| } | |
| } | |
| function loadNotes() { | |
| for(var i in localStorage) { | |
| var elem = $('<li></li>'); | |
| elem.html(i); | |
| $('#list').append(elem); | |
| } | |
| } | |
| function addNote(title, content) { | |
| var elem = $('<li></li>'); | |
| elem.html(title); | |
| $('#list').append(elem); | |
| localStorage.setItem(title, content); | |
| } | |
| function displayNote(title) { | |
| var content = localStorage.getItem(title); | |
| $('#title').html(title); | |
| $('#content').html(content); | |
| } | |
| function clearEditor() { | |
| $('#title').html(defaultValue('title')); | |
| $('#content').html(defaultValue('content')); | |
| } | |
| function removeItemFromList(title) { | |
| $('#list li').each(function() { | |
| if($(this).html() == title) { | |
| $(this).remove(); | |
| return; | |
| } | |
| }) | |
| } | |
| // --- load notes into list | |
| loadNotes(); | |
| clearEditor(); | |
| // --- initialize event handlers | |
| // modify behaviors of page elements | |
| $('#title').add('#content').click(function() { | |
| $(this).html(''); | |
| }); | |
| $('#title, #content').focusout(function() { | |
| if($(this).html() == '') | |
| $(this).html(defaultValue($(this).attr('id'))); | |
| }); | |
| // save note | |
| $('#save').click(function() { | |
| var title = $('#title').html(); | |
| var content = $('#content').html(); | |
| addNote(title, content); | |
| }); | |
| // display note | |
| $('#list li').click(function() { | |
| var content = localStorage[$(this).html()]; | |
| $('#title').html($(this).html()); | |
| $('#content').html(content); | |
| }); | |
| // delete note | |
| $('#delete_note').click(function() { | |
| var note_title = $('#title').html(); | |
| localStorage.removeItem(note_title); | |
| clearEditor(); | |
| removeItemFromList(note_title); | |
| }) | |
| $('#new_note').click(clearEditor); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| background-color: #EEFEEF; | |
| } | |
| section { | |
| padding: 5px; | |
| } | |
| #controls { | |
| float: left; | |
| width: 25%; | |
| margin: 0px auto; | |
| } | |
| #controls header { | |
| text-align: center; | |
| } | |
| #editor { | |
| float: right; | |
| width: 70%; | |
| margin-left: 10px; | |
| margin-right: 10px; | |
| padding-left: 10px; | |
| } | |
| #title, #content { | |
| border-left: 1px solid #CCC; | |
| padding-left: 5px; | |
| } | |
| #list { | |
| list-style: none; | |
| margin-top: 10px; | |
| } | |
| #list li:hover { | |
| background-color: red; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment