Untitled


<!DOCTYPE html>
<html>
  <head>
    <title>JavitóZH</title>
    <style type="text/css">
      table.canvas {
        border-collapse: collapse;
      }
      table.canvas td {
        width: 20px;
        height: 20px;
        border: 1px solid gray;
      }
      table.canvas tr:last-child :last-child {
        color: red;
      }
      table.canvas tr:last-child,
      table.canvas tr :last-child {
        font-weight: bold;
      }
      #myProgress {
        width: 100%;
        background-color: #ddd;
        text-align: center;
      }

      #myBar {
        width: 1%;
        height: 30px;
        background-color: #4caf50;
      }
    </style>
  </head>
  <body>
    <div id="myProgress">
      <div id="myBar"></div>
    </div>
    <script>
      class App {
        constructor(width, height, wrapper = null) {
          this.palette = null;
          this.width = width;
          this.height = height;

          this.wrapper = wrapper === null ? document.body : wrapper;
          this.buildCanvas();
          this.feltolt();
        }

        feltolt() {
          var table = document.getElementById("tablazat");
          var i, j;

          var rows = table.getElementsByTagName("tr");
          for (i = 0; i < this.height - 1; i++) {
            var cells = rows[i].getElementsByTagName("td");
            for (j = 0; j < this.width - 1; j++) {
              var td = cells[j];
              td.addEventListener("click", this.generateNumber);
              td.innerHTML = Math.floor(Math.random() * 10);
            }
          }
          this.sumTable();
        }

        generateNumber(event) {
          event.target.innerHTML = Math.floor(Math.random() * 10);
        }

        sumTable() {
          var table = document.getElementById("tablazat");
          var i,
            j,
            col_sums = [0, 0, 0, 0, 0, 0, 0, 0],
            max = 10;

          var rows = table.getElementsByTagName("tr");
          for (i = 0; i < this.height - 1; i++) {
            var row_sum = 0;
            var cells = rows[i].getElementsByTagName("td");
            for (j = 0; j < this.width - 1; j++) {
              var td = cells[j];
              td.addEventListener("click", event => {
                this.generateNumber(event);
                this.sumTable();
              });
              var szam = parseInt(td.innerHTML);
              row_sum += szam;
              col_sums[j] += szam;
            }
            cells[this.width - 1].innerHTML = row_sum;
            col_sums[this.width - 1] += row_sum;
          }

          var col_sum_cells = rows[this.height - 1].getElementsByTagName("td");
          for (j = 0; j < this.width; j++) {
            var td = col_sum_cells[j];
            td.innerHTML = col_sums[j];
            if (j === 7) {
              this.move(Math.floor((col_sums[j] / 490) * 100) - 1);
              var elem = document.getElementById("myBar");
              elem.innerHTML = Math.floor((col_sums[j] / 490) * 100) + "%";
            }
          }
        }

        buildCanvas() {
          var table = document.createElement("table");
          table.id = "tablazat";
          table.classList.add("canvas");
          var i, j;
          for (i = 0; i < this.height; i++) {
            var tr = document.createElement("tr");
            for (j = 0; j < this.width; j++) {
              var td = document.createElement("td");
              tr.appendChild(td);
            }
            table.appendChild(tr);
          }
          this.wrapper.appendChild(table);
        }
        move(max) {
          var elem = document.getElementById("myBar");
          var width = 1;
          var id = setInterval(frame, 100);
          function frame() {
            if (width >= 100) {
              clearInterval(id);
            } else if (width > max) {
              clearInterval(id);
            } else {
              width++;
              elem.style.width = width + "%";
            }
          }
        }
      }

      var app = new App(8, 8);
    </script>
  </body>
</html>