ChuksFestus/index.html

## index.html
 <head>
    <title>Todo app</title>
    <meta charset="UTF-8">
    <meta name="description" content="todo list in vanilla js">
    <meta name="keywords" content="todo list, vanillajs, chuksFestus, chuks festus">
    <meta name="author" content="Chuks festus">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
  	  <div class="container">
        <h1>My to-do list</h1>
  	    <div class="input">
  	  	  <input id="task" type="text" placeholder="enter task">
  	  	  <button id="add">add</button>
  	    </div>
        <hr>
        <div id="todos">

        </div>
      </div>
    <script src="script.js"></script>
 </body>

## script.js
 function get_todos() {
        var todos = new Array;
        var todos_str = localStorage.getItem('todo');
        if (todos_str !== null) {
            todos = JSON.parse(todos_str);
        }
        return todos;
    }

    function add() {
        var task = document.getElementById('task').value;

        var todos = get_todos();
        todos.push(task);
        localStorage.setItem('todo', JSON.stringify(todos));

        show();

        return false;
    }

    function remove() {
        var id = this.getAttribute('id');
        var todos = get_todos();
        todos.splice(id, 1);
        localStorage.setItem('todo', JSON.stringify(todos));

        show();

        return false;
    }

    function show() {
        var todos = get_todos();

        var html = '<ul>';
        for(var i=0; i<todos.length; i++) {
            html += '<li>' + todos[i] + '<button class="remove" id="' + i  + '">x</button></li>';
        };
        html += '</ul>';

        document.getElementById('todos').innerHTML = html;

        var buttons = document.getElementsByClassName('remove');
        for (var i=0; i < buttons.length; i++) {
            buttons[i].addEventListener('click', remove);
        };
    }

    document.getElementById('add').addEventListener('click', add);
show();

## style.css
body {
	font-family: "lucida grande", sans-serif;
	font-size: 13px;
	line-height: 1.5;
	color: #666;
	padding: 0;
	margin: 0;
	background-color: #f2f2f2;
}
button {
	color: #fff;
	text-shadow: 0 1px 0 rgba(0,0,0,.15);

	border: 1px solid rgba(0,0,0,.1);
	border-radius: 2px;
	box-shadow: 0 0 0 1px #fff;

	padding: 1px 4px 2px 4px;

	font-family: Tahoma, sans-serif;
	font-size: 11px;
	letter-spacing: 1px;
	text-transform: uppercase;
	background: #999;
	cursor: pointer;
}
.container {
	width: 100%;
	margin: 0;
	padding: 0;
	background-color: #fff;
	border-bottom: 1px solid #ddd;
}
h1 {
	margin: 0;
	padding: 10px 15px;
	background-color: #8bad53;
	border-bottom: 1px solid #6f8b42;
	color: #fff;

	font-size: 16px;
}
@media screen and (min-width: 400px) {
	.container {
		width: 400px;
		margin: 100px auto 0;
		border: 1px solid #ddd;
	}
	h1 {
		margin: -1px -1px 0 -1px;
		border: 1px solid #6f8b42;
	}
}
	<head>
	<title>Todo app</title>
	<meta charset="UTF-8">
	<meta name="description" content="todo list in vanilla js">
	<meta name="keywords" content="todo list, vanillajs, chuksFestus, chuks festus">
	<meta name="author" content="Chuks festus">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="style.css">
	</head>
	<body>
	<div class="container">
	<h1>My to-do list</h1>
	<div class="input">
	<input id="task" type="text" placeholder="enter task">
	<button id="add">add</button>
	</div>
	<hr>
	<div id="todos">

	</div>
	</div>
	<script src="script.js"></script>
	</body>
	function get_todos() {
	var todos = new Array;
	var todos_str = localStorage.getItem('todo');
	if (todos_str !== null) {
	todos = JSON.parse(todos_str);
	}
	return todos;
	}

	function add() {
	var task = document.getElementById('task').value;

	var todos = get_todos();
	todos.push(task);
	localStorage.setItem('todo', JSON.stringify(todos));

	show();

	return false;
	}

	function remove() {
	var id = this.getAttribute('id');
	var todos = get_todos();
	todos.splice(id, 1);
	localStorage.setItem('todo', JSON.stringify(todos));

	show();

	return false;
	}

	function show() {
	var todos = get_todos();

	var html = '<ul>';
	for(var i=0; i<todos.length; i++) {
	html += '<li>' + todos[i] + '<button class="remove" id="' + i + '">x</button></li>';
	};
	html += '</ul>';

	document.getElementById('todos').innerHTML = html;

	var buttons = document.getElementsByClassName('remove');
	for (var i=0; i < buttons.length; i++) {
	buttons[i].addEventListener('click', remove);
	};
	}

	document.getElementById('add').addEventListener('click', add);
	show();
	body {
	font-family: "lucida grande", sans-serif;
	font-size: 13px;
	line-height: 1.5;
	color: #666;
	padding: 0;
	margin: 0;
	background-color: #f2f2f2;
	}
	button {
	color: #fff;
	text-shadow: 0 1px 0 rgba(0,0,0,.15);

	border: 1px solid rgba(0,0,0,.1);
	border-radius: 2px;
	box-shadow: 0 0 0 1px #fff;

	padding: 1px 4px 2px 4px;

	font-family: Tahoma, sans-serif;
	font-size: 11px;
	letter-spacing: 1px;
	text-transform: uppercase;
	background: #999;
	cursor: pointer;
	}
	.container {
	width: 100%;
	margin: 0;
	padding: 0;
	background-color: #fff;
	border-bottom: 1px solid #ddd;
	}
	h1 {
	margin: 0;
	padding: 10px 15px;
	background-color: #8bad53;
	border-bottom: 1px solid #6f8b42;
	color: #fff;

	font-size: 16px;
	}
	@media screen and (min-width: 400px) {
	.container {
	width: 400px;
	margin: 100px auto 0;
	border: 1px solid #ddd;
	}
	h1 {
	margin: -1px -1px 0 -1px;
	border: 1px solid #6f8b42;
	}
	}