JSFiddle - React, Tailwind, and code Playground

by kobi

HTML

<input type="button" value="Is Prime" onclick="isPrime()" />
<input type="text" /> <span id="res"></span>

<progress min="0" max="100" value="0" id="progressMeter"></progress>

JavaScript

// *****************  This is the web worker js file  ***************

var js = function () {
    function isPrime(num) {
        var prime = true;

        var progress = 0;

        for (var i = num - 1; i > 1; i--) {
            if (num % i == 0) prime = false;
            var oldProgress = progress;
            progress = Math.floor(100 * (num - i) / num);
            if (oldProgress != progress) postMessage(JSON.stringify({
                progress: progress
            }));
        }

        var res = {
            number: num,
            isPrime: prime
        };

        return res;
    }

    self.onmessage = function (e) {
        var res = isPrime(parseInt(e.data, 10));
        postMessage(JSON.stringify(res));
    }

};

// *********************  This is the html page  ***************
var script = encodeURIComponent("(" + js.toString() + ")()");
var worker = new Worker("/echo/js/?js=" + script);


var progress = document.getElementById('progressMeter')

    function isPrime() {
        progress.value = 0;
        progress.style.display = "inherit";
        var num = document.querySelector('input[type=text]').value;
        worker.onmessage = function (e) {
            var res = JSON.parse(e.data);
            if (res.progress) {
                progress.value = res.progress;
            } else {
                progress.style.display = "none";

                document.getElementById('res').innerHTML = res.number + ' is ' + res.isPrime + '<br/>';
            }
            // worker.terminate();
        };

        worker.postMessage(num);
    }