Created
April 8, 2016 17:26
-
-
Save bronzehedwick/bbf8e955fe7af0fd451d47e2adb3edf2 to your computer and use it in GitHub Desktop.
A minimal TODO app in <100 lines (pure HTML5/ES6)
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 lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>TODO</title> | |
| <style> | |
| [data-status="done"] { | |
| color: #999; | |
| text-decoration: line-through; | |
| } | |
| [data-view="active"] #todos [data-status="done"], | |
| [data-view="completed"] #todos [data-status="notdone"] { | |
| display: none; | |
| } | |
| .remove { | |
| color: red; | |
| font-size: 0.75em; | |
| cursor: pointer; | |
| } | |
| </style> | |
| </head> | |
| <body data-view="all"> | |
| <form id="add-todo" action="#"> | |
| <label for="add-todo">Todo:</label> | |
| <input name="add-todo" type="text" placeholder="Add something to do..."> | |
| </form> | |
| <ul id="todos"> | |
| <!-- New todos will appear below here --> | |
| </ul> | |
| <div id="view"> | |
| <button value="all">All</button> | |
| <button value="active">Active</button> | |
| <button value="completed">Completed</button> | |
| </div> | |
| <template id="template"> | |
| <li data-status="notdone"> | |
| <input type="checkbox"> | |
| </li> | |
| </template> | |
| <script> | |
| (function(document) { | |
| var body = document.getElementsByTagName('body')[0]; | |
| var template = document.getElementById('template'); | |
| var todos = document.getElementById('todos'); | |
| function addTodo(event) { | |
| event.preventDefault(); | |
| let item = document.createTextNode(event.srcElement[0].value); | |
| event.srcElement[0].value = ''; | |
| let remove = document.createElement('span'); | |
| remove.textContent = ' X'; | |
| remove.setAttribute('class', 'remove'); | |
| let templateClone = document.importNode(template.content, true); | |
| let element = templateClone.querySelector('li'); | |
| element.appendChild(item); | |
| element.appendChild(remove); | |
| todos.appendChild(templateClone); | |
| } | |
| function toggleTodo(event) { | |
| var element = event.srcElement; | |
| if (element.type === 'checkbox') { | |
| if (element.checked) { | |
| element.parentNode.setAttribute('data-status', 'done'); | |
| } else { | |
| element.parentNode.setAttribute('data-status', 'notdone'); | |
| } | |
| } | |
| } | |
| function changeView(event) { | |
| var element = event.srcElement; | |
| body.setAttribute('data-view', element.value); | |
| } | |
| function removeTodo(event) { | |
| if (event.srcElement.className === 'remove') { | |
| todos.removeChild(event.srcElement.parentNode); | |
| } | |
| } | |
| document.getElementById('add-todo').addEventListener('submit', addTodo, false); | |
| body.addEventListener('change', toggleTodo, false); | |
| document.getElementById('view').addEventListener('click', changeView, false); | |
| todos.addEventListener('click', removeTodo, false); | |
| })(document); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment