JavaScriptsでTODOアプリを作ってみた時の備忘録1
Udemyのセールで気になっていたJSコースを購入し、受講してみた。
その時のアレコレを備忘録として書き記します。
動作イメージ
TODOを追加する場合
1. タスクを入力し、追加ボタンをクリック
2. 【未完了のTODO】に追加される
タスクを追加すると【完了】【削除】ボタンが横に付いてくる
未完了のTODOタスクを削除する場合
1. タスクの横にある【削除】ボタンをクリックすることで消える。
未完了のTODOタスクを完了する場合
1. タスクの横にある【完了】ボタンをクリックすることで下の【完了したTODO】に移動する。
2. 【戻す】をクリックすると、未完了のTODO一覧にタスクが移動する
HTML/CSSコード
HTMLコード
<!DOCTYPE html> <html> <head> <title>TODO_TASK</title> <meta charset="UTF-8" /> <link rel="stylesheet" href="./src/styles.css"> </head> <body> <div class="input-area"> <input id="add-text" placeholder="TODOを入力" /> <button id="add-button">追加</button> </div> <div class="incomplete-atea"> <p class="title">未完了のTODO</p> <ul id="incomplete-list"> <div class="list-row"> <li>TODOです</li> <button>完了</button> <button>削除</button> </div> <div class="list-row"> <li>TODOです</li> <button>完了</button> <button>削除</button> </div> </ul> </div> <div class="complete-area"> <p class="title">完了したTODO</p> <ul id="complete-list"> <div class="list-row"> <li>TODOでした</li> <button>戻す</button> </div> </ul> </div> <script src="src/index.js"></script> </body> </html>
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: #fff; cursor: pointer; } li { margin-right: 8px; } .input-area { background-color: #c1ffff; width: 400px; height: 30px; padding: 8px; margin: 8px; border-radius: 8px; } .incomplete-atea { background-color: #c6ffe2; 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: 0px; font-weight: bold; color: #666; } .list-row { display: flex; align-items: center; padding-bottom: 4px; }
HTMLコードのポイント
ポイントとしては、【未完了のTODO】と【完了したTODO】に既にタスクが記述されている。
理由として、JSは仮想DOM上のHTMLタグを使って追加や削除をを行う事で画面描画を行っているそうだ。
なので、JSで作成/削除するタグの見本を記述しているだけである。最終的には削除する。
次からJSのコードの内容を操作と共に見ていく。