Basic to-do app

todo.html

<h1>To-Do App</h1>

<form id="form">
  <input id="input" type="text" autocomplete="off">
  <button>Create Item</button>
</form>

<h3>Things To Do</h3>
<ul id="list"></ul>

todo.js

let form = document.getElementById("form")
let input = document.getElementById("input")
let list = document.getElementById("list")

form.addEventListener("submit", (e) => {
  e.preventDefault()
  createItem(input.value)
})

function createItem(x) {
  let listItem = `<li>${x} <button onClick="deleteItem(this)">Delete</button></li>`
  list.insertAdjacentHTML("beforeend", listItem)
  input.value = ""
  input.focus()
}

function deleteItem(itemToDelete) {
 itemToDelete.parentElement.remove()
}