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