HTMLでの実装
HTMLは簡単な部分の実装です。
index.html
<!DOCTYPE html>
<html>
<head>
<title>To-doアプリ</title>
<meta charset="UTF-8" />
</head>
<body>
<div class="input-area">
<input id="add-text" placeholder="Todoを入力" />
<button id="add-button">追加</button>
</div>
<div class="incomplete-area">
<p class="title">未完了</p>
<ul id="incomplete-list">
<div class="list">
<li>TODOです</li>
<button>完了</button>
<button>削除</button>
</div>
</ul>
</div>
<div class="complte-area">
<p class="title">完了</p>
<ul>
<div class="list-row">
<li>TODOでした</li>
<button>戻す</button>
</div>
</ul>
</div>
<script src="src/index.js"></script>
</body>
</html>
JavaScriptの実装
追加機能を足すだけでcssや削除機能などはここでは実装しないです。
参考にしてください。
import "./styles.css";
const ClickAdd = () => {
//テキストボックスの値を取得し、初期化する
const Text = document.getElementById("add-text").value;
//alert(inputText); // アラートで入力欄の内容が出てくる
document.getElementById("add-text");
//div生成
const div = document.createElement("div");
div.className = "list";
//console.log(div);
//liタグ生成
const li = document.createElement("li");
li.innerText = Text;
//console.log(li);
//divタグの子要素に各要素設定
div.appendChild(li);
//未完了追加
document.getElementById("incomplete-list").appendChild(div);
};
document
.getElementById("add-button")
.addEventListener("click", () => ClickAdd());
画像
完了を追加すると未完了の部分に完了が追加されます。
削除機能実装
JavaScriptで削除機能を実装していきます。
index.js
//省略
//押された削除ボタンdivを未完了から削除
const deleteTaret = deleteButton.parentNode;
//console.log(deleteTaret);
document.getElementById("incomplete").removeChild(deleteTaret);
});
//console.log(deleteButton);
//省略
//未完了リスト追加
document.getElementById("incomplete").appendChild(div);
parentNodeは親ノードを取得します。
getElementByIdは指定したIDにマッチする要素を取得します。
removeChildはノードを削除します。
appendChildは動的にWebサイトに要素を追加したい時に使います。
index.html
#省略
<div class="incomplete-area">
<p class="title">未完了のTODO</p>
<ul id="incomplete">
<div class="list">
<li>TODO</li>
<button>完了</button>
<button>削除</button>
</div>
#省略
削除ボタンを押すと消えます。
追加機能のボタン実装
追加機能のボタン実装をしていきます。参考にしてみてください。
index.js
//button(完了)タグ生成
const completeButton = document.createElement("button");
completeButton.innerText = "完了";
completeButton.addEventListener("click", () => {
alert("完了");
});
//console.log(completeButton);
//button(削除)タグ生成
const deleteButton = document.createElement("button");
deleteButton.innerText = "削除";
deleteButton.addEventListener("click", () => {
alert("削除");
});
index.html
<div class="incomplete">
<p class="title">未完了のTODO</p>
<ul id="incomplete-list">
<div class="list">
<li>TODOです</li>
<button>完了</button>
<button>削除</button>
</div>
<div class="list">
<li>TODOです</li>
<button>完了</button>
<button>削除</button>
</div>
</ul>
</div>
これで追加ボタンを押すと追加したいTODOが追加されます。