しん随筆

Fラン大学卒の2年間の空白期間持ち豆腐メンタルがやる気出してます。

JavaScriptでToDoアプリを作る

 今回はToDoアプリを作ったので、作り方をまとめていこうと思います。

 

 今回のToDoアプリをJavaScriptで作り、データベースには繋がっていないので、更新する度に中身が全消しになってしまいますので、その点はご留意ください。

 

1.HTMLの準備

 今回はToDoを追加するためのinputタグとaddボタン、また追加先になるulタグを用意します。

 

<body>
<h1>ToDoリスト</h1>

<input id="new-todo" type="text"><button id="add-button">ADD</button>

<ul>
</ul>
<script src="app.js"></script>
</body>

 

2.CSSでスタイリング

 完了したリストに対して、ラインを上書きしたいので、今はまだ記述してませんが、doneクラスに対してtext-decoration:line-through;をかけます。

 

.done{
text-decoration: line-through;
}

 

3.JavaScriptで動的処理を作る

 まず、addボタンのDOM要素を取得し、イベントを追加します。

 

 イベントの内容は、createElement('li')でリスト要素を作り、そのリストのinnerTextにinput.valueを反映させます。

 それを<ul>にappendChildをかけ、<ul>に作成された<li>を追加します。

 

 次に、doneボタンを<li>に付けます。

 ここはほとんど、<ul>に<li>を追加するのと同じ要領ですので飛ばします。

 

 次に、作成されたdoneボタンをクリックした時のイベントを追加します。

 この時のポイントとしては、doneボタンに対して、"closest('li')"を使うことです。これは、一番近い親要素から<li>要素を探します。

 これで一番近い、liに対して"done"クラスを追加します。これによってCSSが適用され、doneボタンを押すとリスト要素に横線が入ります。

 これで簡単なToDoアプリの完成です。

 

(()=>{
const addButton = document.getElementById('add-button');
addButton.addEventListener('click', ()=>{
const input = document.getElementById('new-todo');
const li = document.createElement('li');
li.innerText = input.value;
const ul = document.querySelector('ul');
ul.appendChild(li);

const doneButton = document.createElement('button');
doneButton.innerText = "DONE";
li.appendChild(doneButton);
doneButton.addEventListener('click', ()=>{
doneButton.closest('li').classList.add('done');
})
})
})();

 

 今回は「ムーザルちゃんねる」さんの動画を参考にさせていただきました。

 いつもありがとうございます🙇‍♂️

 

youtu.be

 

youtu.be