Skip to content

Instantly share code, notes, and snippets.

@dflima
Last active December 15, 2015 09:39
Show Gist options
  • Select an option

  • Save dflima/5240521 to your computer and use it in GitHub Desktop.

Select an option

Save dflima/5240521 to your computer and use it in GitHub Desktop.
to-do list
<!--
From: CodeAcademy.com
Author: Eric Weinstein
Link: http://www.codecademy.com/pt/ericweinstein
-->
<!DOCTYPE html>
<html>
<head>
<title>To Do</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</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>
</body>
</html>
$(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();
});
});
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment