Take a number input (less than 100) from the user and save it to the web storage. Create a web worker to increment the number till it becomes prime. Provide two buttons of 'Start' and 'End' to start or end the process. The increment stops upon pressing 'end', or the number becomes prime.
Am I going about this the right way? Could you review my code and advice on possible improvements.
<!DOCTYPE HTML>
<html>
<head>
<title>Prime Number - Web Workers</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="prime.js"></script>
<style>
button {
height: 32px;
padding: 0 15px;
background: #0071e3 !important;
border: 1px solid transparent;
color: #fff;
border-radius: 4px;
}
</style>
</head>
<body style="background-color: #fafafa;margin: 0 auto;text-align: center;font-family: Arial, Helvetica, sans-serif;">
<div style="font-size: 30px;background-color: #000;color: #fff;height:100px;padding: 20px;padding-top: 40px;">
<span style="position: relative;top:20px">
Prime Number
</span>
</div>
<br/>
<br/>
<div style="border:2px solid #ccc;padding: 40px;background-color: #fff;width:700px;margin: 0 auto;border-radius:10px;">
<span style="margin-right: 10px;">Enter number to find prime numbers</span>
<input type="text" name="checkValue" id="checkValue" max="100" style="height:28px;border:1px solid #8b8b8b;font-size: 15px;border-radius: 4px;"/>
<span>
<button onclick="enablePrime()" title="Start Prime Check">Start</button>
<button onclick="terminatePrime()" title="Terminate Prime check">Stop</button>
</span>
</div>
<br/>
<div>
<div style="padding:10px;">
<output id="primeResult"></output>
<div id="outputData"></div>
</div>
</div>
</body>
</html>
Prime.js
var primeWorker;
function enablePrime() {
primeWorker = new Worker("webworkers.js");
var maxValue = $('#checkValue').val();
primeWorker.addEventListener("message", handlePrime, false);
primeWorker.postMessage({'cmd': 'start', 'upto': maxValue});
}
function terminatePrime() {
if (primeWorker != undefined) {
primeWorker.terminate();
}
}
function handlePrime(event) {
$('#outputData').append(JSON.stringify(event.data) );
}
Webworkers.js
function getPrimes(max) {
var primeNum = [], i, j, primes = [];
for (i = 2; i <= max; ++i) {
if (!primeNum[i]) {
primes.push(i);
for (j = i << 1; j <= max; j += i) {
primeNum[j] = true;
}
}
}
return primes;
}
self.addEventListener('message', function(e) {
var data = e.data;
switch (data.cmd) {
case 'stop':
self.close();
break;
case 'start':
var numbers = getPrimes(data.upto);
postMessage("Prime Numbers are: "+ numbers + "<br/>");
break;
default:
postMessage('unknown command: ' + data.msg);
}
}, false);
