Todo Example
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="todolist not-done">
<h1>Todos</h1>
<input type="text" class="form-control add-todo" placeholder="Add todo">
<button id="checkAll" class="btn btn-success">Mark all as done</button>
<hr>
<ul id="sortable" class="list-unstyled">
<li class="ui-state-default">
<div class="checkbox">
<label>
<input type="checkbox" value="" />Take out the trash</label>
</div>
</li>
<li class="ui-state-default">
<div class="checkbox">
<label>
<input type="checkbox" value="" />Buy bread</label>
</div>
</li>
<li class="ui-state-default">
<div class="checkbox">
<label>
<input type="checkbox" value="" />Teach penguins to fly</label>
</div>
</li>
</ul>
<div class="todo-footer">
<strong><span class="count-todos"></span></strong> Items Left
</div>
</div>
</div>
<div class="col-md-6">
<div class="todolist">
<h1>Already Done</h1>
<ul id="done-items" class="list-unstyled">
<li>Some item <button class="remove-item btn btn-default btn-xs pull-right"><span class="glyphicon glyphicon-remove"></span></button></li>
</ul>
</div>
</div>
</div>
</div>
body{
background-color:#EEEEEE;
}
.todolist{
background-color:#FFF;
padding:20px 20px 10px 20px;
margin-top:30px;
}
.todolist h1{
margin:0;
padding-bottom:20px;
text-align:center;
}
.form-control{
border-radius:0;
}
li.ui-state-default{
background:#fff;
border:none;
border-bottom:1px solid #ddd;
}
li.ui-state-default:last-child{
border-bottom:none;
}
.todo-footer{
background-color:#F4FCE8;
margin:0 -20px -10px -20px;
padding: 10px 20px;
}
#done-items li{
padding:10px 0;
border-bottom:1px solid #ddd;
text-decoration:line-through;
}
#done-items li:last-child{
border-bottom:none;
}
#checkAll{
margin-top:10px;
}
why can i not get this to work on my web site? it looks amazing but will only works properly as a snippet on this page. :-(,Hi, have you found a solution by any chance ?,Hello, can you describe the error you are getting ?,Nice work! Love the simplicity. I took the liberty of adding html local storage capabilities so its useful between sessions along with an add button to the todo list and remove all button in the already done list. ,Do you have a copy of the amendments you made? They sound like the extras I would need too?,super. it could be useful adding “add” button ;),How can i use this todo for multiple different tab (e.g. for same functionality.).,Awesome snippet :D. Maybe you should consider adding a check for empty imput ;D. I found a bug, where you could submit blank tasks,Sorry, I was going for an example and wasn’t paying attention to detail but I was more than happy to fix the bug, Thank you.,Fine snip ! ‘lil good idea would be to add a button “put back task” near the delete button in the Already done list,Thank’s Jonathan, Thats a good idea.,The author is rgbskills
Loading...
