【本日の活動】JavaScriptでToDoアプリを作成

物理・プログラミング・Python、Web制作・自己啓発

2020年12月30日 20:55

こんにちは（@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
ブログ➡宇宙に入ったカマキリ（物理ブログ）
ココナラ➡物理の質問サポートサービス

この記事が気に入ったらサポートをしてみませんか？