sudiptamondal/todo.html

## 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>
	<!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>