Just a simple Todo app
A Pen by Adam Lindqvist on CodePen.
%p Simple todo-"app". Try hover and drag todo items. | |
.container | |
.add | |
%i.fa.fa-plus | |
.title | |
%h1 Things to do | |
.new-task | |
%a.add-new{:href => "#"} | |
%i.fa.fa-plus | |
%input#todo-text{:placeholder => "New task"} | |
%ul | |
%li.row | |
%a.remove{:href => "#"} | |
%i.fa.fa-trash-o | |
%a.completed{:href => "#"} | |
%i.fa.fa-check | |
Go to the bank | |
%li.row | |
%a.remove{:href => "#"} | |
%i.fa.fa-trash-o | |
%a.completed{:href => "#"} | |
%i.fa.fa-check | |
Buy food | |
%li.row | |
%a.remove{:href => "#"} | |
%i.fa.fa-trash-o | |
%a.completed{:href => "#"} | |
%i.fa.fa-check | |
Clean the house | |
%li.row | |
%a.remove{:href => "#"} | |
%i.fa.fa-trash-o | |
%a.completed{:href => "#"} | |
%i.fa.fa-check | |
Make dinner | |
%li.row | |
%a.remove{:href => "#"} | |
%i.fa.fa-trash-o | |
%a.completed{:href => "#"} | |
%i.fa.fa-check | |
Pick up the kids |
$(document).on('click', '.remove', function() { | |
$(this).parent().slideUp(); | |
}); | |
$(document).on('click', '.completed', function() { | |
$(this).parent().toggleClass("done" ); | |
}); | |
$( "ul" ).sortable(); | |
$(".add").click(function(){ | |
$(".new-task").slideToggle(); | |
$("#todo-text").focus(); | |
}); | |
// Pressing enter | |
$(document).keypress(function(e) { | |
var str = $( "#todo-text" ).val(); | |
if(e.which == 13 && str != "" && str != null ) { | |
$( "<li class='row'><a class='remove' href='#'><i class='fa fa-trash-o'></i></a><a class='completed' href='#'><i class='fa fa-check'></i></a>"+ str +"</li>" ).fadeIn().appendTo("ul"); | |
$( "#todo-text" ).val(""); | |
$( "#todo-text" ).focus(); | |
} | |
}); | |
// Press the + sign | |
$(".add-new").click(function(){ | |
var str = $( "#todo-text" ).val(); | |
if( str != "" && str != null) { | |
$( "<li class='row'><a class='remove' href='#'><i class='fa fa-trash-o'></i></a><a class='completed' href='#'><i class='fa fa-check'></i></a>"+ str +"</li>" ).fadeIn().appendTo("ul"); | |
$( "#todo-text" ).val(""); | |
$( "#todo-text" ).focus(); | |
} | |
}); | |
*,*:before,*:after | |
box-sizing: border-box | |
p | |
color: #eee | |
text-align: center | |
margin: 60px 0 30px 0 | |
li | |
list-style: none | |
body | |
font-family: 'Open Sans', sans-serif | |
background: #34495e | |
font-size: 14px | |
-webkit-font-smoothing: antialiased | |
-moz-osx-font-smoothing: grayscale | |
text-rendering: optimizeLegibility | |
.container | |
background: #2c3e50 | |
overflow: hidden | |
width: 360px | |
margin: 0 auto | |
color: #FFF | |
border-radius: 3px 3px 0 0 | |
box-shadow: 10px 10px 0 rgba(0,0,0,.2) | |
.title | |
background: rgba(#3498db, 1) | |
h1 | |
font-size: 20px | |
font-weight: 600 | |
padding: 10px 15px | |
text-transform: uppercase | |
.add | |
float: right | |
border-radius: 3px | |
margin-right: 20px | |
margin-top: 5px | |
padding: 8px 10px | |
background: #2980b9 | |
&:hover | |
background: rgba(0,0,0,.3) | |
cursor: pointer | |
.row | |
color: #333 | |
background: #FFF | |
width: 100% | |
height: 40px | |
padding-left: 10px | |
line-height: 2.8 | |
&:hover a | |
width: 40px | |
opacity: 1 | |
&:nth-child(2n) | |
background: #f7f7f7 | |
&:hover | |
background: #eee | |
.remove, .completed | |
float: right | |
text-align: center | |
height: 40px | |
width: 0 | |
background: #2ecc71 | |
color: #FFF | |
opacity: 0 | |
text-decoration: none | |
display: inline-block | |
transition: all .2s ease | |
&:hover | |
background: #27ae60 | |
.remove | |
background: #e74c3c | |
&:hover | |
background: #c0392b | |
.done | |
text-decoration: line-through | |
color: #ccc | |
.add-new | |
float: right | |
height: 40px | |
width: 40px | |
text-align: center | |
background: #2ecc71 | |
color: #FFF | |
line-height: 2.8 | |
transition: all .3s linear | |
&:hover | |
background: #27ae60 | |
.new-task | |
display: none | |
input | |
-webkit-appearance: none | |
-moz-appearance: none | |
border-radius: 0 | |
background: #ecf0f1 | |
font-size: 14px | |
font-family: 'Open Sans', sans-serif | |
width: 320px | |
padding: 5px 10px | |
height: 40px | |
border: none | |
outline: none | |
// Add shadow when draggin a todo item | |
.ui-sortable-helper | |
box-shadow: 10px 10px 0 rgba(0,0,0,.2) |
Just a simple Todo app
A Pen by Adam Lindqvist on CodePen.