JSFiddle - React, Tailwind, and code Playground

by simonsarris

HTML

<p>Max number of heads in a row:</p>
<p id="p">0</p>
<p id="totes">0</p>

JavaScript

var p = document.getElementById('p');
var totes = document.getElementById('totes');

var heads = 0;
var maxheads = 0;
var totalflips = 0;

function flip() {
    if (Math.floor( Math.random() * 2 ) == 1) {
        heads++;
        if (heads > maxheads) {
            maxheads = heads;
            p.textContent = maxheads;
        }
    } else {
        heads = 0;
    }
    totalflips++;
    totes.textContent = "total flips: " + totalflips;
    requestAnimationFrame(flip);
}

requestAnimationFrame(flip);