JSFiddle - React, Tailwind, and code Playground

by Robert Mochel

HTML

<div id="wrapper">
  <h2><p id="t">Assignment 6</p></h2>
  <p id="t">Enter a number of 2 or higher, and we will find the prime numbers up to that.
    <br> Q2 will show the found prime numbers:
    <br>
    <br>(Hit the <u>Enter Key</u> or click on the <u>Find Primes</u> button)
  </p>
  <input type="textbox" id="tb1" onkeypress="handle(event)">
  <input type="button" id="bt1" value="Find Primes " onclick="findPrime();clearS()">
  <p id="init"></p>
  <p id="output"></p>
</div>

CSS

#wrapper {
  background: #fafcd4;
  border-radius: 25px;
  border: 5px solid #1f42b7;
  padding: 20px;
  width: 500px;
  height: 100%;
}

#t {
  font-family: monospace;
}

#tb1 {
  font-family: monospace;
  background: #d4fcfb;
  border-radius: 25px;
  border: 2px solid #92e881;
  padding: 2px;
  width: 100px;
  height: 100%;
}

#bt1 {
  font-family: monospace;
  border-radius: 25px;
  background: #d4fcfb;
  border: 2px solid #92e881;
  padding: 2px;
  width: 100px;
  height: 100%;
}

#output {
  font-family: monospace;
  color: green;
  font-size: 100%;
}

#init {
  font-family: monospace;
  color: green;
  font-size: 100%;
}

JavaScript

function clearS() {
  document.getElementById("tb1").value = "";
}

function handle(e) {
  var key = e.keyCode || e.which;
  if (key == 13) {
    findPrime();
    document.getElementById("tb1").value = "";
  }
}

var n = document.getElementById("tb1").value;
var x = 0;
var cx = 0;
var it = 0;


var Node = function(_content) {
  this.next = null;
  this.previous = null;
  this.content = _content;
}


var Queue = function() {
  this.last = null;
  this.first = null;
  this.length = 0;


  this.enqueue = function(_content) {
    var node = new Node(_content);
    if (this.last == null && this.head == null) {
      this.first = node;
      this.last = node;
      this.length++;
      return this;
    }

    this.last.previous = node;
    node.next = this.last;
    this.last = node;
    this.length++;
    return this;
  }

  this.dequeue = function() {
    if (this.last == null) {
      alert("Empty Queue");
      return null;
    }

    if (this.last == this.first) {
      this.first = null;
      this.last = null;
      this.length = 0;
      return null;
    }

    var a = this.first;
    this.first = this.first.previous;
    this.first.next = null;
    this.length--;

    return a;

  }
  this.toString = function() {
    var str = "";
    var node = this.first;
    while (node != null) {
      str += "  " + node.content + "|";
      node = node.previous;
    }
    return str;
  }
}


var q1 = new Queue();
var q2 = new Queue();



function findPrime() {
  checkValue()
  fillQueue();
  while (q1.length > 0) {
    x = q1.first.content;
    q1.dequeue();
    q2.enqueue(x);
    queueLength = q1.length;

    for (var y = 0; y < queueLength; y++) {
      var cx = q1.first.content;
      q1.dequeue();
      if ((cx % x) !== 0) {
        q1.enqueue(cx);
      }
    }

    it++;
    document.getElementById("output").innerHTML += "<br>";
    document.getElementById("output").innerHTML += "Iteration " + it + ": ";
    document.getElementById("output").innerHTML += "Q1: " +...