JavaScript Application To Check Prime and Non-Prime Number
Last Updated :
06 Jan, 2025
Improve
Prime numbers have been a fundamental concept in mathematics and computer science. In programming, checking if a number is prime will help to understand loops, conditions, and optimization techniques.
What We Are Going to Create
We will create a simple web application where users can input a number to check if it’s a Prime or Non-Prime number. The application will:
- Accept a number as input from the user.
- Check whether the number is prime or non-prime.
- Display the result to the user.
Project Preview
Prime and Non-Prime Number - HTML & CSS Structure
This structure provides a simple web interface with an input field to enter a number and a button to check whether the number is prime or non-prime
<html>
<head>
<title>Prime Number Checker</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f4f4f9;
}
.container {
text-align: center;
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
input {
padding: 10px;
width: 200px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
#result {
margin-top: 20px;
font-size: 18px;
}
</style>
</head>
<body>
<div class="container">
<h1>Prime Number Checker</h1>
<input type="number" id="input" placeholder="Enter a number">
<button onclick="cPrime()">Check</button>
<p id="result"></p>
</div>
</body>
</html>
In this example
- body: Uses Flexbox to center content both vertically and horizontally, with a light gray background and no margins.
- .container: A white box with rounded corners, padding, and a shadow for a card-like appearance.
- input: Styled for usability with padding, a defined width, light border, and rounded corners.
- button: Green background, white text, rounded corners, and a hover effect for better interaction.
- #result: Displays output with spacing and a larger font size for visibility.
Prime and Non-Prime Number - JavaScript Functionality
The JavaScript function checks if a number is prime by iterating from 2 to the square root of the number. If the number is divisible by any value in this range, it's marked as non-prime otherwise, it is prime.
function cPrime() {
const n = parseInt(document.getElementById('input').value);
const res = document.getElementById('result');
if (isNaN(n) || n <= 1) {
res.textContent = "Please enter a number greater than 1.";
res.style.color = "red";
return;
}
let isPrime = true;
for (let i = 2; i <= Math.sqrt(n); i++) {
if (n % i === 0) {
isPrime = false;
break;
}
}
if (isPrime) {
res.textContent = `${n} is a Prime Number.`;
res.style.color = "green";
} else {
res.textContent = `${n} is a Non-Prime Number.`;
res.style.color = "blue";
}
}
In this example
- The function retrieves the user input as a number from an input field with the ID input.
- It checks if the input is valid (a number greater than 1); otherwise, it displays an error message in red.
- A flag variable isPrime is initialized as true to track if the number is prime.
- A for loop iterates from 2 to the square root of the input number to check divisibility. If any divisor is found, isPrime is set to false and the loop breaks.
- If the number is prime, a success message is displayed in green; otherwise, a non-prime message is shown in blue.
- The result is dynamically updated in an element with the ID result.
Complete Code
<html>
<head>
<title>Prime Number Checker</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f4f4f9;
}
.container {
text-align: center;
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
input {
padding: 10px;
width: 200px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
#result {
margin-top: 20px;
font-size: 18px;
}
</style>
</head>
<body>
<div class="container">
<h1>Prime Number Checker</h1>
<input type="number" id="input" placeholder="Enter a number">
<button onclick="cPrime()">Check</button>
<p id="result"></p>
</div>
<script>
function cPrime() {
const n = parseInt(document.getElementById('input').value);
const res = document.getElementById('result');
if (isNaN(n) || n <= 1) {
res.textContent = "Please enter a number greater than 1.";
res.style.color = "red";
return;
}
let isPrime = true;
for (let i = 2; i <= Math.sqrt(n); i++) {
if (n % i === 0) {
isPrime = false;
break;
}
}
if (isPrime) {
res.textContent = `${n} is a Prime Number.`;
res.style.color = "green";
} else {
res.textContent = `${n} is a Non-Prime Number.`;
res.style.color = "blue";
}
}
</script>
</body>
</html>
