JSFiddle - React, Tailwind, and code Playground

by Brandon McGregor

HTML

Increase the accuracy for more accurate Pi digits:
<br />
<form name='myForm' action='pi.php' method='post'>
   <input type='text' readonly='readonly' name='result' placeholder='pi' /><br />
   <input type='number' name='num' placeholder='accuracy' /><br />
   <input type='button' id='calc-button' name='submit' value='Calculate' />
   <div id='time'></div>
</form>

CSS

body{
 font-family: Helvetica, arial, sans-serif;   
 color: #444;
 margin: 10px;
}
form{
 padding: 10px;
 border-radius: 20px;
 background-color: #ccc;
 border: 1px solid #aaa;  
 display: block;
 margin-top: 20px;
 margin-left: 20px;
 width: 250px;
}

form > input{
 padding: 10px;
 font-size: 1.2em; 
 margin: 10px;    
}

form > input#calc-button{
 background:none; 
 border:none;    
 cursor: pointer;
 background-color: #4A8CFF;
 color: white;
 border-radius: 5px;    
}

form > input#calc-button:hover{
 background-color:#2867D4;   
}

form > #time{
 font-family: Helvetica, arial, sans-serif;  
 margin-left: 5px;
 color: #666;   
 font-size: .9em;        
}

JavaScript

$('#calc-button').click(function(e){
   e.preventDefault();
   calculate();    
});

function calculate(){
    var num = document.myForm.num.value;
    var pi=4,top=4,bot=3,minus = true;
    next(pi,top,bot,minus,num);
}
function next(pi,top,bot,minus,num){
    var cur_time = Date.now();
    for(var i=0;i<num;i++){
        pi += (minus == true)?-(top/bot):(top/bot);
        minus = !minus;
        bot+=2;
    }
    var end_time = Date.now();
    var total_time = end_time - cur_time;
    if(total_time >= 1000){
        total_time = (total_time/1000)+"seconds";
    }else{
        total_time += "ms";
    }
    
    document.myForm.result.value = pi;
    document.getElementById('time').innerHTML = "Result calculated in: " + total_time + "...";
    //setTimeout("next(" + pi + "," + top + "," + bot + "," + minus + "," + num + "," + count + ")",0);
}