【javascript Todo list】js初心者がTodo listを作ってみた

todolistの作り方
ティロ

こんにちは、ティロといいます

js初心者がTodo listを作ってみました!

 

javascript初心者にオススメといわれるTodo listを作っていきます。

Todo listの見た目はBootstrapを使っているので以下のコードをhead内にコピペします。

 

Bootstrapの読み込み

後で拡張することも考えてjqueryも読み込みます。

ごみ箱のアイコンを使いたいのでFont awesomeをBootstrapの下で読み込んでいます。

Bootstrap(ブートストラップ)とはcssとjavascriptのフレームワークです。Bootstrapを使うとcssを書かなくても簡単にデザインを作ることが出来ます。

また今回は使用しませんが、Bootstrapにはアニメーションの機能もあり、例えばカルーセルやモーダルなどがあります。

Bootstrapについて知りたい方はこちらの記事に詳しく記載しました。良ければご覧ください。

関連記事

Bootstrapってなに?Bootstrapの基本的な使い方が知りたい Bootstrapの機能を詳しく知りたい!という方はこちらの書籍がおススメです。Bootstrapの機能はほぼ載っています。[…]

bootstrapの導入から使い方

 

Todo listの見た目を整える

htmlは以下のように書きました。

class=”container”などはBootstrapの機能です。指定のクラス名をつけるだけでデザインが作れます。

リストを追加すると<!– jsでコードを挿入するところ–>の下にjavascriptでコードを埋め込みます。

cssは以下の通りです。cssの説明は割愛させていただきます。

見た目はこんな感じになりました。

todolistの見た目

次にjavascriptを書いてみます。

 

To do listのjavascript

まずはDOMの操作をします。

body下のdiv要素と完了率を示す#rateElementを取得します。countは完了率の計算に使用します。

追加する機能を作る

まずは追加ボタンをクリックしたらリストが追加される機能を作ります。

追加ボタンにはonclick=”addList()が指定されています。クリックするとaddList関数が実行されます。

①inputの値を読み込みます。

②追加したらinputの値をリセットしています。

③inputの値が空でなかったらinsertAdjacentHTMLでコードをhtmlに挿入します。

insertAdjacentHTMLの使い方はinsertAdjacentHTML(‘どこに挿入するか’ , ‘挿入する文字列’)です。

どこに挿入するかは以下の通りです。

beforebegin親要素の直前
afterbegin親要素内の先頭
beforeend親要素内の末尾
afterend親要素の直後

③score(count)は完了率のための関数です。あとで詳しく説明します。

完了率を計算する関数を作る

リストのチェックリストをクリックしたときとリストを消したときにこの関数を実行します。

①リストの数を取得しています。

②パーセントで計算を行い、小数点以下は四捨五入しています。

③100%を超えたときのエラー処理です。

リストを消す

リストを消す動作を実装します。

addEventListenerでクリックしたらクリックしたリストを消すようにしています。

①クリックしたリストを消しています。

②クリックしたリストにチェックがついていた場合は、カウントを-1します。

③チェックがついていない場合は-1せずにそのままscore(count)を実行します。

④チェックがされたら .checked をつけてカウントを+1します。

 

これでおしまいです。

最後にデモをご覧ください。

Todo listを動かしてみる

 

See the Pen
vYXKdvE
by hiro web制作とブログ (@hiroweb9)
on CodePen.

 

ティロ

いかがでしたでしょうか?

バグや疑問点などありましたらお手数ですが、ご連絡して頂くと幸いです。

ここまで読んで頂き、ありがとうございました!

 

javascriptおすすめ書籍はこちら

 


 


 


 


コラム

Bootstrapの機能をもっと知りたいからはこちらの記事をどうぞ!

グリッドシステムからカルーセル、ドロップダウンメニューなどのアニメーションまで解説しています!

Bootstrapの記事一覧へ