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を指定しないと他のものを消してしまいそう