As in topic my job is to do a code where user writes some text into textbox and when user hits enter key, the text from the textbox should be added to ul list under Things header.
I added also reset button but it’s not working because adding elements to list isn’t working but I think it should work when I will fix it. I don’t know where I made mistake. Could anyone help me or give me advice what should I do?
<!DOCTYPE html>
<html>
<head>
<title>List</title>
</head>
<body>
<h1 id="title">List</h1>
<form>
<input type="text" id="user-todo" placeholder="List" required>
</form>
<h2 id="todo-header">Things</h2>
<ul id="list">
</ul>
<button id="clear">Reset</button>
<script>
var input = document.getElementById("user-todo");
input.addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
// what happens when user hits ENTER
$(document).ready(function() {
$('ul').append("<li>"+($('#user-todo').val()) + "</li>");
});
}
});
function clear() {
document.getElementById("list").innerHTML = '';
}
</script>
</body>
</html>