JSFiddle - React, Tailwind, and code Playground

by someprimetime

HTML

<div id="main-container">Enter a valid number:
    <input type="text" name="checker">
    <button id="js-prime-check">Get primes!</button>
    <div id="prime-results"></div>
</div>

SCSS

#main-container {
    background: #f5f5f5;
    border: 1px solid #ddd;
    padding: 5px;
    float: left;
    word-wrap: break-word;
    width: 200px;
    
    input {
        width: 20px;
    }
}

#prime-results {
    margin-top: 10px;
}

JavaScript

var primeChecker = {
    /**
    * Append all successfully found primes to the container
    */
    appendResults: function (primes) {
        var toAppend = primes.join('* <p></p>'),
            resultsContainer = document.getElementById('prime-results');
        
        resultsContainer.innerHTML = toAppend;
    },
    
    /**
    * Attach event listener for the click action of the "Get primes!" button
    */
    attachEventListeners: function () {
        var CLICK = 'click',
            self = this,
            handleEventAction,
            inputVal = document.getElementsByTagName('input')[0],
            primeCheckBtn = document.getElementById('js-prime-check');

        var handleEventAction = function (evt) {
            // Need to maintain context to `this` so we'll use call here
            self.handleClick.call(self, evt);
        };

        primeCheckBtn.addEventListener(CLICK, handleEventAction, false);
    },

    /**
     * Checks whether or not the input number is 
     * @param `num` Number to check if prime
     * @return Array of primes
     */

    check: function (num) {
        var i = 0,
            primes = [];

        this.attachEventListeners();

        for (i; i <= num; i++) {
            this.isPrime(i) && primes.push(i);
        }

        return primes;
    },

    /**
     * Handles the click action of the "Get primes!" button
     */
    handleClick: function () {
        var inputValue = document.getElementsByTagName('input')[0].value,
            results;

        if (!isNaN(inputValue)) {
            results = this.check(inputValue);
        } else {
            alert('enter a valid number please');
        }

        if (results) {
            this.appendResults(results);
        }
    },

    /**
     * Return true or false if the number passes the prime test
     * @param `num` Number from 2 => n where n is the input 
     * @return Boolean
     */
    isPrime: function (num) {
        var prime = true,
            i =...