<h1>To Do List</h1>
<ul>
<li>Get out of bed</li>
<li>Drink Coffee</li>
<li>Get to Work</li>
<li>Get to School</li>
</ul>
#container {
width: 300px;
margin: 100px auto;
border-width: 2px;
border-style: solid;
border-color: gray;
}
.completed {
color: gray;
text-decoration: line-through;
}
h1 {
background: #2980b9;
color: white;
}
h1 {
background: #2980b9;
color: white;
Margin: 0;
}
h1 {
background: #2980b9;
color: white;
Margin: 0;
padding-top: 10px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 10px;
}
h1 {
background: #2980b9;
color: white;
margin: 0;
padding: 10px 20px 20px 10px;
}
h1 {
background: #2980b9;
color: white;
margin: 0;
padding: 10px 20px 20px 10px;
text-transform: uppercase;
font-size: 24px;
font-weight: normal;
}
ul {
list-style: none;
}
http://fonts.google.com
li {
line-height: 40px;
background: white;
}
li:nth-child(2n) {
background: #dddddd;
}
<input type="text">
<input type="text" placeholder="Enter new to do">
input {
background-color: #f7f7f7;
width: 100%;
padding: 13px 13px 13px 20px;
color: #2980b9;
font-size: 18px;
}
input {
background-color: #f7f7f7;
width: 100%;
padding: 13px 13px 13px 20px;
color: #2980b9;
font-size: 18px;
box-sizing: border-box;
}
input:focus {
background-color: white;
border: 3px solid green;
outline: none;
}
<span>x</span>
span {
background: red;
color: white;
height: 40x;
margin: 0 0 0 20px;
padding: 3px 15px 3px 15px;
float: right;
box-sizing: border-box;
}
span {
background: red;
color: white;
height: 40px;
margin: 0 0 0 20px;
padding: 3px 15px 3px 15px;
float: right;
box-sizing: border-box;
opacity: 0;
}
li:hover span {
opacity: 1;
}
span {
background: red;
color: white;
height: 40px;
margin: 0 0 0 20px;
padding: 3px 15px 3px 15px;
float: right;
box-sizing: border-box;
opacity: 0;
transition: 0.3s linear;
}
li {
line-height: 40px;
background: white;
padding-left: 10px;
}
<span><i class="fa fa-times">x</i></span>
$('ul').on('click', 'li', function() {
$(this).toggleClass('completed');
});
$('ul').on('click', function() {
$(this).remove();
});
$('ul').on('click', 'span',function() {
$(this).remove();
});
$('ul').on('click', 'span', function(event) {
$(this).parent().remove();
});
$('input').keypress(function(event) {
if (event.which === 13) {
}
});
$('input').keypress(function(event) {
if (event.which === 13) {
var todoItem = $(this).val();
}
});
$('input').keypress(function(event) {
if (event.which === 13) {
var todoItem = $(this).val();
$('ul').append(
"<li>" +
"<span>" +
"<i class='fa fa-times'></i>" +
"</span>" +
todoItem +
"</li>"
);
}
});
$('input').keypress(function(event) {
if (event.which === 13) {
var todoItem = $(this).val();
$('ul').append(
"<li>" +
"<span>" +
"<i class='fa fa-times'></i>" +
"</span>" +
"</li>"
);
$('input').val() = "";
}
});