[Vue.js] Online Sieve of Eratosthenes Demo


Sieve of Eratosthenes is a simple and ancient method to find prime numbers up to a given limit. Given a limit, this online demo returns all prime numbers below the limit. The UI interaction is written using Vue.js, and the algorithm comes from GeeksforGeeks [1] and implemented using JavaScript.

positive integer limit:

{{ primes }}

HTML:

<div id="vueapp">
  positive integer limit: <input v-model="intn" placeholder="Input positive integer">
  <p>{{ primes }}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

Given an input from user, we check if the input is an integer. Then we run the sieve algorithm to check if the number is prime.

JavaScript:

'use strict';

function SieveOfEratosthenes(n) {
      // Create a boolean array "prime[0..n]" and initialize
      // all entries it as true. A value in prime[i] will
      // finally be false if i is Not a prime, else true.
      var integers = [];
      for (var i = 2; i < n+1; i++) {
              integers[i] = true;
      }

      for (var p = 2; p*p <= n; p++) {
              // If integers[p] is not changed, then it is a prime
              if (integers[p] == true) {
                      // Update all multiples of p
                      for (var i = p * 2; i <= n; i += p) {
                              integers[i] = false;
                      }
              }
      }

      // return all prime numbers <= n
      var primes = [];
      for (var p = 2; p <= n; p++) {
              if (integers[p] == true) {
                      primes.push(p);
              }
      }

      return primes;
}

new Vue({
  el: '#vueapp',
  data: {
    intn: 5,
    primes: ""
  },
  watch: {
    intn: {
      immediate: true,
      handler(val, oldVal) {
        var n = parseInt(val);
        if (isNaN(n)) {
          this.primes = "please input integer";
          return;
        }

        this.primes = SieveOfEratosthenes(n);
      }
    }
  }
});

Tested on:

  • Chromium 65.0.3325.181 on Ubuntu 17.10 (64-bit)
  • Vue.js 2.5.16

References:

[1]Sieve of Eratosthenes - GeeksforGeeks
[2][Golang] Sieve of Eratosthenes
[3][JavaScript] Sieve of Eratosthenes