Hi friends, today I will tell you through this blog how you can get prime numbers with the help of javascript. So let’s go guys.
How to Calculate Prime Number?I will try to tell you through JavaScript. I will try to explain you in 3 steps.
Step 1:- Create HTML Page with input form.
Step 2:- Css code add for input form.
Step 3:- JavaScript Code add for Get Input Value of Prime Number
Step 1:- Create HTML Page with input form.
First we will tell you how to create html form. So how to calculate prime number. The html form code of the prime number is given below.
<!DOCTYPE html>
<html>
<head>
<title>Create Prime Number Calculator Using Javascript.</title>
</head>
<body>
<form action="" method="post" id="prime">
<div>
<input type="text" id="number" name="number" placeholder="Number" />
<input type="submit" value="Calculate" />
</div>
</form>
<div id="output"></div>
</body>
</html>
Step 2:- Css code add for input form.
In the first step we learned how to create html form of prime number. Now we will design this form. For this we will use css code. Css code is given below.We can also write the code of css in html page.
:focus {
outline-style: none;
}
#primenumber {
width: 200px;
padding: 8px;
border: 1px solid #ddd;
}
input[type="submit"] {
background: #08c;
color: #fff;
padding: 8px 20px;
border: none;
border-radius: 16px;
cursor: pointer;
}
#output {
font: 1em monospace;
}
Step 3:- JavaScript Code add for Get Input Value of Prime Number
In this step I will tell you the javascript code to calculate prime numbers. How to write prime numbers in javascript code. Its code is given below.
<script>(function() {var isPrimeNumber = function( number ) { if ( number == 1 || number == 2 ) { return true; } for ( var i = 2; i < number; i++ ) {if ( number % i == 0 ) { return false; } } return true;}; var unique = function( arr ) { return arr.reduce(function( p, c ) { if ( p.indexOf( c ) < 0 ) { p.push( c ); } return p; }, []); }; var nextPrime = function( number ) { var n; if( number % 2 == 0 ) { number++; }for( n = number; !isPrimeNumber( n ); n += 2 ) { } return n;}; document.addEventListener( "DOMContentLoaded", function() { var form = document.querySelector( "#prime" ), output = document.querySelector( "#output" );form.addEventListener( "submit", function( e ) { e.preventDefault(); var n = document.querySelector( "#number" ).value; var text = []; for( var i = 0; i < n; ++i ) { text.push( nextPrime( i ) ); } output.innerHTML = unique( text ).join( " " ); }, false);}); })(); </script>
We can also create this code by writing in single html page. The code for this is given below. How to write code in single page.
prime-number-calculator.html
<!DOCTYPE html>
<html>
<head>
<title>Create Prime Number Calculator Using Javascript.</title>
<style>
:focus {
outline-style: none;
}
#primenumber {
width: 200px;
padding: 8px;
border: 1px solid #ddd;
}
input[type="submit"] {
background: #08c;
color: #fff;
padding: 8px 20px;
border: none;
border-radius: 16px;
cursor: pointer;
}
#output {
font: 1em monospace;
}
</style>
</head>
<body>
<form action="" method="post" id="prime">
<div>
<input type="text" id="number" name="number" placeholder="Number" />
<input type="submit" value="Calculate" />
</div>
</form>
<div id="output"></div>
</body>
<script>
(function() {
var isPrimeNumber = function( number ) {
if ( number == 1 || number == 2 ) {
return true;
}
for ( var i = 2; i < number; i++ ) {
if ( number % i == 0 ) { return false; } } return true;
};
var unique = function( arr ) {
return arr.reduce(function( p, c ) {
if ( p.indexOf( c ) < 0 ) {
p.push( c );
}
return p;
}, []);
};
var nextPrime = function( number ) {
var n;
if( number % 2 == 0 ) {
number++;
}
for( n = number; !isPrimeNumber( n ); n += 2 ) { } return n;
};
document.addEventListener( "DOMContentLoaded", function() {
var form = document.querySelector( "#prime" ),
output = document.querySelector( "#output" );
form.addEventListener( "submit", function( e ) { e.preventDefault(); var n = document.querySelector( "#number" ).value; var text = []; for( var i = 0; i < n; ++i ) { text.push( nextPrime( i ) ); } output.innerHTML = unique( text ).join( " " ); }, false);
});
})();
</script>
</html>