I wanted to test out the To Do list from TextWrangler. I mostly copied and pasted the code, removing the CSS and jQuery links. Everything looks right, and I can type in the box, but the list isn’t coming up. What is missing from the code that would make this work on TextWrangler, etc. Sorry my code is a little messy below.
<!doctype html>
<html>
<head>
<title>To Do</title>
<style>
h2 {
font-family: arial;
}
form {
display: inline-block;
}
#button {
display: inline-block;
height: 20px;
width: 70px;
background-color: #cc0000;
font-family: arial;
font-weight: bold;
color: #ffffff;
border-radius: 5px;
text-align: center;
margin-top: 2px;
}
.list {
font-family: garamond;
color: #cc0000;
}
</style>
</head>
<body>
<h2>To Do</h2>
<form name="checkListForm">
<input type="text" name="checkListItem" />
</form>
<div id="button">Add!</div>
<br/>
<div class="list"></div>
<script type="text/javascript">
$(document).ready(function() {
$('#button').click(function() {
var toAdd = $('input[name=checkListItem]').val();
$('.list').append('<div class="item">' + toAdd + '</div>')
});
$(document).on('click', '.item', function() {
$(this).remove();
});
});
</script>
</body>
</html>