JSFiddle - React, Tailwind, and code Playground

by reporter

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Shopping List</h1>
  <p>Get it done today</p>
  <input type="text" placeholder="Type to enter">
  <button type="button">Enter</button>
  <ul>
    <li class="li0"><button class="toggle-button">Delete</button>  <span>Notebook</span></li>
    <li class="li1"><button class="toggle-button">Delete</button>  <span>Jello</span></li>
    <li class="li2"><button class="toggle-button">Delete</button>  <span>Rice</span></li>
    <li class="li3"><button class="toggle-button">Delete</button>  <span>Spinach</span></li>
    <li class="li4"><button class="toggle-button">Delete</button>  <span>Birthday Cake</span></li>
    <li class="li5"><button class="toggle-button">Delete</button>  <span>Candles</span></li>
  </ul>
  <script src="index.js" charset="utf-8"></script>
</body>
</html>

CSS

li{
  padding: 3px;
}
p{
  margin: 0;
}
.coolTitle {
  text-align: center;
  font-family: 'Oswald', Helvetica, sans-serif;
  font-size: 40px;
  transform: skewY(-10deg);
  letter-spacing: 4px;
  word-spacing: -8px;
  color: tomato;
  text-shadow:
    -1px -1px 0 firebrick,
    -2px -2px 0 firebrick,
    -3px -3px 0 firebrick,
    -4px -4px 0 firebrick,
    -5px -5px 0 firebrick,
    -6px -6px 0 firebrick,
    -7px -7px 0 firebrick,
    -8px -8px 0 firebrick,
    -30px 20px 40px dimgrey;
}

.done {
  text-decoration: line-through;
}

JavaScript

document.querySelector("button").addEventListener("click", function() {
  if (document.querySelector("input").value.length > 0) {
    input();
  }
})


document.querySelector("input").addEventListener("keypress", function(event) {
  if (document.querySelector("input").value.length > 0 && event.keyCode === 13) {
    input();
  }
})


deleteList();
strikeThrought();


function input() {
  var input = " " + document.querySelector("input").value;
  var li = document.querySelector("ul").appendChild(document.createElement("li"));
  var button = li.appendChild(document.createElement("button"));
  button.innerHTML = "Delete";
  var span = li.appendChild(document.createElement("span"));
  span.innerHTML = input;
  document.querySelector("input").value = "";

  deleteList();
  strikeThrought();
}


function deleteList() {
  for (var i = 0; i < document.querySelectorAll("li button").length; i++) {
    document.querySelectorAll("li button")[i].addEventListener("click", function() {
      for (var j = 0; j < document.querySelectorAll("li").length; j++) {
        this.parentNode.remove()
      }
    })
  }
}


function strikeThrought() {
  for (var i = 0; i < document.querySelectorAll("span").length; i++) {
    document.querySelectorAll("span")[i].addEventListener("click", function() {
      alert("d");
      this.classList.toggle("done");
    })
  }
}

function strikeThroughtNew(newbject) {
  for (var i = 0; i < document.querySelectorAll("span").length; i++) {
    document.querySelectorAll("span")[i].addEventListener("click", function() {
      alert("d");
      this.classList.toggle("done");
    })
  }