Created
May 17, 2019 14:50
-
-
Save jdmr/f15700200d0043977e05ac540c4acc68 to your computer and use it in GitHub Desktop.
Finished HTML TODO Tutorial (Part2)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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 { | |
padding: 7px 5px; | |
} | |
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; | |
} | |
#error { | |
background-color: #ed4337; | |
font-size: 1.5em; | |
text-align: center; | |
} | |
#error>p { | |
margin-bottom: 0; | |
padding: 10px 5px; | |
font-size: 0.6em; | |
color: #fafafa; | |
} | |
#success { | |
background-color: #4bb543; | |
font-size: 1.5em; | |
text-align: center; | |
} | |
#success>p { | |
margin-bottom: 0; | |
padding: 10px 5px; | |
font-size: 0.6em; | |
color: #fafafa; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="main"> | |
<h1>TODOS</h1> | |
<ul id="todos"> | |
<li>Feed the dog</li> | |
<li>Walk the dog</li> | |
<li>Mow the lawn</li> | |
<li>Feed the chickens</li> | |
<li>Read a book</li> | |
<li>Do some exercise</li> | |
</ul> | |
<div id="success"></div> | |
<div id="error"></div> | |
<input type="text" id="todo"> | |
<button onclick="addTodo()">Add TODO</button> | |
</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; | |
todos.removeChild(todo); | |
let success = document.getElementById('success'); | |
success.innerHTML = '<p>Finished <strong>' + todo.innerText + '</strong> TODO!</p>' | |
setTimeout(() => { | |
success.innerHTML = ''; | |
}, 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>'; | |
setTimeout(() => { | |
li.classList.remove('selected'); | |
error.innerHTML = ''; | |
}, 2000); | |
return; | |
} | |
} | |
let node = document.createElement('li'); | |
let textNode = document.createTextNode(todo.value); | |
node.appendChild(textNode); | |
todos.appendChild(node); | |
todo.value = ''; | |
todo.focus(); | |
} | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment