Created
September 19, 2013 09:38
-
-
Save prasadshir/6621220 to your computer and use it in GitHub Desktop.
Simple To Dos App with Core JS & LocalStorate
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
| <html> | |
| <head> | |
| <style> | |
| div, section, footer, header{ | |
| padding:10px;border:1px solid green; | |
| } | |
| header, footer{text-align:center;} | |
| .container { | |
| padding:0; | |
| max-width:960px; /*used for limiting the width*/ | |
| margin:0 auto; /*used for centrally aligning container w.r.t viewport*/ | |
| } | |
| footer { | |
| height: 70px; | |
| background-color: white; | |
| } | |
| .del{ | |
| color:red; cursor:pointer; padding:0 10px; | |
| } | |
| .selected {background-color:orange; text-decoration:underline;} | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container" data-role="hold data"> | |
| <header> | |
| <h1>JS TO DO!</h1> | |
| </header> | |
| <section> | |
| <div id="inparea"> | |
| <label for="todo_inp">Enter New Task</label> | |
| <input type="text" id="todo_inp" name="todo_inp"/> | |
| <button id="addBtn">Add</button> | |
| </div> | |
| <div id="display"> | |
| <h2>ToDos</h2> | |
| <ul id ="todolist"> | |
| </ul> | |
| </div> | |
| </section> | |
| <footer> | |
| <p>Copyright!</p> | |
| </footer> | |
| </div> | |
| <script> | |
| var todolist = document.getElementById("todolist"); | |
| function buildTaskList(task, i) { | |
| var newToDo = document.createElement("li") | |
| newToDo.innerHTML = task; | |
| newToDo.innerHTML += "<span id="+i+" class='del'> X </span>" | |
| todolist.appendChild(newToDo); | |
| } | |
| window.onload = function(){ | |
| var todos = localStorage.mytodos ? localStorage.mytodos.split('||') : []; | |
| if(todos.length>0){ | |
| for (var i=0;i<todos.length;i++){buildTaskList(todos[i], i);} | |
| } | |
| document.querySelector("#addBtn").addEventListener("click", function(){ | |
| newToDoValue = document.getElementById("todo_inp").value | |
| var id = todos.push(newToDoValue); | |
| localStorage.mytodos = todos.join("||"); | |
| buildTaskList(newToDoValue, id); | |
| }); | |
| document.querySelector('#todolist').addEventListener('click', function(event) { | |
| if (event.target.tagName.toLowerCase() === 'span') { | |
| todos.splice(event.target.id,1); | |
| localStorage.mytodos = todos.join("||"); | |
| event.target.parentNode.remove(); | |
| } | |
| }); | |
| document.querySelector('#todolist').addEventListener('mouseover', function(event) { | |
| if (event.target.tagName.toLowerCase() === 'li') { | |
| //alert('mouseover'); | |
| console.log(event.target) | |
| } | |
| }); | |
| };//window onload | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment