A simple Todo Application
| <!doctype html> | |
| <html> | |
| <head> | |
| <title>Sample To-Do</title> | |
| <style type="text/css"> | |
| section {margin: 0 auto;width: 100%;} | |
| h3, h5, li {float: left;width:100%;} | |
| ul {list-style: none;} | |
| input[type=checkbox], p { float:left;margin: 0;} | |
| </style> | |
| </head> | |
| <body> | |
| <section> | |
| <h3> To-Do Application</h3> | |
| <h5> Add your todo below</h5> | |
| <div> | |
| <textarea id="newtodo" placeholder="Enter your todo here..."></textarea> | |
| <button id="newtodosub" onclick="addtodo();">Add</button> | |
| </div> | |
| <ul id="todos"></ul> | |
| </section> | |
| <script type="text/javascript"> | |
| function addtodo() { | |
| document.getElementById("todos").insertAdjacentHTML('beforeend', | |
| '<li id="todoitem"><input type="checkbox" onclick="function rem(el) {el.parentElement.lastElementChild.style=' | |
| + '\'float:left;text-decoration:line-through\';el.setAttribute(\'disabled\', \'disabled\')};rem(this);" />' | |
| + '<p style="float:left;"> ' + document.getElementById("newtodo").value + '</p>' | |
| + '</li>' | |
| ); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment