JSFiddle - React, Tailwind, and code Playground

by Jacktea

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-raidus: 50%;
    margin-top: 15%;
}

#prime-blocks{
    position:absolute;
    top:0;
    left:0;
    
}

JavaScript

var primeNumber = 2;

var getNextPrimeNumber = function() {
    
    var calculatePrime = function () {
        primeNumber = primeNumber +1;
        
        var dividend = primeNumber;
        var divisor = dividend -1;
        
        //loops -->
        while(dividend % divisor !== 0){
            divisor = divisor -1;
        }
        
        if(divisor !==1) {
             calculate Prime();   
        }
    }
    
    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 newBlocks = document.createElement('div");
                                           
    newBlock.style.width = nextPrime + "px";
    newBlock.style.height = "10px"'                                     
    newBlock.style.width                                       
}

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 + ')';
}

myBytton.addEventListener("click", handleClick);