お疲れ様です。
昨日の続きから進めていきます。
昨日の時点では、カラーピッカーで適当に色を選択してもカラーコードは変化しませんでしたが、今日はカラーコードが表示されるようにしました。
id名 ColorPicker から値(value)を取得し、それを表示。(2枚目の画像)
ただ、毎回 document.querySelector.....と書いていては、最終的にコードが長くなっていって、タイプミスもするし、大変になってくるので、値を取得したコード達をそれぞれ定数宣言し、コンパクトにまとめる。とのことです。
addEventlistener という、ユーザーの操作(クリック、マウス移動など)に応じて特定の関数を実行するメソッドを用いて、カラーピッカーで色が選択されたら、 colorBg (#ColorPickerの値を取得する)を実行するようにコードを書くと、最後の画像のように適当に選んだ色の、カラーコードが表示されました!
今後は背景色も、カラーピッカーで選ばれた色が反映されるように設定していく予定です。
基本的な内容が多いところかと思いますが、こういったところをちゃんと分かっていないと後々大変だと思うので、何度でも読み返してしっかり理解していきたいところです