JS Todo List
HTML
<header class="main-header">
<h1>my<span>todo</span></h1>
</header>
<section class="app-insert">
<input type="text" name="task" placeholder="Insert your task here ...">
</section>
<section class="app-list">
<ul></ul>
</section>
CSS
*,
*:after,
*:before {
box-sizing: border-box;
}
body {
font: 16px 'Ubuntu', sans-serif;
background: #ecf0f1;
}
ul {
list-style-type: none;
padding-left: 0;
}
li {
font-size: 22px;
}
header {
text-align: center;
}
header h1 {
font-size: 64px;
font-weight: 300;
margin: 80px 0 25px;
color: #7f8c8d;
}
header h1 span {
font-weight: 700;
}
header h2 {
color: #bdc3c7;
}
.app-insert {
width: 800px;
margin: 50px auto 20px;
}
.app-insert input {
width: 100%;
height: 65px;
background: none;
border: none;
border-bottom: 1px solid #bdc3c7;
outline: none;
font: 300 28px 'Ubuntu', sans-serif;
padding: 20px;
}
.app-list {
width: 800px;
margin: 0 auto;
}
.task {
width: 100%;
height: 60px;
line-height: 60px;
padding: 0 20px;
position: relative;
color: #333;
transition: all .2s ease;
}
.task:hover {
background: rgba(0, 0, 0, .04);
cursor: pointer;
}
.task:hover .remove-task {
opacity: 1;
}
.task-complete {
text-decoration: line-through;
color: #95a5a6;
}
.remove-task {
opacity: 0;
position: absolute;
right: 20px;
text-decoration: none;
color: #7f8c8d;
transition: all .2s ease;
}
.remove-task:hover {
color: #333;
}
JAVASCRIPT
(function() {
var app = {
init: function() {
// Load list
app.storage('get');
// Add task
document.querySelector('.app-insert input').addEventListener('keyup', function(e) {
if ( e.which === 13 && this.value !== '' ) {
app.addTask(this.value);
app.storage('update');
this.value = '';
}
}, false);
document.querySelector('.app-list').addEventListener('click', function(e) {
// Remove task
if ( e.target.classList.contains('remove-task') ) {
app.removeTask(e.target.parentNode);
// Complete Task
} else if ( e.target.classList.contains('task') ) {
app.completeTask(e.target);
}
}, false);
},
addTask: function (task) {
var new_task = document.createElement('li');
new_task.setAttribute('class', 'task');
new_task.innerHTML = task + '<a href="javascript:;" class="remove-task">remove</a>';
var $list = document.querySelector('.app-list ul');
$list.appendChild(new_task);
},
removeTask: function (task) {
task.style.opacity = 0;
setTimeout(function() {
task.remove();
app.storage('update');
}, 400);
},
completeTask: function (task) {
task.classList.toggle('task-complete');
app.storage('update');
},
storage: function(type) {
if ( type === 'get' ) {
if ( localStorage.getItem('simpletodo') !== null ) {
document.querySelector('.app-list').innerHTML = localStorage.getItem('simpletodo');
}
} else if ( type === 'update' ) {
var str = document.querySelector('.app-list').innerHTML;
localStorage.setItem('simpletodo', str);
}
}
};
app.init();
})();
1 Response