<div class="container">
<div class="task__head task--row">YOUR TASKS (CLICK & HOLD TO REMOVE)</div>
<form action="">
<div class="task__list">
<label for="task--1" class="task"><input class="task__check" type="checkbox" id="task--1" /> <div class="task__field task--row"> Task number one<button class="task__important"><i class="fa fa-check" aria-hidden="true"></i></button></div></label>
<label for="task--2" class="task"><input class="task__check" type="checkbox" id="task--2" /> <div class="task__field task--row"> Second Task<button class="task__important"><i class="fa fa-check" aria-hidden="true"></i></button></div></label>
<label for="task--3" class="task"><input class="task__check" type="checkbox" id="task--3" /> <div class="task__field task--row"> Third task<button class="task__important"><i class="fa fa-check" aria-hidden="true"></i></button></div></label>
<label for="task--4" class="task"><input class="task__check" type="checkbox" id="task--4" /> <div class="task__field task--row"> Task number four<button class="task__important"><i class="fa fa-check" aria-hidden="true"></i></button></div></label>
</div>
<div class="task--row task__footer">
<input class="task__add" type="text" value="+ add new task">
</div>
</form>
</div>
@import url(https://fonts.googleapis.com/css?family=Space+Mono:400,700);
html, body {
height: 100%;
width: 100%;
}
body {
background: #FFBE0B;
font-family: "Space Mono";
font-weight:400;
font-size: 0.8em;
color: #aaa;
display:flex;
}
input {
font-family: "Space Mono";
font-size:1em;
outline:none;
}
* {
margin:0;
padding:0;
}
.container {
width: 600px;
margin: auto;
box-shadow: 0 0 2px hsla(0,0%,0%,0.2);
border-radius:6px;
background-color:#f8f8f8;
}
@keyframes shake {
from {left: -2px;}
to {left: 2px;}
}
@keyframes birth {
from {height:0;}
to {height: 50px;}
}
.task--row {
height: 50px;
padding:0 20px;
line-height:50px;
}
.task__head {
background: #FE5F55;
color: white;
font-weight:bold;
border-top-left-radius:6px;
border-top-right-radius:6px;
}
.task__footer {
transition: all 0.2s cubic-bezier(.7,.2,.17,1);
background: #1CCAD8;
border-bottom-left-radius:6px;
border-bottom-right-radius:6px;
}
.task__footer:hover {background-color:#54E0EA}
.task {
overflow:hidden;
transition: all 0.2s 0.2s cubic-bezier(.7,.2,.17,1);
position:relative;
display:block;
}
.task__check {
position: absolute;
left: -9999px;
z-index: -1;
}
.task__field {
transition: background-size 0.8s 0.2s cubic-bezier(.7,.2,.17,1),
background-color 0.2s cubic-bezier(.7,.2,.17,1),
height 0.2s 1s cubic-bezier(.7,.2,.17,1);
position:relative;
background-color:#f8f8f8;
border-top: 1px solid #eee;
background-image: linear-gradient(to right, #FE5F55, red);
background-size: 0 2px;
background-repeat:no-repeat;
background-position: left bottom;
}
.task__field:hover {background-color:white;}
.task:first-child .task__field {
border-top:none;
}
.task--new:last-child {
animation: birth 0.3s cubic-bezier(.7,.2,.17,1) 1;
}
.task__field.shaking {
animation: shake 0.1s 0.1s infinite ease-in-out;
background-size: 100% 2px;
}
.task__check:checked + .task__field {
color: #47D185;
}
.task__important {
transition: all 0.3s cubic-bezier(.09,.66,.36,1.8);
opacity:0;
position: absolute;
right:0;
top:0;
transform: scale(0);
color: #47D185;
font-size:1.4em;
height:50px;
width:50px;
border:0;
background:none;
}
.task__check:checked + .task__field > .task__important {
opacity: 0.5;
transform: scale(1);
}
.task__field.delete {
transition: all 0.2s cubic-bezier(.7,.2,.17,1);
transform: scale(1.5, 2);
height:0;
opacity:0;
}
.task__add {
height:50px;
border:0;
background:none;
width:100%;
color:white;
}
$('.task__add').on('focus',function(){
$(this).val('');
});
$('.task__add').on('blur',function(){
$(this).val('+ add new task');
});
$('form').on('submit', function(event){
event.preventDefault();
var taskText = $('.task__add').val();
var tasksN = $('.task').length + 1;
var newTask = '<label for="task--' + tasksN + '" class="task task--new"><input class="task__check" type="checkbox" id="task--' + tasksN + '" /> <div class="task__field task--row">' + taskText + '<button class="task__important"><i class="fa fa-check" aria-hidden="true"></i></button></div></label>'
$('.task__list').append(newTask);
$('.task__add').val('');
checkList();
});
var lastDeletedTask = '';
function checkList() {
$('.task').each(function(){
var $field = $(this).find('.task__field');
var mousedown = false;
$field.on('mousedown', function(){
mousedown = true;
$field.addClass('shaking');
setTimeout(deleteTask,1000)
});
$field.on('mouseup', function(){
mousedown = false;
$field.removeClass('shaking');
});
function deleteTask(){
if(mousedown) {
$field.addClass('delete');
lastDeletedTask = $field.text();
console.log(lastDeletedTask);
setTimeout(function(){
$field.remove();
}, 200);
} else {return;}
}
});
}
checkList();