HTMLのcolor-innerクラス内にある赤、緑、青のバーの<input>タグ内に追記します。

html

minは最小値、maxは最大値です。ここではRGB方式の0～255の範囲になるように指定します。
id名をそれぞれ付けます。同じ名前は付けられないので、各色それぞれに名前を付けます。（BGはBackgroundの略です）
画面上は変化ありません。

次に、このバーを動かしたときに反応するJavaScriptを書いていきます。
「関数」というものを使用すると実現できます。

JavaScript

jsフォルダに保存している「colorchecker.js」ファイルをクリックし、コードを書き始めます。
1行目はメモ書きになります。これからどんどん書いていきますので、どれがなんだか分からなくならないように目印です。
ちなみにHTMLやCSSもメモ書き機能があります。（メモ書き記号はそれぞれ違うのでご注意）
関数は「function」で指定します。functionの後の「setRGB()」ですが、これはsetRGB()という名前の関数を呼び出します、という宣言です。
関数名は自分で分かりやすい名前にすると良いです。｛｝の中に、setRGB()とはどんなことをするのかという指定を書き込みます。

画面上で、赤、緑、青のバーの位置が変わった時にその値を取得したいので、HTMLとJavaScriptにそれぞれ追記していきます。
HTMLには先ほどの続きで、<input>タグ内に「onchange」イベントを追加します。
これは、要素の値が変更された時、発生するイベントになります。これを指定することにより、イベント発生をお知らせすることができます。

html

onchangeで呼び出したい関数を指定すると、画面上で値が変更された時にこの関数を呼び出すイベントが発生することになります。
JavaScriptに書いたsetRGB()を呼び出すようにします。

呼び出す関数の中身を書きます。

JavaScript

赤いバーから見ていきます。letは変数という意味です。
document.getElementById（"rBG"）.value（※ドキュメント.ゲット エレメント バイ アイディーと読みます）は画面上のid名rBGの要素の値を取ってくる、そしてそれを「r」という変数名にします、という宣言です。
ちょっと難しいですが、JavaScriptではこんな書き方をします。CSSみたく、単語の間に「-」を付けられないので、大文字も駆使しています。
緑、青も同じように書いていきます。

これで、画面上でバーが動いた時、赤・緑・青それぞれの値（0～255のどれか）を取ってこれるようになりました。この時点では、赤・緑・青それぞれ個別に値を取り出すことになりますので、表示をひとまとめにする必要があります。

画面から取ってくる値は0～255の10進数なので、これを16進数に変換しないといけません。ひとまとめにする前に、こちらの処理を先に行います。 　
setRGB()の続きを書く前に、16進数変換関数を追加します。※function setRGB()の｛｝内に書かず、下に追加します。

JavaScript

hex()という名前を付けた関数を宣言します。（hexは16進数の略です）
hex(x)のxですが、ここにはxという何らかの値が入った時にその値で関数処理します、という意味です。これは仮の値ですので、yとかzとかiとかでも良いです。
parseInt()は文字列を整数に変換する関数です。ここでは色々省略していて、xを整数にする関数になります。
x.toString(16)は、xの値を16進数の文字列に変換する関数です。
16進数方式の色表現ですが、＃RRGGBBとなりますので、必ず2ケタずつで表示しないといけません。現時点では0～fが1ケタになってしまいますので、1ケタの時に先頭に0を付ける関数を追加します。やり方は色々ありますが、ifを使ってみることにしました。
「もし、○○の時はこうして、そうじゃなかったらこうしてください」という条件式にできます。
if（条件式）｛trueの時の処理｝return falseの時の処理; という書き方になります。
条件式は（x < 16）でxの値が16(fは15です)より小さい時に、trueの処理を返してくれます。大きい場合はそのまま返します。0を""で囲むと、囲んだものは文字列になります。
パッと見、算数の計算式みたくなっていますが、JavaScriptでは文字列を「＋」でつなぐと文字同士をくっつけることができます。

16進数に変換する関数が書けましたので、setRGB()の続きを書きます。
赤・緑・青の値を取り出して16進数に変換、それを「#000000」と表示される変数cを宣言します。

JavaScript

function setRGB() の｛｝内に続きを書きます。
先頭に文字列”＃”を付けて、先ほど設定した関数hexを使って各色の数値を算出、＋で繋げます。
赤で言うと、バーの値rBGを関数でrという変数にしていますので、hex()にはrを使います。

これで、各色のバーの値から16進数の値を取り出せる変数cが作成できました。

html

color-innerとクラス名を付けた<div>に、id名を追加します。
ここに設定する事で、<div>全体にかかるようになります。
背景色なので、ここが妥当かと思います。

JavaScript

bgColorというid名の要素について記載します。
style.backgroundColorは、要素の背景色について作用します。
ここに変数cの値を入れるようにすると、背景色がcの色に変化します。

画面を確認してみます。

webブラウザ表示

バーを動かして、パーツ内の色が変われば成功です！

もし変わらない場合、記述かどこか間違えていますので良く確認してください。
スペルミス、大文字や小文字になってないだけでもJavaScriptは動きません。
｛｝や（）内から記述がはみ出ていないかなども要チェックです。

続いて、画面の「カラーコード→」のところに、バーを動かしたらテキストが表示されるように設定します。
また、手入力したい場合は～のテキストボックスにも値が入るようにします。

html

HTMLの<h4>タグ内にspanを追加します。
<span>タグは要素内に入れられる目印のような役割をもち、その要素内のピンポイントで設定を変えたりすることができます。
ここでは、何もないところから急に表示されるようになるので<span>を使います。
spanにid名を付けたら、続いてJavaScriptを追記します。

ちなみに、手入力するテキストボックスの方は既にid名をcolorInputと付けているので、こちらを使います。

JavaScript

先ほどと同じ要領で、変数cの値を利用します。
bgHexの方はテキスト表示にするのでtextContentを使います。
colorInputの方はテキストボックス内に値を入れるのでvalueです。

画面を確認します。

webブラウザ表示

バーを動かして、カラーコード表示・テキストボックスに同じ値が入るか確認します。
こちらも問題なく変わりました！

ちなみに、<span>タグもCSSでデザインをいじれます。
ここでは端折りますが、ブログで紹介しているページのものは二重線が出るようにしています。

html

HTMLにイベントを追加します。<label>タグのところにいる<input>タグ内に追記です。
バーの時はonchangeでしたが、こちらはテキスト入力なのでoninputを使います。
関数はまだJavaScriptに書いていませんが、関数名をここで決めて入力してしまいます。

JavaScript

JavaScriptも進めます。setBgColorForm()という名前の関数を呼び出す宣言をします。
colorInputというid名の値（テキストボックスに手入力した入力値）を、変数yとします。
そして、if文を使って入力方式が正しいかのチェックを行います。
条件式は　(/^#([0-9a-fA-F]{6})$/.test(y))　と入力しています。記号が多くてよく分かりませんね。
文字で書くと、「先頭が#で0～9、a～f、A~Fの範囲で使われた6文字の値かどうか、yの値をテストするよ」という式です。
^は先頭という意味で、キャレットと読むらしいです。キーボードの右上の方、ひらがなの「へ」のキーがこれです。ちっちゃい「へ」に見えます・・・。
（余談ですが、こういう記号系は名称入力すると大体出るのですが、これが何故かうまくいかず。キャレットと打つと‸←こうなります。ちっっさ！
サーカムフレックスと打つと？̂←こうなります。これもちょっと違いますね・・・。

if文の条件式でtrueになった時の処理を追記していきます。If文の｛｝の中に書き込みます。（画面上では紫色の｛｝の中です）

JavaScript

ひとつめの処理として、色の情報を反映させます。
背景色とカラーコード表示が反映されるようにします。
setRGB()のところでは値を16進数にして～という処理をしたので長くなりましたが、ここでは入力自体を16進数に制限しているので、変数yが既に利用可能です。こちらのif文では、falseの時は「何もしない」事にしましたので、returnは記載せず省略です。
入力値に問題ない場合、bgColor（背景色）とbgHex（コードの表示）の値が更新されます。

webブラウザ表示

画面を確認します。
コード入力欄に正確に値を入力した場合、その色に変化したら成功です！

【補足】
ちなみにですが、アプリ作成には「テスト」という作業が必要不可欠です。
試しに変なコードを書いて、反応しないことを確認してみても良いかも知れません。
また、このアプリはあまり作り込んでいないので「#の後6文字入れた」時点で反応する仕様のため、その後つらつら文字を追加しても6文字以降は無視するようになっています。
入力文字数の制限をしたり、より使いやすくコーディングするとよいかと思います！

背景色とコード表示ができました。この時バーも所定の位置に動くようにしたいので、そのようにコーディングを追加です！
変数yの値「#000000」から、赤・緑・青の値を抽出し、バーの値を更新する、という動きです。

JavaScript

if文の｛｝の中に、更に追記していきます。
変数yの値の一部を持ってくるには、substr()を使います。サブストリングと読みます。
ある文字列の、頭から何文字目のいくつまで取り出す、という動きができます。
例えば赤（変数r）のy.substr(1, 2)ですが、文字で書くと「yの値の先頭から数えて1番目から2文字を取り出す」となります。
ここで注意ですが、JavaScriptでの数の数え方は「0」がスタートになります。0番目（先頭）、1番目（実質2文字目）となります。
ので、「#123456」というコードの場合、rは2文字目と3文字目の「12」を取り出すことになります。#が1文字目です。
緑は3番目（4文字目）、青は5番目（6文字目）で指定します。
この文字の抽出はparseInt()の中で行われますが、parseIntは文字列を整数に変換します。カッコ内の見方は（文字列の処理、16進数の文字列を）という感じです。
こうすると、16進数の文字列を整数（10進数）に変換してくれます。
こうして決めた変数r、g、bを使い、バーの位置の同期を行います。
id名はHTML内のそれぞれのバーのところの<input>タグ内に記載したものです。

ちなみに、ここで変数名を上のsetRGB()のところと同じ名前を使っていますが、これは特に問題ありません。
関数の中｛｝←これで囲んだ中　の変数は、その中でしか使えないものになります。
そのため、setRGB()内の変数rと、setBgColorForm()の変数rは別物、という事になります。

webブラウザ表示

画面を確認します。
テキストボックスに入力すると、バーの位置が変更されました！

最後に、「中心に戻す」ボタンをクリック時、初期位置に戻るよう設定していきます。 　
こちらも今までと同様、HTMLにイベントを追加して、JavaScriptに関数を書いていきます。

html

今回はボタンをクリックした時がイベント発生なので、onclickを使います。
関数名もここで決めてしまいました。ここはid名を付けなくても対応可能なので省略です。

続いてJavaScriptです。

JavaScript

constは定数という意味です。定数とは、一度決めたら他の値に変更できないものを言います。
ここは別にletでも良さそうですが、せっかくなのでconstを使ってみました。
defaultColorという名前の定数を定義します。3色ありますので、｛｝で詳細を書いていきます。
バーの中心値は16進数で「80」ですので、これを10進数に換算すると127.5になります。

中心位置を定義したところで、ボタンを押したときにそのデフォルト値を取ってくる関数を書きます。
defaultColor.rと書くことで、赤のデフォルト値を取ってくることができます。緑、青も同様です。

最後にsetRGB()も処理するよう追記します。関数内に別の関数名を記載すると、一緒にその処理も実行することができます。
ここでは、デフォルト値に更新する事で、他の値（背景色やコード表示テキストなど）も一緒にデフォルト値に更新されます。

webブラウザ表示

画面を確認します。
「中心に戻す」ボタンをクリックすると、バーが中央にセットし直され、カラーコードが中心値の「#808080」になりました！
このカラーコードはグレーになりますので、背景色が変わっています。ここはこれ以上いじらなかったのでこの仕様にしています。
リセットボタンでまっさらにしたい場合は、別にコーディングする必要があります。