Somehow whenever I see some new Javascript framework, most of them always have the same To-Do application as their showcase sample. If someone/ some company is going to build a new framework and going to tell me, we built an awesome framework you can do so much with that and then they go ahead and give me a sample of a To-Do application, anyone would be like meh!!
How difficult can a to-do application be that the said framework is going to make your life much easier.
Just wrote a small to-do app myself, it only needs 1 single line of javascript, yup you read that right.
| <!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> |
All the things you need are –
- Text area for the To-do
- Button to add it.
- Checkbox to mark the todo complete.
The addtodo() function inside the <script> tag is what does all of this.
I feel designers, developers need to come up with something more innovative than a todo list app. Just saying!
Analects of an Otaku 