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.
I am new to HTML5 and Javascript. I tried the below part it is working, but still I feel am logically incorrect. Could someone please review my code and share your feedback and help me to complete this assignment
<!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);
New contributor
Laya Krish is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.