Problem:
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.
Since I’m new, am I approaching this correctly?
HTML
<body>
<div>
<span>
Prime Number
</span>
</div>
<br/>
<br/>
<div>
<span>Enter number to find prime numbers</span>
<input type="text" name="checkValue" id="checkValue" max="100" />
<span>
<button onclick="enablePrime()" title="Start Prime Check">Start</button>
<button onclick="terminatePrime()" title="Terminate Prime check">Stop</button>
</span>
</div>
<br/>
<div>
<div>
<output id="primeResult"></output>
<div id="outputData"></div>
</div>
</div>
</body>
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));
}
webworker.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);
New contributor
Maya Krish is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.