1.Add jQuery library (It's missing in your code)
2.Add `keydown` event-listener on `text-box` and check enter key is presses or not? if yes, the call the `addListItem()` function
Just add below code inside `$(function(){..});`
$('#new-text').keydown(function(e){
if(e.keyCode === 13){
addListItem();
}
});
Working snippet:-
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
function addListItem(){
var text = $("#new-text").val();
$("#todolist").append('<li><input type="checkbox" class="done" /> '+text+' <button class="delete">Delete</button></li>');
$("#new-text").val(' ');
}
function deleteItem(){
if($(this).parent().css('textDecoration') == 'line-through' ) {
$(this).parent().remove();
}else{
$(this).parent().remove();
}
}
function finishItem(){
if($(this).parent().css('textDecoration') == 'line-through' ) {
$(this).parent().css('textDecoration', 'none');
}else{
$(this).parent().css('textDecoration', 'line-through');
}
}
$(function() {
$('input[type=text]').keydown(function(e){
if(e.keyCode === 13){
addListItem();
}
});
$("#add").on('click', addListItem);
$(document).on('click', '.delete', deleteItem);
$(document).on('click', '.done', finishItem);
});
<!-- language: lang-html -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE HTML>
<html>
<head>
<title>My Page</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="TodoListJquery.js"></script>
</head>
<body>
<h1>To-Do List</h1>
<ul id="todolist">
<li><input type="checkbox" class="done"/> Clean house <button class = "delete">Delete</button></li>
<li><input type="checkbox" class="done"/>Buy milk <button class = "delete">Delete</button></li>
</ul>
<input type="text" id="new-text" /><button id="add">Add</button>
</body>
</html>
<!-- end snippet -->