Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href='http://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
<style>
html {
padding: 5mm;
background-color: #e9e9e9;
font-family: 'Indie Flower', cursive;
}
.container {
background-color: #fff;
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.24);
margin: 0 auto;
max-width: 100mm;
}
.container > header {
padding: 7mm;
font-size: 2.2em;
text-align: center;
color: #fff;
background-color: #009688;
}
.container > footer {
padding: 2mm;
}
.task {
font-size: 1.5em;
padding: 3mm 7mm;
}
.task.complete {
text-decoration: line-through;
}
#task-list {
min-height: 100mm;
padding: 2mm 0mm;
}
#task-list *:nth-child(even) {
background: #f9f9f9;
}
#task-list .banner {
background: #fff;
text-align: center;
font-size: 1.65em;
padding-top: 8mm;
}
#task-input {
width: 100%;
box-sizing: border-box;
padding: 2mm;
font-size: 1em;
}
</style>
</head>
<body>
<div class="container">
<header>My TO-DO List</header>
<div id="task-list"></div>
<footer>
<input id="task-input" placeholder="Add New Task" />
</footer>
</div>
<script>
var tasks = [];
var taskList = document.getElementById('task-list');
var taskInput = document.getElementById('task-input');
// remove and append all
function refresh() {
while (taskList.firstChild) taskList.removeChild(taskList.firstChild);
if (tasks.length === 0) {
taskList.appendChild(makeBanner('Empty Task List'));
}
for (var i = 0; i < tasks.length; i++) {
var task = tasks[i];
var node = makeTask(i + 1, task);
taskList.appendChild(node)
}
if (tasks.length > 0 && tasks.every(function(x){ return x.complete }) ) {
taskList.appendChild(makeBanner('~ Well Done ~'));
}
}
function makeBanner(text){
var elem = document.createElement('div');
elem.textContent = text;
elem.classList.add('banner');
return elem;
}
function makeTask(i, task) {
var elem = document.createElement('div');
elem.textContent = '' + i + ' ' + task.name;
elem.classList.add('task');
if (task.complete) elem.classList.add('complete');
elem.onclick = function() {
task.complete = !task.complete;
refresh();
};
return elem;
}
// enter to append task
taskInput.onkeydown = function(event) {
if (event.keyCode === 13) {
var name = taskInput.value;
if (name === null || name === '') return;
taskInput.value = '';
tasks.push({
name: name,
complete: false
});
refresh();
}
};
refresh();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment