質問編集履歴

タイトルの変更

2022/02/25 07:09

投稿

uratarosu

スコア49

test CHANGED Viewed

	@@ -1 +1 @@
1	- javaScriptで制作したToDoアプリをストレージ~~にデータ~~でも管理したい
1	+ javaScriptで制作したToDoアプリをlocalストレージで管理したい

test CHANGED Viewed

File without changes

JavaScript

コードの記載忘れ

2021/12/27 01:09

投稿

uratarosu

スコア49

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -102,6 +102,276 @@
+```　javaScript
+import "./styles.css";
+const onClickAdd = () => {
+ // テキストを取得
+ const inputText = document.getElementById("add-text").value;
+ document.getElementById("add-text").value = "";
+ creteIncompleteList(inputText);
+ addStrage();
+}
+// 未完了リストに追加する関数
+const creteIncompleteList = (text) => {
+ // divタグの生成
+ const div = document.createElement("div");
+ div.className = "list-row";
+ // liタグの生成
+ const li = document.createElement("li");
+ li.innerText = text
+ // divタグの子要素にliを設定
+ div.appendChild(li);
+ //未完了のリストに追加
+ document.getElementById("imcomplete-list").appendChild(div);
+ // button(完了)タグを生成
+ const completeButton = document.createElement("button");
+ completeButton.innerText = "完了";
+ completeButton.addEventListener("click", ()=>{
+   // 押された完了ボタンの親divを未完了リストから削除
+   deleteFromCompleteButton(completeButton.parentNode);
+   deleteStrage();
+   //完了リストに追加
+   const addTarget = completeButton.parentNode;
+   //TODO内容のテキストの取得
+   const text = addTarget.firstElementChild.innerText;
+   //div以下を初期化
+   addTarget.textContent = null;
+   // liを生成
+   const li = document.createElement("li");
+   li.innerText = text;
+   // 戻るボタン
+   const backButton = document.createElement("button")
+   backButton.innerText = "戻す";
+   //
+   // backButtonにイベントを追加
+   backButton.addEventListener("click",()=>{
+     const backTarget = backButton.parentNode;
+     const text = backTarget.firstChild.innerText;
+     // 削除
+     document.getElementById("complete-list").removeChild(backTarget);
+     creteIncompleteList(text);
+   })
+   const IncompleteButton = document.createElement("button");
+   IncompleteButton.innerText ="削除";
+   // backButtonにイベントを追加
+   IncompleteButton.addEventListener("click",()=>{
+     // 削除
+     document.getElementById("complete-list").removeChild(IncompleteButton.parentNode);
+     })
+   // divタグの子要素に各要路を追加
+   addTarget.appendChild(li);
+   addTarget.appendChild(backButton);
+   addTarget.appendChild(IncompleteButton);
+   //完了のリストに追加
+   document.getElementById("complete-list").appendChild(addTarget);
+ })
+ const deleteButton = document.createElement("button");
+ deleteButton.innerText = "削除";
+ deleteButton.addEventListener("click", ()=>{
+   // 押された削除ボタンの親divを未完了リストから削除
+   deleteFromCompleteButton(deleteButton.parentNode);
+ })
+ div.appendChild(completeButton);
+ div.appendChild(deleteButton);
+};
+// 未完了リストから指定の要素を削除
+const deleteFromCompleteButton = (target)=>{
+ document.getElementById("imcomplete-list").removeChild(target);
+}
+document.getElementById("add-button").addEventListener("click", () => onClickAdd());
+function getStrage() {
+    let list = localStorage.getItem("TodoList");
+    if (list === null) {
+      return [];
+    } else {
+      return JSON.parse(list);
+    }
+  }
+  function addStrage(item) {
+    let list = getStrage();
+    list.push(item);
+    setLocal(list);
+  }
+  function deleteStrage(index) {
+    let list = getStrage();
+    list.splice(index, 1);
+    localStorage.setItem("TodoList", JSON.stringify(list));
+  }
+  function setStrage(list) {
+    localStorage.setItem("TodoList", JSON.stringify(list));
+  }
+```
 ### 試したこと