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>