Square Generator

by fullyslick

HTML

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Square Generator</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<button type="button" id="generateButton">Generate Click</button>
<button type="button" id="showButton">Show result</button>
<button type="button" id="resetButton">Reset</button>
<table id="generator" class="generator"></table>
</body>
</html>

CSS

.generator {
    border-spacing: 5px;
    border-collapse: separate;
}
.generator-square {
    width: 50px;
    height: 50px;
    outline: solid 1px black;
}

.generator-square:hover{
    cursor: pointer;
}

JavaScript

// Task url: https://confluence.ontrq.com/display/KB/Medium+level+-+native+JS/#Mediumlevel-nativeJS-#1:Generatorforsquaresevent

var Generator = (function() {
    'use strict';

    return {
        init: function() {
            this.generator = document.getElementById('generator');
            this.generateButton = document.getElementById('generateButton');
            this.showButton = document.getElementById('showButton');
            this.resetButton = document.getElementById('resetButton');
            this.tableRows = 10;
            this.tableColumns = 10;
            this.randomClicksAmount = 100;
            this.dataId = 0;
            this.allSquares = [];

            // Order of execution is important
            this.createSquares();
            this.clickOnSquare();
            this.generateClicks();
            this.clickOnGenerate();
            this.clickOnShowResult();
            this.clickOnReset();
        },
        Square: function(node) {
            this.node = node;
            this.clicks = 0;
            this.backgroundColors = {
                100: '#F50202',
                75: '#FC8505',
                50: '#FCCF05',
                25: '#FCF6A9',
                0: '#FFF'
            };
            this.updateBackground = function() {
                for (var bgClicks in this.backgroundColors) {
                    if (this.clicks >= bgClicks) {
                        this.node.style.backgroundColor = this.backgroundColors[bgClicks];
                    }
                }
            };
            this.updateClicks = function() {
                this.clicks++;
            };
            this.displayClicks = function() {
                this.node.innerText = this.clicks;
            };
            this.reset = function() {
                // Reset clicks to 0
                this.clicks = 0;
                // Update square background to set it to default white
                this.updateBackground();
                // Hide...