<div class="container">
  <h1><i class="fab fa-js-square"></i> Javascript Local Storage Example:</h1>

  <form>
    <h5>
      <i class="far fa-keyboard"></i> Enter Item(s)
    </h5>
    <input id="item" type="text" placeholder="New Item" data-bs-toggle="tooltip" data-bs-placement="right" title="Enter return key on keyboard to add item to list.">
  </form>

  <div class="list">
    <h5><i class="fas fa-list-ul"></i> List </h5>
    <ul></ul>
    <button type="button" class="btn btn-dark" data-bs-toggle="tooltip" data-bs-placement="right" title="Clears all items from list.">Clear All <i class="fas fa-eraser"></i></button>
  </div>
</div>

@import url("https://fonts.googleapis.com/css2?family=Cedarville+Cursive&family=Cutive+Mono&family=Quicksand&family=Raleway&display=swap");

.container {
  width: 70vw;
  height: 80vh;
  padding: 30px;
  margin-top: 40px;
  text-align: center;
  background: #e2e2e2;
}

h1 {
  font-family: "Quicksand", sans-serif;
  font-size: 45px;
}

form {
  padding: 15px;
}

h5 {
  font-family: "Raleway", sans-serif;
}

.list {
  padding: 15px;
}
ul {
  font-family: "Cutive Mono", monospace;
}

button {
  font-family: "Cedarville Cursive", cursive;
}

// src: github.com/kwing25

const form = document.querySelector("form");
const ul = document.querySelector("ul");
const button = document.querySelector("button");
const input = document.getElementById("item");
let itemsArray = localStorage.getItem("items")
  ? JSON.parse(localStorage.getItem("items"))
  : [];

localStorage.setItem("items", JSON.stringify(itemsArray));
const data = JSON.parse(localStorage.getItem("items"));

const liMaker = (text) => {
  const li = document.createElement("li");
  li.textContent = text;
  ul.appendChild(li);
};

form.addEventListener("submit", function (e) {
  e.preventDefault();

  itemsArray.push(input.value);
  localStorage.setItem("items", JSON.stringify(itemsArray));
  liMaker(input.value);
  input.value = "";
});

data.forEach((item) => {
  liMaker(item);
});

button.addEventListener("click", function () {
  localStorage.clear();
  while (ul.firstChild) {
    ul.removeChild(ul.firstChild);
  }
  itemsArray = [];
});