<div class="container">
 <h1>TO DO LIST</h1>
	<div class="list">
		<ul>
		 <li>
			<input type="checkbox" checked>
			<label for="checkbox">Finish the to do list</label>
		 </li>
		 <li>
			<input type="checkbox">
			<label for="checkbox">Go to Australia</label>
		 </li>
		 <li>
			<input type="checkbox">
			<label for="checkbox">Send letter to Eikon</label>
		 </li>
		</ul>
		<form action="" name="toDoList">
   <input type="text" name="ListItem" maxlength="25"/>
  </form>
		<div id="button">+</div>
 </div>
</div>
@import url('https://fonts.googleapis.com/css?family=Josefin+Sans');
@import url(https://fonts.googleapis.com/css?family=Ubuntu);
* {
	margin: 0;
	padding: 0;
}
body {
	overflow-x: hidden;
}
.container {
	width: 100vw;
	height: 1000px;
	background-color: #ff9999;
	
}
h1 {
	text-align: center;
	position: relative;
	top: 50px;
	color: white;
	font-family: 'Ubuntu';
	letter-spacing: 10px;
}
.list {
	top: 50px;
	width: 230px;
	position: relative;
	left: 50%;
	transform: translateX(-50%); 
}
ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
li {
	margin: 50px 0;
	font-family: 'Josefin Sans', sans-serif;
	font-size: 20px;
	font-weight: bolder;
}
input {
	cursor: pointer;
	position: relative;
	visibility: hidden;
}
input:after {
	border: 3px solid lightblue;
	border-radius: 50%;;
	content: "";
	display: block;
	height: 46px;
	width: 46px;
	text-align: center;
	visibility: visible;
	transition: all 100ms ease-in-out;
	background-color: white;
}
input:checked:after {
	border: 3px solid lightblue;
	color: white;
	font-size: 30px;
	border-radius: 50%;
	content: "✘";
	line-height: 43px;
	background-color: lightblue;
	animation: bounce 300ms ease-in-out forwards;
}
input[type=checkbox]:checked ~ label {
	text-decoration: line-through;
}

@keyframes bounce {
	0% {transform: scale(1, 1);}
	70% {transform: scale(1.1, 1.1);}
	100% {transform: scale(1, 1);}
}
label {
	position: relative;
	left: 50px;
	top: 18px;
}
input[type=text] {
	border: 2px solid lightblue;
	width: 250px;
	height: 30px;
	visibility: visible;
	border-radius: 5px;
	position: relative;
	left: 50%;
	top: 20px;
	transform: translateX(-50%);
}
#button {
	font-family: 'Josefin Sans', sans-serif;
	font-weight: bolder;
	font-size: 40px;
	color: black;
	position: relative;
	left: 210px;
	top: -18px;
}

$(document).ready(function() {
	$("#button").click(function() {
		var toAdd = $("input[name=ListItem]").val();
		$("ul").append(
			$("<li><input type='checkbox'><label>" + toAdd + "</label>" + "</li>")
		);
	});
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js