jdmr/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>TODOS</title>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <style>
        body {
            background-color: #dddddd;
            color: #333333;
            font-family: 'Open Sans', sans-serif;
            font-size: 18px;
            letter-spacing: .03em;
        }

        div#main {
            max-width: 400px;
            margin: auto;
        }

        ul#todos {
            list-style-type: none;
            margin: 0 0 10px 2px;
            padding: 0;
        }

        ul#todos>li {
            overflow: hidden;
            height: 0;
            margin: 0;
            opacity: 0;
            transition: all 0.4s ease-out;
        }

        ul#todos>li.show {
            height: 2em;
            margin: 2px 3px;
            opacity: 1;
        }

        input {
            width: 100%;
            height: 50px;
            box-sizing: border-box;
            font-size: 1em;
            padding: 10px;
        }

        button {
            width: 100%;
            height: 50px;
            margin-top: 10px;
            font-size: 1em;
            background-color: #888888;
            color: #dddddd;
        }

        .selected {
            background-color: #aaaaaa;
            font-size: 1.2em;
            padding-left: 5px;
            padding-top: 8px;
        }

        #error {
            background-color: #ed4337;
        }

        #error>p {
            color: #fafafa;
        }

        #success {
            background-color: #4bb543;
        }

        #success>p {
            color: #fafafa;
        }

        .snackbar {
            visibility: hidden;
            min-width: 250px;
            margin-left: -125px;
            text-align: center;
            border-radius: 2px;
            padding: 16px;
            position: fixed;
            z-index: 1;
            left: 50%;
            bottom: 30px;
        }

        #error.show, #success.show {
            visibility: visible;
            animation: fadein 0.5s, fadeout 0.5s 2.5s;
        }

        @keyframes fadein {
            from {bottom: 0; opacity: 0;}
            to {bottom: 30px; opacity: 1;}
        }

        @keyframes fadeout {
            from {bottom: 30px; opacity: 1;}
            to {bottom: 0; opacity: 0;}
        }
    </style>
</head>
<body>
    <div id="main">
        <h1>TODOS</h1>
        <ul id="todos">
            <li class="show">Feed the dog</li>
            <li class="show">Walk the dog</li>
            <li class="show">Mow the lawn</li>
            <li class="show">Feed the chickens</li>
            <li class="show">Read a book</li>
            <li class="show">Do some exercise</li>
        </ul>
        <input type="text" id="todo">
        <button onclick="addTodo()">Add TODO</button>
        <div id="success" class="snackbar"></div>
        <div id="error" class="snackbar"></div>
    </div>
    <script>
        let todo = document.getElementById("todo");
        todo.focus();
        todo.addEventListener("keyup", (event) => {
            if (event.keyCode === 13) {
                addTodo();
            } else if (event.keyCode === 27) {
                todo.value = '';
            }
        });
        let todos = document.getElementById("todos");
        todos.addEventListener("click", (event) => {
            let todo = event.target;
            todo.classList.remove('show');
            setTimeout(() => {
                todos.removeChild(todo);
            }, 500);
            let success = document.getElementById('success');
            success.innerHTML = '<p>Finished <strong>' + todo.innerText + '</strong> TODO!</p>'
            success.classList.add('show');
            setTimeout(() => {
                success.classList.remove('show');
            }, 2000);
        })

        function addTodo() {
            let elements = todos.getElementsByTagName("li");
            for(let li of elements) {
                if (li.innerText === todo.value) {
                    li.classList.add('selected');
                    let error = document.getElementById('error');
                    error.innerHTML = '<p>Already have that TODO in the list</p>';
                    error.classList.add('show');
                    setTimeout(() => {
                        li.classList.remove('selected');
                        error.classList.remove('show');
                    }, 2000);
                    return;
                }
            }

            let node = document.createElement('li');
            let textNode = document.createTextNode(todo.value);
            node.appendChild(textNode);
            todos.appendChild(node);
            setTimeout(() => {
                node.classList.add('show')
            }, 10);

            todo.value = '';
            todo.focus();
        }
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>TODOS</title>
	<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
	<style>
	body {
	background-color: #dddddd;
	color: #333333;
	font-family: 'Open Sans', sans-serif;
	font-size: 18px;
	letter-spacing: .03em;
	}

	div#main {
	max-width: 400px;
	margin: auto;
	}

	ul#todos {
	list-style-type: none;
	margin: 0 0 10px 2px;
	padding: 0;
	}

	ul#todos>li {
	overflow: hidden;
	height: 0;
	margin: 0;
	opacity: 0;
	transition: all 0.4s ease-out;
	}

	ul#todos>li.show {
	height: 2em;
	margin: 2px 3px;
	opacity: 1;
	}

	input {
	width: 100%;
	height: 50px;
	box-sizing: border-box;
	font-size: 1em;
	padding: 10px;
	}

	button {
	width: 100%;
	height: 50px;
	margin-top: 10px;
	font-size: 1em;
	background-color: #888888;
	color: #dddddd;
	}

	.selected {
	background-color: #aaaaaa;
	font-size: 1.2em;
	padding-left: 5px;
	padding-top: 8px;
	}

	#error {
	background-color: #ed4337;
	}

	#error>p {
	color: #fafafa;
	}

	#success {
	background-color: #4bb543;
	}

	#success>p {
	color: #fafafa;
	}

	.snackbar {
	visibility: hidden;
	min-width: 250px;
	margin-left: -125px;
	text-align: center;
	border-radius: 2px;
	padding: 16px;
	position: fixed;
	z-index: 1;
	left: 50%;
	bottom: 30px;
	}

	#error.show, #success.show {
	visibility: visible;
	animation: fadein 0.5s, fadeout 0.5s 2.5s;
	}

	@keyframes fadein {
	from {bottom: 0; opacity: 0;}
	to {bottom: 30px; opacity: 1;}
	}

	@keyframes fadeout {
	from {bottom: 30px; opacity: 1;}
	to {bottom: 0; opacity: 0;}
	}
	</style>
	</head>
	<body>
	<div id="main">
	<h1>TODOS</h1>
	<ul id="todos">
	<li class="show">Feed the dog</li>
	<li class="show">Walk the dog</li>
	<li class="show">Mow the lawn</li>
	<li class="show">Feed the chickens</li>
	<li class="show">Read a book</li>
	<li class="show">Do some exercise</li>
	</ul>
	<input type="text" id="todo">
	<button onclick="addTodo()">Add TODO</button>
	<div id="success" class="snackbar"></div>
	<div id="error" class="snackbar"></div>
	</div>
	<script>
	let todo = document.getElementById("todo");
	todo.focus();
	todo.addEventListener("keyup", (event) => {
	if (event.keyCode === 13) {
	addTodo();
	} else if (event.keyCode === 27) {
	todo.value = '';
	}
	});
	let todos = document.getElementById("todos");
	todos.addEventListener("click", (event) => {
	let todo = event.target;
	todo.classList.remove('show');
	setTimeout(() => {
	todos.removeChild(todo);
	}, 500);
	let success = document.getElementById('success');
	success.innerHTML = '<p>Finished <strong>' + todo.innerText + '</strong> TODO!</p>'
	success.classList.add('show');
	setTimeout(() => {
	success.classList.remove('show');
	}, 2000);
	})

	function addTodo() {
	let elements = todos.getElementsByTagName("li");
	for(let li of elements) {
	if (li.innerText === todo.value) {
	li.classList.add('selected');
	let error = document.getElementById('error');
	error.innerHTML = '<p>Already have that TODO in the list</p>';
	error.classList.add('show');
	setTimeout(() => {
	li.classList.remove('selected');
	error.classList.remove('show');
	}, 2000);
	return;
	}
	}

	let node = document.createElement('li');
	let textNode = document.createTextNode(todo.value);
	node.appendChild(textNode);
	todos.appendChild(node);
	setTimeout(() => {
	node.classList.add('show')
	}, 10);

	todo.value = '';
	todo.focus();
	}
	</script>
	</body>
	</html>