JavaScriptでドット絵作成ツールを作ってみた

JavaScriptでドット絵作成ツールを作ってみました。作ってみた感想としては電卓の方が難しかった．．．
意外と少ないステップで完成します。

作成手順

作成手順としては下記のようになります。

• 本の通りに作る
• マスを自由に作れるように改造する
• カラーピッカーを使用する

マスを自由に作る

マスはテーブルで作りました。
HTMLにテキストを入力できるinputタグを使用し、そこからマス数を取得することで任意のマス数のテーブルを作成できるようにしました。
今思えば、縦と横は普通にheightとwidthで良かったなとこの記事を書いていて気付きました。
【JS】

function dotTable() {
  let dotRow = Number(document.getElementById("vertical").value);
  let dotCell = Number(document.getElementById("side").value);
  for (let i = 0; i <= dotRow - 1; i++) {
    let row = dot.insertRow(-1);
    for (let j = 0; j <= dotCell - 1; j++) {
      let cell = row.insertCell(-1);
      cell.onclick = function () {
        this.style.backgroundColor = selectColor;
      }
    }
  }
}

カラーピッカーを使用する

カラーピッカーはコード7区さんの記事を参考にしました。
使ったコードはたったこれだけ。inputタグでcolorを指定。HTML5で標準装備されたみたいです。
意外と簡単に設置できました。
【HTML】

<input type="color" id="color-picker">

【JS】

  $("#color-picker").on("change", function () {
    selectColor = $("#color-picker").val();
  });

最後に

今回は主に本を参考にしたため、制作物や全てのソースコードは公開していません。
参考にさせていただいた方々、ありがとうございました。

参考

いちばんやさしいJavaScript入門教室
コード7区