JSFiddle - React, Tailwind, and code Playground

by aviboy2006

HTML

<html>
  <head>
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
    
  </head>

<body>
  <div class="main">
    <input id="item" type="text">
    <i id="addItem" class="fas fa-plus"></i><br> <br>
  </div>

  <div class="items">
    <div id="addedItems"></div>
  </div>
  <i onclick='deleteAll()' class="fas fa-trash"></i>

  <script>
    const item = document.getElementById("item");
const add = document.getElementById("addItem");
const addedItems = document.getElementById("addedItems");

add.onclick = function() {
const itemValue = item.value;
const itemValue2 = ' ';

if (itemValue && itemValue2) {
  localStorage.setItem(itemValue, itemValue2);
  location.reload();
}
};

for (let a = 0; a < localStorage.length; a++) {
const itemValue = localStorage.key(a);
addedItems.innerHTML += `<div class= 'text'> <div>${itemValue}</div> <div> 
                          <i onclick='check("${itemValue}", ${a})' class="fas fa-check" id="${a}"></i><i 
                          onclick='deleteItem("${itemValue}")' class="fas fa-trash-alt"></i> 
                          </div></div> <br>`;

}

function check(itemValue, id) {
const elem = document.getElementById(id);
elem.classList.add("mystyle");
}

function deleteItem(itemValue) {
localStorage.removeItem(itemValue);
location.reload();
}

function deleteAll() {
localStorage.clear();
location.reload();
}
  </script>
</body>
</html>