"Test by BRADY: To Do List"
Bootstrap 3.3.0 Snippet by mrmccormack

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ---------->
<div class="container">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4">
<h2>To Do List</h2>
<form name="checkListForm">
<input type="text" name="checkListItem" placeholder="List Item..."/>
</form>
<button type="button" id="add" class="btn btn-info">Add</button>
<button type="button" id="clear" class="btn btn-default">clear</button>
<br/><br/>
<div class="list"></div>
</div>
<div class="col-md-4"></div>
</div>
<hr>
<a href="http://validator.w3.org/check?uri=http%3A%2F%2Fbootsnipp.com%2Fiframe%2F3koRB" target="_blank">
<small>HTML</small><sup>5</sup></a>
</div>
<!--
Comments:
- Consider submitting to CodeAcademy - the simpler one,non-Bootstrap
- add at least a few // comments to JS, to help people understand it
See the FORK of your snippet at:
http://bootsnipp.com/user/mrmccormack/3koRB
1- your 3rd col-md-4 was not closed, I fixed
2- I used Sublimetext's HTML Beautify plugin to format a bit nicer
3- Consider changing the cursor when mouse over an item, to indicate user can click on it
4- The "clear" button is great, but maybe indicate that it will only clear crossed out items?
(this could be a title="" maybe)
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
h2 {
font-family:arial;
}
form {
display: inline-block;
}
.list {
font-family:"Trebuchet MS";
font-size:20px;
color:#000000;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(document).ready(function(){
$('#clear').hide();
$('#add').click(function(){
var toAdd = $("input[name=checkListItem]").val();
$('.list').append('<div class="item">' + toAdd + '</div>');
$('#clear').fadeIn('fast');
$('input').val('');
});
$(document).on('click', '.item', function() {
$(this).css("color", "#cc0000");
$(this).wrapInner('<strike class="done"></strike>');
$(this).append(" " + '<span class="glyphicon glyphicon-remove done" aria-hidden="true"></span>');
$(this).prop('disabled', true);
});
$('#clear').click(function(){
$('.done').remove('.done');
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: