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

<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) 5- Consider placeholder="Add ToDo..." rather than placeholder="List Item..." 6- Change the link for HTML validation to yours (mine ends with 3koRB) Thanks for making such a good effort in IM 215. GOOD LUCK SIR ! -->
h2 { font-family:arial; } form { display: inline-block; } .list { font-family:"Trebuchet MS"; font-size:20px; color:#000000; }
$(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'); }); });

Related: See More


Questions / Comments: