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!