JSFiddle - React, Tailwind, and code Playground

by Ryan Brown

HTML

<h1>Module 5 Assignment 1</h1>
<form id="form">
  <div id="my-div">
    Enter number.<br>
    <input type="text"  id="number"><br>
    <input type="button" value="Enter" id="click">
  </div>
</form>
<br>
<table id="my-table">
  <tr>
    <th>Output</th>
  </tr>
  <tr>
    <td id="output"></td>
  </tr>
</table>

CSS

#my-div {
  width: 80%;
} 

#form { width: 20%; }

#click {
    font-size: inherit;
    color: #FFF;
    background-color: #000;
    width: 100%; 
    height: 2em;
}

#number {
    background-color: yellow;
    border-color: gray;
    width: 100%;
}

#my-table {
    text-align: left;
    width: 80%; 
}

table, th {
    border: 1px solid black;
    background-color: yellow;
    padding: 5px;
}

table, td {
    background-color: #D3D3D3;
    vertical-align: top;
    padding: 3px;
}

JavaScript

var list_one = []; var list_two = []; var output = [];
//when 'Enter' is clicked call ListOne function
document.getElementById("click").onclick = function() {
    list_one = []; list_two = []; output = [];//reset when new number clicked
    number = document.getElementById("number").value; CreateListOne(number);
}

function CreateListOne(number) { //Create List One
  for (var i=0; i < (number-1); i++) {list_one[i] = i+2;} 
  return Stack();
}

function Stack() {
  for (var a=2; a <= (list_one.length+2+(list_two.length)); a++) {
    Print(a-2);
    for (var b=0; b <= number; b++) { 
      if (b % list_one[b] == 0) {list_two.push(list_one[b]);} // b if prime to list two
      if (list_one[b] % (b+1) == 0) {list_one.splice(b, 1); } // non-prime starting with b pulled from list one 
    } 
  }
  return document.getElementById("output").innerHTML = output.join("<br>");
}

function Print(a) {
  output.push("Iteration " + (a) + " L1 = " + list_one.join(" ") + ", Q1 = " + list_two.join(" "));
}

/*
You are going to create a List. You will then fill it with numbers consecutively numbered from 2 to n where n is entered by the user.
 
Create a second List - this one should be a Queue - it is empty.
 
Once you have the first List filled we are going to use a technique called Sieve of Eratosthenes which uses first queue to fill the second queue. You will need to look at the algorithm for this https://en.wikipedia.org/wiki/Sieve_of_Eratosthenes 
 
Here is the simple method to do this - L1 is the first list, Q1 is the Queue.
 
1. Go to 1st element in L1 (which will be 2).
2. Because it exists - Push this into Q1 and remove it from L1
3. Iterate through each element of L1 and if the value is divisible by 2 remove it.
4. When done go back to the beginning of the list (the value will be 3 the second time around)
5. Print Iteration 1, Value of L1 (all elements) and Q1 (all elements)
6. Repeat steps 2-5 with this new element - repeat until L1 is empty.
 
Sample output with input 10
...