Question

Add JavaScript code in the “find_primeV2.js” to allow users to enter a number, and then based on the number of user enters, to find out how many prime numbers there are up to and including the user inputted number and then display them on the web page. The following are the detailed steps to complete this assignment:

Step 1. [30 points] In “find_primeV2.js”, complete isPrime() function by
(1) Adding one parameter in function header. That parameter is used to accept a number as the argument. This function is used to find out whether a number passed into this function is prime or not.
(2) Adding a for or while loop to check whether that number is only divisible by itself and 1. If not, then return false;
(3) After the loop, return true, indicates the number is a prime.

Step 2. [30 points] In “find_primeV2.js”, complete getPrimes() function by
(4) Adding one parameter in function header. That parameter is used to accept user inputted number as the argument. This function is used to find all primes between 2 and the number that user enters.
(5) Adding a for or while loop to check each integer between 2 and the number that user enters. In each loop iteration, call isPrime() function to determine whether the integer is a prime or not. If the integer is a prime number, then add that integer to primes string, and increase count by 1.
(6) After the loop, at the end of the function, return an array that holds both primes and count.

Step 3. [20 points] In “find_primeV2.js”, complete processEntries() function by adding js statements:
(1) In the if statement block, display a message says: “Please enter an integer number greater than 1.” in the <span> element next to the number input box.
(2) In the else statement block, remove error message if have any.
(3) Add js code to call getPrimes() function to get the number of primes found in the range of 2 to the inputted number and display that result in the input box with id=”count” in the web page.
(4) Add js code to call getPrimes() function to get the list of primes found in the range of 2 to the inputted number and display those primes in the text area with id = “primes”.

find_primeV2.js

// $ function is used to replace document.getElementById() in this document for convience
var $ = function(id) { return document.getElementById(id); };

// determine if a number is prime
var isPrime = function( ) {//step 1.1 add a parameter in function header to accept
// a number passed in
//step 1.2 add a for or while loop to check whether that number is prime or not
// if that number can be divisible by any integer between 2 and (number itself - 1)
// then that number is not a prime, return false

//step 1.3: after loop, return true, indicates that number is a prime

}

// get all prime numbers
var getPrimes = function (){ //step 2.1 add a parameter in function header
  
   var primes = "";
   var count = 0;
   //step2.2: add a for or while loop
   // inside the loop, call isPrime() function
   // inside the loop, add prime number to primes string and update the count

   //step 2.3: return an array that holds both primes string and count
  
}
var processEntries = function() {
//get values from page
var input = $("number").value;
   input = Number(input);
inputInteger = parseInt(input);
   $("primes").value = "";
  
   // add data validation here, to make sure the input is a number greater than 1
   if ( isNaN(input) || input!== inputInteger || inputInteger <= 1){
   //step 3.1: add js code to display a message says: "Please enter an integer number greater than 1."
   //besides the input entry box
      
      
       $("count").value = "";
       $("primes").value ="";
       $("primes").style = "background-color: #808080";
       $("count").style = "background-color: #808080";
   }
   else {
   //step 3.2: add js code to remove error message if having one
         
   $("primes").style = "background-color: #ccffff";
   $("count").style = "background-color:#ccffff";
  
   //step 3.3: add js code to call getPrimes() function to display number of primes found in the range
// in the input box with id = "count"  
  
   //step 3.4: add js code to call getPrimes() function to display the list of primes found in the textarea
   // with id = "primes"
  
   }
}
   $("calculate").onclick = processEntries;
   $("number").focus();

find_primeV2.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">  
<title>Future Value Calculator</title>
<link rel="stylesheet" href="prime.css">

</head>

<body>
<main>
<h1>Find Prime Numbers</h1>
       <img src="images/teacher.png" id="teacher" alt="teacher" width="177" height="277"/>
<p>Enter any a number to find out how many prime numbers there are
up to and including that value.</p>
         
<label for="number">Enter Number:</label>
<input type="number" id="number" value="100">
<span>&nbsp;</span><br>
      
<label for="count">Prime count:</label>
<input id="count" disabled><br>
  
<label for="primes">Prime numbers:</label>
<textarea id="primes" rows = "10" cols= "40" disabled></textarea><br>
  
<label>&nbsp;</label>
<input type="button" id="calculate" value="Calculate"><br>
</main>
<script src="find_primeV2.js"></script>
</body>
</html>

prime.css

/*@import url(http://fonts.googleapis.com/css?family=Wellfleet);*/
body {
font-family: 'Wellfleet', Arial, Helvetica, sans-serif;
background-color: white;
margin: 0 auto;
width: 800px;
padding: 0 1em .5em;
}
h1 {
   color: blue;
   margin: .5em 0;
}
#teacher {
   float:right;
   margin:0px 30px 0px 0px;}

  
label {
   float: left;
width: 10em;
text-align: right;
padding-bottom: .5em;
}
input {
width: 5em;
   margin-left: 1em;
margin-bottom: .5em;
}

textarea {
   width: auto;
   height: auto;
   margin-left: 1em;
margin-bottom: .5em;
}
span {
color: red;
font-size: 80%;
}

Answer 1

Code updated in Javascript no changes in HTML CSS

find_primeV2.js

// $ function is used to replace document.getElementById() in this document for convience
var $ = function(id) { return document.getElementById(id); };

// determine if a number is prime
var isPrime = function( num ) {//step 1.1 add a parameter in function header to accept
// a number passed in
//step 1.2 add a for or while loop to check whether that number is prime or not
// if that number can be divisible by any integer between 2 and (number itself - 1)
// then that number is not a prime, return false

for(var i = 2; i < num; i++)
if(num % i === 0) return false;
return true;

//step 1.3: after loop, return true, indicates that number is a prime

}

// get all prime numbers
var getPrimes = function ( num ){ //step 2.1 add a parameter in function header
var arr = [];
var primes = "";
var count = 0;
//step2.2: add a for or while loop
// inside the loop, call isPrime() function
// inside the loop, add prime number to primes string and update the count

for(var i = 2; i <= num; i++){
   if( isPrime(i) ) {
       count++;
       primes += i.toString() + " "
   }  
}
   arr.push( count );
   arr.push( primes );
   console.log(arr);
//step 2.3: return an array that holds both primes string and count
   return arr;
}
var processEntries = function() {
//get values from page
var input = $("number").value;
input = Number(input);
inputInteger = parseInt(input);
$("primes").value = "";
  
// add data validation here, to make sure the input is a number greater than 1
if ( isNaN(input) || input!== inputInteger || inputInteger <= 1){
//step 3.1: add js code to display a message says: "Please enter an integer number greater than 1."
//besides the input entry box
alert("Please enter an integer number greater than 1 ");
  
$("count").value = "";
$("primes").value ="";
$("primes").style = "background-color: #808080";
$("count").style = "background-color: #808080";
}
else {
//step 3.2: add js code to remove error message if having one

$("primes").style = "background-color: #ccffff";
$("count").style = "background-color:#ccffff";
  
   arr = getPrimes( inputInteger );
   console.log(inputInteger);
//step 3.3: add js code to call getPrimes() function to display number of primes found in the range
// in the input box with id = "count"
   $("count").value = arr[0];
  
//step 3.4: add js code to call getPrimes() function to display the list of primes found in the textarea
// with id = "primes"
   $("primes").value = arr[1];
   console.log(arr[1]);
}
}
$("calculate").onclick = processEntries;
$("number").focus();

find_primeV2.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Future Value Calculator</title>
<link rel="stylesheet" href="prime.css">

</head>

<body>
<main>
<h1>Find Prime Numbers</h1>
<img src="images/teacher.png" id="teacher" width="177" height="277"/>
<p>Enter any a number to find out how many prime numbers there are
up to and including that value.</p>

<label for="number">Enter Number:</label>
<input type="number" id="number" value="100">
<span>&nbsp;</span><br>
  
<label for="count">Prime count:</label>
<input id="count" disabled><br>
  
<label for="primes">Prime numbers:</label>
<textarea id="primes" rows = "10" cols= "40" disabled></textarea><br>
  
<label>&nbsp;</label>
<input type="button" id="calculate" value="Calculate"><br>
</main>
<script src="find_primeV2.js"></script>
</body>
</html>

prime.css

/*@import url(http://fonts.googleapis.com/css?family=Wellfleet);*/
body {
font-family: 'Wellfleet', Arial, Helvetica, sans-serif;
background-color: white;
margin: 0 auto;
width: 800px;
padding: 0 1em .5em;
}
h1 {
color: blue;
margin: .5em 0;
}
#teacher {
float:right;
margin:0px 30px 0px 0px;}

  
label {
float: left;
width: 10em;
text-align: right;
padding-bottom: .5em;
}
input {
width: 5em;
margin-left: 1em;
margin-bottom: .5em;
}

textarea {
width: auto;
height: auto;
margin-left: 1em;
margin-bottom: .5em;
}
span {
color: red;
font-size: 80%;
}

Sample Output