[Rails Colorpicker] 컬러 투수의 선택색을 특정 요소의 색깔과 연동시키다

이 기사가 할 수 있는 일.

아래 GIF에서 보듯이 컬러 투수가 선택한 색깔은 특정 요소가 가지고 있는 색깔과 실시간으로 연동할 수 있다!
GIF의 말은 이해하기 어려운데 이번 Foontawesome에서 준비한 머리핀의 색깔과 색 구덩이의 선택 색깔이 실시간으로 배합됐다.

생각

우선 다음과 같은 일을 고려하면 될 것 같다.
① 색상 선택기에서 선택한 색상 가져오기
② 해당 색상을 사용하여 핀 색상 변경
응, 아주 간단한 것 같아.
어쨌든 먼저 시험해 보자
아, 그나저나 컬러 투수는 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;
  });

이상은!!
수고하셨습니다!!