0
\$\begingroup\$

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);
New contributor
user283073 is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.
\$\endgroup\$
1
  • \$\begingroup\$ Oops I added by mistake \$\endgroup\$
    – user283073
    yesterday

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.