Why to-do apps for JavaScript frameworks

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;">&nbsp;&nbsp;&nbsp;' + document.getElementById("newtodo").value + '</p>'
+ '</li>'
);
}
</script>
</body>
</html>
view raw todo.html hosted with ❤ by GitHub

All the things you need are –

  1. Text area for the To-do
  2. Button to add it.
  3. 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!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.