Random numbers generator stats. Avarage, Standard deviation, Moda, Mediana

rnumbstats.js

"use strict";

// Usage
// Create root HTML tag: <div id="app"></div>
// Create and launch an app: let randNumbStats = new RandNumbStats('app');

class RandNumbStats {
    constructor(rootElId) {
        this.template = `
            <div class="rnumbContainer">
                <div class="inputsBox">
                    <input type="number" id="inpMax" min="0" placeholder="Max">
                    <input type="number" id="inpMin" min="0" placeholder="Min">
                    <input type="number" id="inpLen" min="0" placeholder="Length">
                    <button class="calcBtn">Calculate</button>
                </div>
                <table class="outBox">
                    <tr>
                        <th>Avarage</th>
                        <th>Std deviation</th>
                        <th>Moda</th>
                        <th>Mediana</th>
                    </tr>
                    <tr id="outRow">
                        <td id="outAverage">0</td>
                        <td id="outStdDvtn">0</td>
                        <td id="outModa">0</td>
                        <td id="outMediana">0</td>
                    </tr>           
                </table>
            </div>
        `;        

        // Add template to dom
        document.getElementById(rootElId).innerHTML = this.template;

        var self = this;
        document.querySelector('.calcBtn').addEventListener('click', function(){
            self.btnCalcClickHandler(self);
        });

        // Set input els
        this.inpMinEl = document.getElementById('inpMin');
        this.inpMaxEl = document.getElementById('inpMax');
        this.inpLenEl = document.getElementById('inpLen');

        // Set output els
        this.outElAverage = document.getElementById('outAverage');
        this.outElStdDvtn = document.getElementById('outStdDvtn');
        this.outElModa = document.getElementById('outModa');
        this.outElMediana = document.getElementById('outMediana');

        // Stats
        this.average = 0;
        this.stdDvtn = 0;
        this.moda = 0;
        this.mediana = 0;
    }


    // Button click handler. Launch calculation and update views
    btnCalcClickHandler(self) {
        // Exit if not enough data (input is empty)
        if (this.inpMinEl.value === '' ||
            this.inpMaxEl.value === '' ||
            this.inpLenEl.value === '') return false;

        // Exit if max value lte min value (Less than or equal)
        if (parseInt(this.inpMaxEl.value) <= parseInt(this.inpMinEl.value)) return false;

        self.calculateNumbersStats();
        self.updateOutBox();
    }


    calculateNumbersStats() {
        var min = parseInt(this.inpMinEl.value),
            max = parseInt(this.inpMaxEl.value),
            len = parseInt(this.inpLenEl.value),
            random,            
            ar = [], // ar = new Uint16Array(len),
            /* typedArray is not usable in this case because it is initially filled 0. We need check dublicates in array.
            Duclicates of 0 always return true: random = 0; ar.includes(random) return true */ 
            dublicatesCountDict = {}; // {number:counter} = {5:3, 8:5, 9:4}

        // generate array of random numbers
        var ii = 0;
        while (ii < len) {
            random = parseInt( Math.random() * (max - min) + min );

            // check dublicate of current random number in ar
            if (ar.indexOf(random) != -1) {
                if (dublicatesCountDict.hasOwnProperty(random))  dublicatesCountDict[random]++
                else  dublicatesCountDict[random] = 2;
            }

            ar[ii] = random;
            ii++;
        }

        // Calculate average
        this.average = ar.reduce(function(a, b) { return a + b }) / ar.length;

        // Calculate standart deviation
        var curDiff = 0,
            diffQuadSum = 0;
        for (var i=0; i < ar.length; i++) {
            curDiff = ar[i] - this.average;
            diffQuadSum += curDiff*curDiff;
        }
        this.stdDvtn = Math.sqrt( diffQuadSum / ar.length ).toFixed(2);

        // Calculate Moda
        // !ToDo. Calculate multimoda
        var curModaKey = 0,
            curMaxDublCounter = 0;
        for (var key in dublicatesCountDict) {
            if (dublicatesCountDict[key] > curMaxDublCounter) {
                curModaKey = key;
                curMaxDublCounter = dublicatesCountDict[key];
            }
        }
        this.moda = curModaKey;
        
        // Calculate Mediana
        ar.sort(); // !!! mutate operation. change the original array
        var middleIdx = parseInt(ar.length/2);
        if (ar.length%2) { // ar length is odd
            this.mediana = ar[ middleIdx ];
        } else  { // ar length is even
            // Calculate average og 2 middle numbers
            this.mediana = (ar[ middleIdx ] + ar[ middleIdx+1 ]) /2;
        }
        
    }


    updateOutBox() {
        this.outElAverage.textContent = this.average;
        this.outElStdDvtn.textContent = this.stdDvtn;        
        this.outElModa.textContent = this.moda;        
        this.outElMediana.textContent = this.mediana;        
    }
}