![見出し画像](https://assets.st-note.com/production/uploads/images/41981660/rectangle_large_type_2_bff7d78c05a42526841b125ed846470d.jpeg?width=1200)
Photo by
ryokan1123
【本日の活動】JavaScriptでToDoアプリを作成
こんにちは(@t_kun_kamakiri)
本日は12月30日なので、ちょっとだけ勉強をしてもう活動はお休みにしようかなと思います。
UdemyでReactのためのJavaScript基礎を学ぶ
初心者にもわかりやすいUdemyの講座があったのでセール時の1000円くらいで購入しておいたので、年末年始に勉強としています。
Reactを学ぶにあたってJavaScriptの基礎ができていないと理解が浅くなるのでまずはJavaScriptを勉強しています('ω')ノ
JavaScriptでToDoアプリを作成
Udemyの講座に沿ってJavaScriptでToDoアプリを作成しました。
codesandoboxってやつが環境構築なしでJavaScriptやReactが使えるみたいでとても便利です。
githubとの連携もできるようで便利です。
↓こちらからできます。
コードも最後に載せておきました。
完成したTODOアプリ
全体のコードも載せておきます。
index.html
<!DOCTYPE html>
<html>
<head>
<title>To Do アプリ</title>
<link rel="stylesheet" href="src/styles.css">
<meta charset="UTF-8" />
</head>
<body>
<div class="input-area">
<input id="add-text" type="text" placeholder="TODOを入力">
<button id = "add-button">追加</button>
</div>
<div class="imcomplete-area">
<p class="title">未完了のTODOです</p>
<div id="imcomplete-list">
<ul>
</ul>
</div>
</div>
<div class="complete-area">
<p class="title">完了したTODO</p>
<div id="complete-list">
<ul>
</ul>
</div>
</div>
<script src="src/index.js"></script>
</body>
</html>
src/index.js
ここがJavaScriptのコードの部分ですね。
import "./styles.css";
const onClickAdd = () => {
// テキストを取得
const inputText = document.getElementById("add-text").value;
document.getElementById("add-text").value = "";
creteIncompleteList(inputText);
}
// 未完了リストに追加する関数
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);
//完了リストに追加
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());
src/style.css
body {
font-family: sans-serif;
}
input{
border-radius: 16px;
border: none;
padding: 6px 16px;
outline: none
}
button{
border-radius: 16px;
border: none;
padding: 4px 16px;
}
button:hover{
background-color: #ff7fff;
color: #ff7;
cursor: pointer;
}
li{
margin-right: 8px;
}
.input-area {
background-color: #c1ffff;
width: 400px;
height:30px;
padding: 8px;
margin: 8px;
border-radius: 8px;
}
.imcomplete-area {
background-color: #c6ffc6;
width: 400px;
min-height:200px;
padding: 8px;
margin: 8px;
border-radius: 8px;
}
.complete-area {
background-color: #ffffe0;
width: 400px;
min-height:200px;
padding: 8px;
margin: 8px;
border-radius: 8px;
}
.title {
text-align: center;
margin-top: 0;
font-weight: bold;
color: #666;
}
.list-row{
display: flex;
align-items: center;
padding-bottom: 4px;
}
一部Udemyの講座に加えてアレンジを加えました。
明日は12月31日ですが、ちょっとだけ仕事が残っているので、仕事をしたらゆっくりしよう('ω')ノ
Twitter➡@t_kun_kamakiri
Instagram➡kamakiri1225
ブログ➡宇宙に入ったカマキリ(物理ブログ)
ココナラ➡物理の質問サポートサービス
この記事が気に入ったらサポートをしてみませんか?