html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<title>My To-Do List</title>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
</head>
<body>
<div>
<h1>My To-Do List</h1>
<input type="text" placeholder="New item" />
<button id="add">Add</button>
<ol id="mylist"></ol>
</div>
</body>
</html>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
h1 {
color: #fff;
}
.rem {
margin-left: 5px;
background-color: #ee1280;
color: yellow;
border: none;
cursor: pointer;
}
body {
background-color: #e514da;
}
div {
background-color: #ee1280;
}
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(function() {
$("#add").on("click", function() {
var val = $("input").val();
if(val !== '') {
var elem = $("<li></li>").text(val);
$(elem).append("<button class='rem'>X</button>");
$("#mylist").append(elem);
$("input").val("");
$(".rem").on("click", function() {
$(this).parent().remove();
});
}
});
});
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run