JSFiddle - React, Tailwind, and code Playground

by fordcars

HTML

<h1>Calculate the Golden Ratio</h1>

<input type="text" id="inputTextId" value="Enter the amount of loops to calculate"></input>
<button id="calculateButId">Calculate the Golden Ratio!</button>
<p id="outputTimeId">Time eclapsed</p>
<p id="outputRatioId">Ratio Output</p>

JavaScript

var inputText;
var calculateBut;
var outputTime;
var outputRatio;

function start()
{
    inputText = document.getElementById("inputTextId");
    calculateBut = document.getElementById("calculateButId");
    outputTime = document.getElementById("outputTimeId");
    outputRatio = document.getElementById("outputRatioId");
    
    calculateBut.addEventListener("click", calculateRatio, false);
}

start();

function calculateRatio() // Based on https://cs.uwaterloo.ca/~alopez-o/math-faq/mathtext/node12.html
{
    var timeBeforeCalculation = (new Date()).getTime();
    var timeAfterCalculation;

    var calculatedRatio = 1;
    var amountOfLoops = inputText.value;

    for(i=0;i<amountOfLoops;i++)
    {
        calculatedRatio = 1/calculatedRatio + 1;
    }
    
    timeAfterCalculation = (new Date()).getTime();
    postOutput(calculatedRatio, timeAfterCalculation-timeBeforeCalculation);
}

function postOutput(ratioToPost, timeToPost)
{
    outputTime.innerHTML = timeToPost + " ms";
    outputRatio.innerHTML = ratioToPost;
}