JSFiddle - React, Tailwind, and code Playground

by mmansion

HTML

<section>
    <button id="myButton">Next Prime Number</button>
    <div id="message-output">2</div>
</section>
<div id="prime-blocks"></div>

CSS

section {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 2px;
    background: rgba(0,20,0,.1);
    text-align: center;
    padding: 15px;
    z-index: 1;
}

section button {
   background: black;
   color: white;
   font-size: 18px;
   outline: none;
}

#message-output {
    display: relative;
    margin: 0 auto;
    font-family: arial;
    line-height: 100px;
    color: gray;
    text-align: center;
    background: lightgreen;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-top: 15%;
}
#prime-blocks {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 150%;
    overflow: hidden;
}
#prime-blocks div {
    float: left;
}

JavaScript

var primeNumber = 2; //2,3,5,7,11, etc

var getNextPrimeNumber = function() {
 
    var calculatePrime = function() {
        primeNumber = primeNumber + 1;
        
        var dividend = primeNumber;
        var divisor = dividend - 1;
        
        while(dividend % divisor !== 0) {
            divisor = divisor - 1;
        }
        
        if(divisor !== 1) {
             calculatePrime();   
        }
    }
    
    calculatePrime();
    
    return primeNumber;   
}

var myButton = document.getElementById("myButton");

var handleClick = function() {
 
    var messageOutput = document.getElementById("message-output");
    
    var nextPrimeNumber = getNextPrimeNumber();
    
    messageOutput.innerHTML = nextPrimeNumber;
    
    var primeBlocks = document.getElementById("prime-blocks");
    
    
    var newBlock = document.createElement("div");

    newBlock.style.width = nextPrimeNumber + "px";
    newBlock.style.height = "10px";
    newBlock.style.background = getRandomNumber();
    
    primeBlocks.appendChild(newBlock);
}

var getRandomNumber = function() {
    var r = Math.ceil(Math.random()*255);
    var g = Math.ceil(Math.random()*255);   
    var b = Math.ceil(Math.random()*255); 
    
    return 'rgb(' + r + ',' + g + ',' + b + ')';
}

myButton.addEventListener("click", handleClick);


setInterval(function() {
    
    //handleClick();
    
}, 100);