Skip to content

Instantly share code, notes, and snippets.

@sudiptamondal

sudiptamondal/todo.html

Created February 28, 2020 13:01
Show Gist options
  • Save sudiptamondal/ea254b107da243f4c399d86ffe2f6d64 to your computer and use it in GitHub Desktop.
Save sudiptamondal/ea254b107da243f4c399d86ffe2f6d64 to your computer and use it in GitHub Desktop.
Download ZIP
A simple Todo Application
Raw
todo.html
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment