<body>
<form action="/hello">
<input type="text" placeholder="username" name="username"/>
<input type="text" placeholder="todoValue" name="todo"/>
<button type="submit">submit</button>
</form>
<ul id="list">Todo List</ul>
</body>
const form = document.querySelector('form');
const list = document.querySelector('#list');
form.addEventListener('submit', (e)=> {
e.preventDefault();
const username = form.elements.username;
const todo = form.elements.todo;
const li = document.createElement('li');
li.innerText = `${username.value} : ${todo.value}`;
list.append(li);
username.value = "";
todo.value = "";
})
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.