to_do_liste_mit_localstorage.php

Quell Code

<style>
  * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  height: 100%;
  background: #111;
}

h1 {
  font-size: 3rem;
  font-weight: 50;
  margin: 1rem 0 3rem;
  text-align: center;
  color: #fff;
  font-family: "Hint", sans-serif;
}

.styling {
  font-weight: 800;
  color: lime;
}

.input_div {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.input_div .input {
  padding: 0.5rem 1rem;
  height: 50px;
  outline: none;
  background-color: #fff;
  width: 450px;
  font-size: 1.15rem;
  margin: 0.25rem;
  border-radius: 25px;
  border: none;
}
.input_div .add {
  height: 50px;
  width: 50px;
  border-radius: 25px;
  font-size:30px;
  font-weight:900;
  outline: none;
  border: none;
  background: lime;
  color: #fff;
  margin: 0.25rem;
  cursor: pointer;
}
.input_div .add:hover {
  opacity: 0.7;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-top: 2rem;
}
.container .item {
  padding: 0.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 4px solid #fff;
}
.container .item .item_input {
  background: none;
  outline: none;
  color: #fff;
  border: none;
  width: 350px;
  font-size: 1.4rem;
}
.container .item .item_input:not(:disabled) {
  background-color: #fff;
  color: #000;
  border: 4px solid lime;
}
.container .item .editButton {
  font-size: 1.4rem;
  margin: 0 0.5rem;
  font-family: "Hind", sans-serif;
  background: none;
  outline: none;
  border: none;
  color: lime;
  cursor: pointer;
}
.container .item .removeButton {
  font-size: 1.4rem;
  font-family: "Hind", sans-serif;
  background: none;
  outline: none;
  border: none;
  color: #E00;
  cursor: pointer;
}
</style>
<h1><span class="styling">TODO</span>List</h1>
<div class="input_div">
  <input type="text" class="input" placeholder="TodoList" />
  <button class="add">+</button>
</div>
<div class="container"></div>
<script>
  const add = document.querySelector(".add");
const input = document.querySelector(".input");
const container = document.querySelector(".container");

//if (window.localStorage.getItem("ToDos") == undefined) {
//var todos = [];
//window.localStorage.setItem("ToDos", JSON.stringify(todos));
//}

//var todosEX = window.localStorage.getItem("ToDos");
//var todos = JSON.parse(todosEX);

class Item {
  constructor(name) {
    this.createItem(name);
  }

  createItem(name) {
    let input = document.createElement("input");
    input.value = name;
    input.disabled = true;
    input.classList.add("item_input");
    input.type = "text";

    let itemBox = document.createElement("div");
    itemBox.classList.add("item");

    let editButton = document.createElement("button");
    editButton.innerHTML = "EDIT";
    editButton.classList.add("editButton");

    let removeButton = document.createElement("button");
    removeButton.innerHTML = "REMOVE";
    removeButton.classList.add("removeButton");

    container.appendChild(itemBox);
    itemBox.appendChild(input);
    itemBox.appendChild(editButton);
    itemBox.appendChild(removeButton);

    editButton.addEventListener("click", () => this.edit(input, name));
    removeButton.addEventListener("click", () => this.remove(itemBox, name));
  }

  edit(input, name) {
    if (input.disabled == true) {
      input.disabled = !input.disabled;
    } else {
      input.disabled = !input.disabled;
      //let indexof = todos.indexOf(name);
      //todos[indexof] = input.value;
      //window.localStorage.setItem("ToDos", JSON.stringify(todos));
    }
  }

  remove(itemBox, name) {
    itemBox.parentNode.removeChild(itemBox);
    //let index = todos.indexOf(name);
    //todos.splice(index, 1);
    //window.localStorage.setItem("ToDos", JSON.stringify(todos));
  }
}

const check = () => {
  if (input.value != "") {
    new Item(input.value);
    //todos.push(input.value);
    //window.localStorage.setItem("ToDos", JSON.stringify(todos));
    input.value = "";
  }
};

add.addEventListener("click", check);
window.addEventListener("keydown", (e) => {
  if (e.which == 13) {
    check();
  }
});

//for (var v = 0; v < todos.length; v++) {
//  new Item(todos[v]);
//}

new Item("Test Todo");

</script>