【Rails Colorpicker】カラーピッカーの選択色を特定要素の色と連動させる

この記事でできるようになること

以下のGIFのように、カラーピッカーで選択した色がリアルタイムで、何か特定の要素の持つ色と連動させることができるようになる！
GIFではちょっとわかりにくいですが、今回はFontawesomeで用意したピンの色と、カラーピッカーでの選択色とをリアルタイムで連携させてます。

考え方

以下のことをやっていくとなんかいけそうだとまず考える。
①カラーピッカーで選択している色を取得する
②その選択色をもってして、ピンのcolorを変更する

んー簡単そう。
とりあえず、やってみよ

あ、ちなみにカラーピッカーはHTML5の標準搭載の機能でした
めっちゃすごない？？？！！
これだけでカラーピッカー実装できるんですよ？。。。

index.html

<input type="color">

実装コーディング

index.html.erb

<%# ↓これがアイコン %>
<i class="fas fa-location-arrow" id="arrow-icon"></i>

<%# ↓これがカラーピッカー %>
<input type="color" class="arrow-icon-color-selector" id="arrow-icon-colorーselector" value="#e66465">

index.js

  // まずカラーピッカーの要素をcolorpickerという変数に入れる
  const colorpicker = document.querySelector('.arrow-icon-color-selector');

  // 次に、ピンの要素をarrowiconという変数に入れる
  const arrowicon = document.getElementById('arrow-icon');

  colorpicker.addEventListener('input', function(e) {  // カラーピッカーの入力値(inputの値)が変更されたら{}内の処理を実行する
    arrowicon.style.color = e.target.value; // アイコンのCSSのcolorプロパティの値を右辺の値にする。右辺の値とはすなわち、カラーピッカーでの選択値である。
 });

コーディングもめっちゃシンプルでした。。。。
応用すれば、画面の背景を変えたりできるので是非に！

例えばこんな感じにしたかったら

index.js

  const colorpicker = document.querySelector('.arrow-icon-color-selector');
  const arrowicon = document.getElementById('arrow-icon');

  colorpicker.addEventListener('input', function(e) {
    document.body.style.backgroundColor = e.target.value;
  });

以上です！！
お疲れ様でした！！