Duck's Arduino Interface

index.html

<script>
      // build the interface

      const rowIds = [];
      const $body = document.getElementsByTagName("body")[0];

      $body.addEventListener("click", e => {
        // event handler on body - need to check if the orginal target of the
        // bubbled event has a value, i.e. is a checkbox
        const val = e.target.value;

        if (val) {
          // this line gets all the checked values in one lump
          const $checked = document.querySelectorAll("input:checked");
          // original code only mutates one item at a time which is cleaner
          // so...

          let out = [];
          for (i = 0; i < $checked.length; i++) {
            out.push(parseInt($checked[i].value, 10));
          }
          out.sort((a, b) => {
            return a - b;
          });
          console.log(out.join(","));
        }
      });

      for (let n = 0; n < 113; n += 16) {
        rowIds.push(n);
      }

      const addCheckboxesToRow = ($row, idx) => {
        rowIds.forEach(id => {
          const element = document.createElement("input");
          element.value = id + idx;
          element.type = "checkbox";
          $row.appendChild(element);
        });
      };

      const createRow = idx => {
        const $row = document.createElement("div");
        $row.className = "row";
        addCheckboxesToRow($row, idx);
        $body.appendChild($row);
      };

      for (let r = 0; r < 16; r++) {
        createRow(r);
      }

      //
      // const row1Ids = [0, 16, 32, 48, 64, 80, 96, 112];
      //
      // const addCheckboxesToRow = (rowIds, rowElementId) => {
      //   rowIds.forEach(id => {
      //     const element = document.createElement("input");
      //     element.id = id;
      //     element.type = "checkbox";
      //     element.class = "buttons";
      //
      //     const row = document.getElementById(rowElementId);
      //     row.appendChild(element);
      //   });
      // };
      // addCheckboxesToRow(row1Ids, "firstRow");
    </script>