Todoアプリ(JSのみ)
1. HTMLで木構造を作る
2. CSSでマークアップ
- inputなどの要素は、全体で共通のスタイルを当てることが多いので、クラス指定をせず要素全てに適用する
- 要素が増えていく領域は、min-heightを使うことで、最低値の確保ができ、要素が増えていくと動的に変更させることもできる
- 生のCSSを扱うことは少ない
- コンポーネントライブラリやCSSフレームワークを使うことがほとんど
3. JS
AddEventListener
- 第一引数にアクション
- 第二引数に実行する関数をとる
getElementByID
- HTML要素の取得に用いる
createElement
- HTML要素の作成に用いる
.appendChild
- HTML要素の階層構造の作成に用いる
.closest
- 指定したHTML要素から最も近いものを取得する
- 削除ボタンで特定の要素を削除する場合などで使える
- 変数として宣言されたタイミングの要素が保存されるのではなく、画面上の要素の動きと同期して変化する
動作が循環してしまう、ってなったらその動作を関数化して、再起的に呼び出すことで実装できる 同じ動作を実現するのに、複数の方法が存在する
感想
クソめんどくさい HTMLのidベースで要素の取得、削除を行なっているので、元のHTMLが編集されるとやばそう 上記の理由から、削除ボタンなどを単純に使い回すことができない。それぞれのボタンに親要素のIDを指定しないと他のものを消してしまいそう