Forms & DOM nodes

index.html

<h1>Grocery List</h1>
<form action="" method="get" id="groceries">
  <label for="item">Grocery Item</label>
  <input type="text" id="item" name="item">
  <input type="submit" value="Add Item">
</form>
<ul id="grocery-items">
</ul>

script.js

/*
 * This code is for our Grocery List
 */
const groceryForm = document.getElementById("groceries");
groceryForm.addEventListener("submit", (event) => {
  event.preventDefault();
  
  // get user data from form
  const item = document.getElementById("item").value;
 
  // Create a <li> DOM node with the item, and 
  // insert into the page.
  const li = document.createElement("li");
  li.innerHTML = item;
  
  const parent = document.getElementById("grocery-items");
  parent.appendChild(li);
  
});


// TODO: Click on the <li> elements, to "cross them out"
// either use <s> or the css text-decoration: line-through;