diff --git a/otamesi/index.html b/otamesi/index.html new file mode 100644 index 0000000..1e62665 --- /dev/null +++ b/otamesi/index.html @@ -0,0 +1,25 @@ + + + + + + + + Document + + + +
+

TODO LIST

+

左クリック：打ち消し線

+

右クリック：リストの削除

+
+ +
+ +
+ + + \ No newline at end of file diff --git a/otamesi/index.js b/otamesi/index.js new file mode 100644 index 0000000..0ebefa6 --- /dev/null +++ b/otamesi/index.js @@ -0,0 +1,65 @@ +const form = document.getElementById("form"); +const input = document.getElementById("input"); +const ul = document.getElementById("ul"); +const todos = JSON.parse(localStorage.getItem("todos")); + +if(todos){ + todos.forEach(todo => { + add(todo); +}) +} + +form.addEventListener("submit", function(event){ + event.preventDefault(); + console.log(input.value); + add(); +}); + +function add(todo) { + let todoText = input.value + + if (todo){ + todoText = todo.text; + } + + if (todoText){ + const li = document.createElement("li"); + li.innerText = todoText; + li.classList.add("list-group-item"); + + if(todo && todo.completed){ + li.classList.add("text-decoration-line-through"); + } + + li.addEventListener("contextmenu", function + (event){ + event.preventDefault(); + li.remove(); + saveData(); + }); + + li.addEventListener("click", function(){ + li.classList.toggle("text-decoration-line-through"); + saveData(); + }) + ul.appendChild(li); + input.value = ""; + saveData(); + } +} + +function saveData() { + const lists = document.querySelectorAll("li"); + let todos = []; + + lists.forEach(list =>{ + let todo = { + text: list.innerText, + completed: list.classList.contains + ("text-decoration-line-through") + }; + todos.push(todo); + }); + localStorage.setItem("todos", JSON.stringify(todos)); +} + diff --git a/otamesi/style.css b/otamesi/style.css new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/otamesi/style.css