``````<html>

<title>Web workers</title>

<body>
<p>Do a prime number search from <input id="from" value="1"> to <input id="to" value="2000000" size="100">.</p>
<button onclick="doSearch()" id="searchButton">Start Searching</button>
<button onclick="cancelSearch()">Cancel</button>

<div id="primeContainer">
</div>

<div id="status"></div>
<div>
This example comes from
<a href="https://medium.com/young-coder/a-simple-introduction-to-web-workers-in-javascript-b3504f9d9d1c">here</a>.
</div>
<script id="FindPrimes" type="javascript/worker">
onmessage = function (event) {
var primes = findPrimes(event.data.from, event.data.to);
postMessage(
{messageType: "PrimeList", data: primes}
);
};

function findPrimes(fromNumber, toNumber) {
// Create an array containing all integers between the two specified numbers.
var list = [];
for (var i = fromNumber; i <= toNumber; i++) {
if (i > 1) list.push(i);
}

// Test for primes.
var maxDiv = Math.round(Math.sqrt(toNumber));
var primes = [];

var previousProgress;

for (var i = 0; i < list.length; i++) {
var failed = false;
for (var j = 2; j <= maxDiv; j++) {
if ((list[i] != j) && (list[i] % j == 0)) {
failed = true;
} else if ((j == maxDiv) && (failed == false)) {
primes.push(list[i]);
}
}

// Give a progress update.
var progress = Math.round(i / list.length * 100);
if (progress != previousProgress) {
postMessage(
{messageType: "Progress", data: progress}
);
previousProgress = progress;
}
}

return primes;
}
</script>
<script src="./index.js"></script>
</body>

</html>``````
``````body {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
margin: 20px;
}

#primeContainer {
border: solid 1px black;
height: 300px;
max-width: 500px;
overflow: scroll;
overflow-x: hidden;
font-size: x-small;
margin-top: 20px;
margin-bottom: 10px;
}

input {
width: 80px;
}

button {
}

p {
margin-bottom: 3px;
}

#status {
color: darkred;
}
``````
``````var statusDisplay;
var worker;
var searchButton;

statusDisplay = document.getElementById("status");
searchButton = document.getElementById("searchButton");
};

function doSearch() {
// Get the two numbers in the text boxes. This is the search range.
searchButton.disabled = true;

var fromNumber = document.getElementById("from").value;
var toNumber = document.getElementById("to").value;

// Ordinarily you would give the web worker JavaScript in a separate
// file, using a line of code like this.
//worker = new Worker("PrimeWorker.js");

// Because this example is hosted on CodePen,
// which doesn't let you use separate JS files,
// we need to use a workaround to grab the
// PrimeWorker.js code from the findPrimes() function
var blob = new Blob([document.querySelector("#FindPrimes").textContent]);
blobURL = window.URL.createObjectURL(blob);

worker = new Worker(blobURL);
worker.onerror = workerError;

worker.postMessage({
from: fromNumber,
to: toNumber
});

statusDisplay.innerHTML =
"A web worker is on the job (" + fromNumber + " to " + toNumber + ") ...";
}

var message = event.data;

if (message.messageType == "PrimeList") {
var primes = message.data;

// Show the prime number list on the page.
var primeList = "";
for (var i = 0; i < primes.length; i++) {
primeList += primes[i];
if (i != primes.length - 1) primeList += ", ";
}
var displayList = document.getElementById("primeContainer");
displayList.innerHTML = primeList;

if (primeList.length == 0) {
statusDisplay.innerHTML = "Search failed to find any results.";
} else {
statusDisplay.innerHTML = "The results are here!";
}
searchButton.disabled = false;
} else if (message.messageType == "Progress") {
statusDisplay.innerHTML = message.data + "% done ...";
}
}

function workerError(error) {
statusDisplay.innerHTML = error.message;
}

function cancelSearch() {
worker.terminate();
worker = null;
statusDisplay.innerHTML = "Search cancelled.";
searchButton.disabled = false;
}
``````

### External CSS

This Pen doesn't use any external CSS resources.

### External JavaScript

This Pen doesn't use any external JavaScript resources.