こんにちは、ティロといいます
js初心者がTodo listを作ってみました！
javascript初心者にオススメといわれるTodo listを作っていきます。
Todo listの見た目はBootstrapを使っているので以下のコードをhead内にコピペします。
Bootstrapの読み込み
1 2 3 4 5 | <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> |
ごみ箱のアイコンを使いたいのでFont awesomeをBootstrapの下で読み込んでいます。
Bootstrap(ブートストラップ)とはcssとjavascriptのフレームワークです。Bootstrapを使うとcssを書かなくても簡単にデザインを作ることが出来ます。
また今回は使用しませんが、Bootstrapにはアニメーションの機能もあり、例えばカルーセルやモーダルなどがあります。
Bootstrapについて知りたい方はこちらの記事に詳しく記載しました。良ければご覧ください。
Bootstrapってなに？Bootstrapの基本的な使い方が知りたい Bootstrapの機能を詳しく知りたい！という方はこちらの書籍がおススメです。Bootstrapの機能はほぼ載っています。[…]
Todo listの見た目を整える
htmlは以下のように書きました。
class=”container”などはBootstrapの機能です。指定のクラス名をつけるだけでデザインが作れます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <body> <div class="container bg-dark my-5 py-5" id="toDoLists"> <h1 class="text-center text-white py-4">To do list</h1> <div class="listInput ml-5 mb-5"> <form name="listform"> <input type="text" id="do" name="listname" placeholder="やることを入力してください"> <button type="button" class="btn btn-outline-light" onclick="addList()">追加</button> </form> </div> <div class="rateElement"> <p class="text-white " id="rateElement"></p> </div> <!-- jsでコードを挿入するところ--> </div> </body> |
リストを追加すると<!– jsでコードを挿入するところ–>の下にjavascriptでコードを埋め込みます。
cssは以下の通りです。cssの説明は割愛させていただきます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | @charset "UTF-8"; .checkbox-input{ display: none; } .checkbox-parts{ padding-left: 30px; position:relative; margin-right: 20px; } .checkbox-parts::before{ content: ""; display: block; position: absolute; top: 4px; left: 0; width: 15px; height: 15px; border: 1px solid #999; border-radius: 2px; } .checkbox-input:checked + .checkbox-parts{ opacity: 0.8; } .checkbox-input:checked + .checkbox-parts::after{ content: ""; display: block; position: absolute; top: -5px; left: 5px; width: 7px; height: 14px; transform: rotate(40deg); border-bottom: 3px solid #1e90ff; border-right: 3px solid #1e90ff; } .listInput { width: 80%; } .listInput input { display: inline-block; width: 60%; line-height: 45px; height: 45px; } button { display: inline-block; } .trash { padding: 3px; } .trash:hover { opacity: 0.5; cursor: pointer; } .dummycode { display: none; } .rateElement p{ font-size:1.2rem; } |
見た目はこんな感じになりました。
次にjavascriptを書いてみます。
To do listのjavascript
まずはDOMの操作をします。
1 2 3 | let $toDoLists = document.querySelector('#toDoLists'); let $rateElement = document.getElementById('rateElement'); let count = 0; |
body下のdiv要素と完了率を示す#rateElementを取得します。countは完了率の計算に使用します。
追加する機能を作る
まずは追加ボタンをクリックしたらリストが追加される機能を作ります。
1 2 3 4 5 6 7 8 9 10 11 12 | function addList() { let $addlist = document.getElementById('do'); let addlistValue = $addlist.value; //① document.listform.reset();//② let addCode = '<div class="row justify-content-between mt-4"><div class="ml-4"><label class="d-block"><input type="checkbox" class="checkbox-input"><span class="checkbox-parts text-white">' + addlistValue + '</span></label></div><div class="mr-4"><i class="fas fa-trash-alt text-white trash"></i></div></div>'; if (addlistValue !== "") { $toDoLists.insertAdjacentHTML('beforeend', addCode); //③ }; score(count); }; |
追加ボタンにはonclick=”addList()が指定されています。クリックするとaddList関数が実行されます。
①inputの値を読み込みます。
②追加したらinputの値をリセットしています。
③inputの値が空でなかったらinsertAdjacentHTMLでコードをhtmlに挿入します。
insertAdjacentHTMLの使い方はinsertAdjacentHTML(‘どこに挿入するか’ , ‘挿入する文字列’)です。
どこに挿入するかは以下の通りです。
| beforebegin | 親要素の直前 |
| afterbegin | 親要素内の先頭 |
| beforeend | 親要素内の末尾 |
| afterend | 親要素の直後 |
③score(count)は完了率のための関数です。あとで詳しく説明します。
完了率を計算する関数を作る
リストのチェックリストをクリックしたときとリストを消したときにこの関数を実行します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | function score (count) { let $listwhole = document.querySelectorAll('.checkbox-input').length;① if ($listwhole>0) { rate = Math.round(count / $listwhole * 100);② if(rate>100) { $rateElement.textContent = 'エラー';③ } else { $rateElement.textContent = '完了率は'+rate+'%です。'; } } else { $rateElement.textContent = ''; } } |
①リストの数を取得しています。
②パーセントで計算を行い、小数点以下は四捨五入しています。
③100%を超えたときのエラー処理です。
リストを消す
リストを消す動作を実装します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | $toDoLists.addEventListener('click', (e) => { if (e.target.classList.contains('trash')) { if(e.target.parentElement.classList.contains('checked')) { e.target.parentElement.parentElement.remove();//① count--;//② score(count); } else { e.target.parentElement.parentElement.remove();//③ score(count); } } if (e.target.classList.contains('checkbox-parts')) { let check = e.target.parentElement.parentElement.nextElementSibling; check.classList.toggle('checked'); if(check.classList.contains('checked')) {//④ count++; score(count); } } }); |
addEventListenerでクリックしたらクリックしたリストを消すようにしています。
①クリックしたリストを消しています。
②クリックしたリストにチェックがついていた場合は、カウントを－１します。
③チェックがついていない場合は－１せずにそのままscore(count)を実行します。
④チェックがされたら .checked をつけてカウントを＋１します。
これでおしまいです。
最後にデモをご覧ください。
Todo listを動かしてみる
See the Pen
vYXKdvE by hiro web制作とブログ (@hiroweb9)
on CodePen.
いかがでしたでしょうか？
バグや疑問点などありましたらお手数ですが、ご連絡して頂くと幸いです。
ここまで読んで頂き、ありがとうございました！
javascriptおすすめ書籍はこちら
コラム
Bootstrapの機能をもっと知りたいからはこちらの記事をどうぞ！
グリッドシステムからカルーセル、ドロップダウンメニューなどのアニメーションまで解説しています！