Created
January 29, 2015 17:33
-
-
Save tonyedwardspz/879d5ecff0efd466e79f to your computer and use it in GitHub Desktop.
Offline ToDo list web app tutorial - Part 1
This file contains 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" /> | |
| <title>Offline todo app</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> | |
| <link rel='stylesheet' href="style.css" type='text/css' media='all' /> | |
| </head> | |
| <body> | |
| <header> | |
| <h1>ToDo</h1> | |
| </header> | |
| <main> | |
| <p>Add things to do below</p> | |
| <form> | |
| <label for="inputItem" id="inputLabel"></label> | |
| <input id="inputItem"> | |
| <button id="addItem">Submit</button> | |
| </form> | |
| <ul id="theList"></ul> | |
| </main> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |
This file contains 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
| // get the app items | |
| var theList = document.getElementById('theList'), | |
| form = document.querySelector('form'), | |
| input = form.querySelector('input'), | |
| cache = {}; | |
| // on submit | |
| form.addEventListener('submit', function(ev){ | |
| "use strict"; | |
| ev.preventDefault(); | |
| // add item to the list | |
| var value = input.value; | |
| if (!cache[value] && !(value == "")) { | |
| // cache the users input | |
| cache[value] = true; | |
| theList.innerHTML += '<li>' + value + '</li>'; | |
| //store using localstorage | |
| localStorage.myToDo = theList.innerHTML; | |
| } | |
| }); | |
| theList.addEventListener('click', function(ev){ | |
| "use strict"; | |
| var t = ev.target; | |
| if (!t.classList.contains('done')) { | |
| t.classList.add('done'); | |
| } else { | |
| t.parentNode.removeChild(t); | |
| } | |
| localStorage.myToDo = theList.innerHTML; | |
| }); | |
| //load local storage on first load | |
| if (localStorage.myToDo !== undefined) { | |
| theList.innerHTML = localStorage.myToDo; | |
| } |
This file contains 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
| *{ | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| h1, main, footer{ | |
| margin: 0 10px; | |
| } | |
| html, | |
| button{ | |
| font-family:'Verdana',Arial,sans-serif; | |
| font-size:16px; | |
| } | |
| header{ | |
| height: 38px; | |
| border-bottom: 2px solid #ccc; | |
| margin-bottom: 10px; | |
| } | |
| p{ | |
| padding: 10px 0; | |
| } | |
| ul{ | |
| margin: 20px 0; | |
| list-style: none; | |
| } | |
| li{ | |
| padding: 5px; | |
| margin: 3px 0; | |
| border-bottom: 2px solid #7cceee; | |
| } | |
| li.done{ | |
| background: #eee; | |
| transition: 0.3s ease-in; | |
| border-right: 30px solid #7cceee; | |
| } | |
| li.done:after{ | |
| content: "\2713"; | |
| float:right; | |
| margin-right: -25px; | |
| } | |
| input{ | |
| padding:6px; | |
| width: 100%; | |
| border-radius: 5px; | |
| margin-bottom: 10px; | |
| font-size: 16px; | |
| } | |
| button{ | |
| box-shadow:rgba(0,0,0,0.2) 0 1px 0 0; | |
| border-bottom-color:#333; | |
| border:1px solid #61c4ea; | |
| background-color:#7cceee; | |
| border-radius:5px; | |
| color:#333; | |
| text-shadow:#b2e2f5 0 1px 0; | |
| padding:5px 15px; | |
| transition: 0.3s ease-in-out; | |
| cursor:pointer; | |
| } | |
| button:hover{ | |
| transition: 0.7s ease-in-out; | |
| background-color:#7cce00; | |
| } |
Good spot. I think i had a footer in an earlier version of the code, but forgot to remove the css ref
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thanks for the code! Just one question. Where is the footer? You added a CSS rule for it!