<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"> <h2>Learning jQuery</h2> <br> <button type="button" class="btn btn-success">Hide something</button> <hr> <p>This is a paragraph with little content.</p> </div> <!--List--> <div id="list_section"> <h1 id="header">To-do list</h1> <ul> <li class="item">Buy movie tickets</li> </ul> <div id="newItemButton"><button href="#">new item</button></div> <form id="newItemForm"> <input type="text" id="itemField" placeholder="Item" /> <input type="submit" id="add" value="add" /> </form> </div> <script src="https://code.jquery.com/jquery-1.12.3.js" integrity="sha256-1XMpEtA4eKXNNpXcJ1pmMPs8JV+nwLdEqwiJeCQEkyc=" crossorigin="anonymous"></script> <script src="js/your_js_file.js"></script>

h2 { color: 'red' } body { background-color: #85cff7; font-family: 'Helvetica', 'Arial', sans-serif; } #list_section { text-align: center; } h1 { color: white; margin: 0px auto; padding: 20px; } ul { padding: 0; } li { background-color: #fff; color: #000; font-size: 20px; list-style-type: none; width: 20%; margin: 0px auto; border-radius: 3px; border: 1px solid #000; padding: 10px; margin-bottom: 10px; } p { background-color: #fff; color: #666; padding: 10px; display: inline-block; margin: 20px auto 20px auto; width: 80%; border-radius: 5px; text-align: center; } .item { background-color: #fff; color: #000; } input[type='text'] { font-size: 12px; padding: 6px; border: 1px solid #000; border-radius: 3px; } input[type='submit'] { background-color: #fff; color: #000; border-radius: 8px; border: none; padding: 5px; } #newItemButton { display: none; } #itemField { margin-top: 60px; width: 10%; }

$(document).ready(function(){ $("button").click(function(){ $("p").toggle(); }); }); $(function() { var $list, $newItemForm; $list = $('ul'); $newItemForm = $('#newItemForm'); $newItemForm.on('submit', function(e) { e.preventDefault(); var text = $('input:text').val(); $list.append('<li>' + text + '</li>'); $('input:text').val(''); }); $list.on('click', 'li', function() { var $this = $(this); $this.remove(); }); });