devjangir/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://code.jquery.com/jquery.min.js"></script>
<style id="jsbin-css">
body {
  margin: 0;
  min-width: 250px;
}

/* Include the padding and border in an element's total width and height */
* {
  box-sizing: border-box;
}

/* Remove margins and padding from the list */
ul {
  margin: 0;
  padding: 0;
}

/* Style the list items */
ul li {
  cursor: pointer;
  position: relative;
  padding: 12px 8px 12px 40px;
  list-style-type: none;
  background: #eee;
  font-size: 18px;
  transition: 0.2s;

}

/* Set all odd list items to a different color (zebra-stripes) */
ul li:nth-child(odd) {
  background: #f9f9f9;
}

/* Darker background-color on hover */
ul li:hover {
  background: #ddd;
}

/* When clicked on, add a background color and strike out text */
ul li.checked {
  background: #888;
  color: #fff;
  text-decoration: line-through;
}

/* Add a "checked" mark when clicked on */
ul li.checked::before {
  content: '';
  position: absolute;
  border-color: #fff;
  border-style: solid;
  border-width: 0 2px 2px 0;
  top: 10px;
  left: 16px;
  transform: rotate(45deg);
  height: 15px;
  width: 7px;
}

/* Style the close button */
.close {
  position: absolute;
  right: 0;
  top: 0;
  padding: 12px 16px 12px 16px;
}

.close:hover {
  background-color: #f44336;
  color: white;
}

/* Style the header */
.header {
  background-color: #f44336;
  padding: 30px 40px;
  color: white;
  text-align: center;
}

/* Clear floats after the header */
.header:after {
  content: "";
  display: table;
  clear: both;
}

ul li.completed {
 background: #2ecc71;
}

/* Style the input */
input {
  margin: 0;
  border: none;
  border-radius: 0;
  width: 75%;
  padding: 10px;
  float: left;
  font-size: 16px;
}

/* Style the "Add" button */
.addBtn {
  padding: 10px;
  width: 25%;
  background: #d9d9d9;
  color: #555;
  float: left;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s;
  border-radius: 0;
}
/* Style the "Add" button */
.showBtn {
  padding: 10px;
  width: 100%;
  float: left;
  background: #16a085;
  color: #555;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  border-radius: 0;
}

.addBtn:hover {
  background-color: #bbb;
}
</style>
</head>
<body>
<div id="myDIV" class="header">
  <h2 style="margin:5px">My To Do List</h2>
  <input type="text" id="todo_content" placeholder="Title...">
    <span onclick="addTodo()" class="addBtn">Add</span>
    <span onclick="showCompleted()" id="show" class="showBtn">Hide Completed</span>

</div>
<ul id="todos">
  <li class="completed">Hit the gym</li>
  <li class="checked">Pay bills</li>
  <li>Meet George</li>
  <li>Buy eggs</li>
  <li>Read a book</li>
  <li>Organize office</li>
</ul>
</body>
</html>
<script id="jsbin-javascript">
var todos = new Array();

function markCompleted() {
    const index = event.target.id;
    const selectedTodo = todos[index];
    todos.splice(index, 1, {...selectedTodo, completed:true});
    console.log(todos)
    listTodos(todos)
}

function addTodo() {
  const todoContent = document.getElementById('todo_content').value
  document.getElementById('todo_content').value = ""
  todos.push({
    title: todoContent,
    completed: false,
    index:todos.length
  })
  listTodos(todos);
}

function clearList(){
  document.getElementById('todos').innerHTML = null;
}

function showCompleted() {
  const content = document.getElementById('show').innerHTML;
  if(content === "Hide Completed") {
    document.getElementById('show').innerHTML = "Show Completed";
    filterTodo()
  } else {
    listTodos(todos);
  }
//

}

function filterTodo(){

  const todoItems = todos.filter((todo) => !todo.completed)
  listTodos(todoItems);
}

function listTodos(todoList) {
    clearList();
    todoList.map((todo) => {
	let liDiv = document.createElement('li');
  	liDiv.innerHTML = todo.title;
    if(todo.completed){
    liDiv.classList.add('completed');
    }
    liDiv.id = todo.index;
    liDiv.addEventListener("click", markCompleted);
    document.getElementById('todos').appendChild(liDiv);
  });
}
</script>


<script id="jsbin-source-css" type="text/css">body {
  margin: 0;
  min-width: 250px;
}

/* Include the padding and border in an element's total width and height */
* {
  box-sizing: border-box;
}

/* Remove margins and padding from the list */
ul {
  margin: 0;
  padding: 0;
}

/* Style the list items */
ul li {
  cursor: pointer;
  position: relative;
  padding: 12px 8px 12px 40px;
  list-style-type: none;
  background: #eee;
  font-size: 18px;
  transition: 0.2s;

}

/* Set all odd list items to a different color (zebra-stripes) */
ul li:nth-child(odd) {
  background: #f9f9f9;
}

/* Darker background-color on hover */
ul li:hover {
  background: #ddd;
}

/* When clicked on, add a background color and strike out text */
ul li.checked {
  background: #888;
  color: #fff;
  text-decoration: line-through;
}

/* Add a "checked" mark when clicked on */
ul li.checked::before {
  content: '';
  position: absolute;
  border-color: #fff;
  border-style: solid;
  border-width: 0 2px 2px 0;
  top: 10px;
  left: 16px;
  transform: rotate(45deg);
  height: 15px;
  width: 7px;
}

/* Style the close button */
.close {
  position: absolute;
  right: 0;
  top: 0;
  padding: 12px 16px 12px 16px;
}

.close:hover {
  background-color: #f44336;
  color: white;
}

/* Style the header */
.header {
  background-color: #f44336;
  padding: 30px 40px;
  color: white;
  text-align: center;
}

/* Clear floats after the header */
.header:after {
  content: "";
  display: table;
  clear: both;
}

ul li.completed {
 background: #2ecc71;
}

/* Style the input */
input {
  margin: 0;
  border: none;
  border-radius: 0;
  width: 75%;
  padding: 10px;
  float: left;
  font-size: 16px;
}

/* Style the "Add" button */
.addBtn {
  padding: 10px;
  width: 25%;
  background: #d9d9d9;
  color: #555;
  float: left;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s;
  border-radius: 0;
}
/* Style the "Add" button */
.showBtn {
  padding: 10px;
  width: 100%;
  float: left;
  background: #16a085;
  color: #555;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  border-radius: 0;
}

.addBtn:hover {
  background-color: #bbb;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">var todos = new Array();

function markCompleted() {
    const index = event.target.id;
    const selectedTodo = todos[index];
    todos.splice(index, 1, {...selectedTodo, completed:true});
    console.log(todos)
    listTodos(todos)
}

function addTodo() {
  const todoContent = document.getElementById('todo_content').value
  document.getElementById('todo_content').value = ""
  todos.push({
    title: todoContent,
    completed: false,
    index:todos.length
  })
  listTodos(todos);
}

function clearList(){
  document.getElementById('todos').innerHTML = null;
}

function showCompleted() {
  const content = document.getElementById('show').innerHTML;
  if(content === "Hide Completed") {
    document.getElementById('show').innerHTML = "Show Completed";
    filterTodo()
  } else {
    listTodos(todos);
  }
//

}

function filterTodo(){

  const todoItems = todos.filter((todo) => !todo.completed)
  listTodos(todoItems);
}

function listTodos(todoList) {
    clearList();
    todoList.map((todo) => {
	let liDiv = document.createElement('li');
  	liDiv.innerHTML = todo.title;
    if(todo.completed){
    liDiv.classList.add('completed');
    }
    liDiv.id = todo.index;
    liDiv.addEventListener("click", markCompleted);
    document.getElementById('todos').appendChild(liDiv);
  });
}
</script></body>
</html>

## jsbin.jegizam.css
body {
  margin: 0;
  min-width: 250px;
}

/* Include the padding and border in an element's total width and height */
* {
  box-sizing: border-box;
}

/* Remove margins and padding from the list */
ul {
  margin: 0;
  padding: 0;
}

/* Style the list items */
ul li {
  cursor: pointer;
  position: relative;
  padding: 12px 8px 12px 40px;
  list-style-type: none;
  background: #eee;
  font-size: 18px;
  transition: 0.2s;

}

/* Set all odd list items to a different color (zebra-stripes) */
ul li:nth-child(odd) {
  background: #f9f9f9;
}

/* Darker background-color on hover */
ul li:hover {
  background: #ddd;
}

/* When clicked on, add a background color and strike out text */
ul li.checked {
  background: #888;
  color: #fff;
  text-decoration: line-through;
}

/* Add a "checked" mark when clicked on */
ul li.checked::before {
  content: '';
  position: absolute;
  border-color: #fff;
  border-style: solid;
  border-width: 0 2px 2px 0;
  top: 10px;
  left: 16px;
  transform: rotate(45deg);
  height: 15px;
  width: 7px;
}

/* Style the close button */
.close {
  position: absolute;
  right: 0;
  top: 0;
  padding: 12px 16px 12px 16px;
}

.close:hover {
  background-color: #f44336;
  color: white;
}

/* Style the header */
.header {
  background-color: #f44336;
  padding: 30px 40px;
  color: white;
  text-align: center;
}

/* Clear floats after the header */
.header:after {
  content: "";
  display: table;
  clear: both;
}

ul li.completed {
 background: #2ecc71;
}

/* Style the input */
input {
  margin: 0;
  border: none;
  border-radius: 0;
  width: 75%;
  padding: 10px;
  float: left;
  font-size: 16px;
}

/* Style the "Add" button */
.addBtn {
  padding: 10px;
  width: 25%;
  background: #d9d9d9;
  color: #555;
  float: left;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s;
  border-radius: 0;
}
/* Style the "Add" button */
.showBtn {
  padding: 10px;
  width: 100%;
  float: left;
  background: #16a085;
  color: #555;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  border-radius: 0;
}

.addBtn:hover {
  background-color: #bbb;
}

## jsbin.jegizam.js
var todos = new Array();

function markCompleted() {
    const index = event.target.id;
    const selectedTodo = todos[index];
    todos.splice(index, 1, {...selectedTodo, completed:true});
    console.log(todos)
    listTodos(todos)
}

function addTodo() {
  const todoContent = document.getElementById('todo_content').value
  document.getElementById('todo_content').value = ""
  todos.push({
    title: todoContent,
    completed: false,
    index:todos.length
  })
  listTodos(todos);
}

function clearList(){
  document.getElementById('todos').innerHTML = null;
}

function showCompleted() {
  const content = document.getElementById('show').innerHTML;
  if(content === "Hide Completed") {
    document.getElementById('show').innerHTML = "Show Completed";
    filterTodo()
  } else {
    listTodos(todos);
  }
//

}

function filterTodo(){

  const todoItems = todos.filter((todo) => !todo.completed)
  listTodos(todoItems);
}

function listTodos(todoList) {
    clearList();
    todoList.map((todo) => {
	let liDiv = document.createElement('li');
  	liDiv.innerHTML = todo.title;
    if(todo.completed){
    liDiv.classList.add('completed');
    }
    liDiv.id = todo.index;
    liDiv.addEventListener("click", markCompleted);
    document.getElementById('todos').appendChild(liDiv);
  });
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<script src="https://code.jquery.com/jquery.min.js"></script>
	<style id="jsbin-css">
	body {
	margin: 0;
	min-width: 250px;
	}

	/* Include the padding and border in an element's total width and height */
	* {
	box-sizing: border-box;
	}

	/* Remove margins and padding from the list */
	ul {
	margin: 0;
	padding: 0;
	}

	/* Style the list items */
	ul li {
	cursor: pointer;
	position: relative;
	padding: 12px 8px 12px 40px;
	list-style-type: none;
	background: #eee;
	font-size: 18px;
	transition: 0.2s;

	}

	/* Set all odd list items to a different color (zebra-stripes) */
	ul li:nth-child(odd) {
	background: #f9f9f9;
	}

	/* Darker background-color on hover */
	ul li:hover {
	background: #ddd;
	}

	/* When clicked on, add a background color and strike out text */
	ul li.checked {
	background: #888;
	color: #fff;
	text-decoration: line-through;
	}

	/* Add a "checked" mark when clicked on */
	ul li.checked::before {
	content: '';
	position: absolute;
	border-color: #fff;
	border-style: solid;
	border-width: 0 2px 2px 0;
	top: 10px;
	left: 16px;
	transform: rotate(45deg);
	height: 15px;
	width: 7px;
	}

	/* Style the close button */
	.close {
	position: absolute;
	right: 0;
	top: 0;
	padding: 12px 16px 12px 16px;
	}

	.close:hover {
	background-color: #f44336;
	color: white;
	}

	/* Style the header */
	.header {
	background-color: #f44336;
	padding: 30px 40px;
	color: white;
	text-align: center;
	}

	/* Clear floats after the header */
	.header:after {
	content: "";
	display: table;
	clear: both;
	}

	ul li.completed {
	background: #2ecc71;
	}

	/* Style the input */
	input {
	margin: 0;
	border: none;
	border-radius: 0;
	width: 75%;
	padding: 10px;
	float: left;
	font-size: 16px;
	}

	/* Style the "Add" button */
	.addBtn {
	padding: 10px;
	width: 25%;
	background: #d9d9d9;
	color: #555;
	float: left;
	text-align: center;
	font-size: 16px;
	cursor: pointer;
	transition: 0.3s;
	border-radius: 0;
	}
	/* Style the "Add" button */
	.showBtn {
	padding: 10px;
	width: 100%;
	float: left;
	background: #16a085;
	color: #555;
	text-align: center;
	font-size: 16px;
	cursor: pointer;
	border-radius: 0;
	}

	.addBtn:hover {
	background-color: #bbb;
	}
	</style>
	</head>
	<body>
	<div id="myDIV" class="header">
	<h2 style="margin:5px">My To Do List</h2>
	<input type="text" id="todo_content" placeholder="Title...">
	<span onclick="addTodo()" class="addBtn">Add</span>
	<span onclick="showCompleted()" id="show" class="showBtn">Hide Completed</span>

	</div>
	<ul id="todos">
	<li class="completed">Hit the gym</li>
	<li class="checked">Pay bills</li>
	<li>Meet George</li>
	<li>Buy eggs</li>
	<li>Read a book</li>
	<li>Organize office</li>
	</ul>
	</body>
	</html>
	<script id="jsbin-javascript">
	var todos = new Array();

	function markCompleted() {
	const index = event.target.id;
	const selectedTodo = todos[index];
	todos.splice(index, 1, {...selectedTodo, completed:true});
	console.log(todos)
	listTodos(todos)
	}

	function addTodo() {
	const todoContent = document.getElementById('todo_content').value
	document.getElementById('todo_content').value = ""
	todos.push({
	title: todoContent,
	completed: false,
	index:todos.length
	})
	listTodos(todos);
	}

	function clearList(){
	document.getElementById('todos').innerHTML = null;
	}

	function showCompleted() {
	const content = document.getElementById('show').innerHTML;
	if(content === "Hide Completed") {
	document.getElementById('show').innerHTML = "Show Completed";
	filterTodo()
	} else {
	listTodos(todos);
	}
	//

	}

	function filterTodo(){

	const todoItems = todos.filter((todo) => !todo.completed)
	listTodos(todoItems);
	}

	function listTodos(todoList) {
	clearList();
	todoList.map((todo) => {
	let liDiv = document.createElement('li');
	liDiv.innerHTML = todo.title;
	if(todo.completed){
	liDiv.classList.add('completed');
	}
	liDiv.id = todo.index;
	liDiv.addEventListener("click", markCompleted);
	document.getElementById('todos').appendChild(liDiv);
	});
	}
	</script>


	<script id="jsbin-source-css" type="text/css">body {
	margin: 0;
	min-width: 250px;
	}

	/* Include the padding and border in an element's total width and height */
	* {
	box-sizing: border-box;
	}

	/* Remove margins and padding from the list */
	ul {
	margin: 0;
	padding: 0;
	}

	/* Style the list items */
	ul li {
	cursor: pointer;
	position: relative;
	padding: 12px 8px 12px 40px;
	list-style-type: none;
	background: #eee;
	font-size: 18px;
	transition: 0.2s;

	}

	/* Set all odd list items to a different color (zebra-stripes) */
	ul li:nth-child(odd) {
	background: #f9f9f9;
	}

	/* Darker background-color on hover */
	ul li:hover {
	background: #ddd;
	}

	/* When clicked on, add a background color and strike out text */
	ul li.checked {
	background: #888;
	color: #fff;
	text-decoration: line-through;
	}

	/* Add a "checked" mark when clicked on */
	ul li.checked::before {
	content: '';
	position: absolute;
	border-color: #fff;
	border-style: solid;
	border-width: 0 2px 2px 0;
	top: 10px;
	left: 16px;
	transform: rotate(45deg);
	height: 15px;
	width: 7px;
	}

	/* Style the close button */
	.close {
	position: absolute;
	right: 0;
	top: 0;
	padding: 12px 16px 12px 16px;
	}

	.close:hover {
	background-color: #f44336;
	color: white;
	}

	/* Style the header */
	.header {
	background-color: #f44336;
	padding: 30px 40px;
	color: white;
	text-align: center;
	}

	/* Clear floats after the header */
	.header:after {
	content: "";
	display: table;
	clear: both;
	}

	ul li.completed {
	background: #2ecc71;
	}

	/* Style the input */
	input {
	margin: 0;
	border: none;
	border-radius: 0;
	width: 75%;
	padding: 10px;
	float: left;
	font-size: 16px;
	}

	/* Style the "Add" button */
	.addBtn {
	padding: 10px;
	width: 25%;
	background: #d9d9d9;
	color: #555;
	float: left;
	text-align: center;
	font-size: 16px;
	cursor: pointer;
	transition: 0.3s;
	border-radius: 0;
	}
	/* Style the "Add" button */
	.showBtn {
	padding: 10px;
	width: 100%;
	float: left;
	background: #16a085;
	color: #555;
	text-align: center;
	font-size: 16px;
	cursor: pointer;
	border-radius: 0;
	}

	.addBtn:hover {
	background-color: #bbb;
	}</script>

	<script id="jsbin-source-javascript" type="text/javascript">var todos = new Array();

	function markCompleted() {
	const index = event.target.id;
	const selectedTodo = todos[index];
	todos.splice(index, 1, {...selectedTodo, completed:true});
	console.log(todos)
	listTodos(todos)
	}

	function addTodo() {
	const todoContent = document.getElementById('todo_content').value
	document.getElementById('todo_content').value = ""
	todos.push({
	title: todoContent,
	completed: false,
	index:todos.length
	})
	listTodos(todos);
	}

	function clearList(){
	document.getElementById('todos').innerHTML = null;
	}

	function showCompleted() {
	const content = document.getElementById('show').innerHTML;
	if(content === "Hide Completed") {
	document.getElementById('show').innerHTML = "Show Completed";
	filterTodo()
	} else {
	listTodos(todos);
	}
	//

	}

	function filterTodo(){

	const todoItems = todos.filter((todo) => !todo.completed)
	listTodos(todoItems);
	}

	function listTodos(todoList) {
	clearList();
	todoList.map((todo) => {
	let liDiv = document.createElement('li');
	liDiv.innerHTML = todo.title;
	if(todo.completed){
	liDiv.classList.add('completed');
	}
	liDiv.id = todo.index;
	liDiv.addEventListener("click", markCompleted);
	document.getElementById('todos').appendChild(liDiv);
	});
	}
	</script></body>
	</html>