JSFiddle - React, Tailwind, and code Playground

by Allie Yu

HTML

<h1>Todo App</h1>
<form id="ourForm">
  <input id="ourField" type="text">
  <button>Create Item</button>
</form>
<ul id="ourList">

</ul>

JavaScript

let ourForm = document.getElementById("ourForm");
let ourField = document.getElementById("ourField");
let ourList = document.getElementById("ourList");

ourForm.addEventListener("submit", (e) => {
	e.preventDefault();
  createItem(ourField.value);
})

function createItem(x) {
let ourHTML = `<li>${x} <button onclick="deleteItem(this)">Delete</button></li>`
	ourList.insertAdjacentHTML("beforeend", ourHTML);
  ourField.value = "";
  ourField.focus()
}

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