JavaScript Application To Check Prime and Non-Prime Number
Last Updated :
06 Jan, 2025
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
JavaScript Application To Check Prime and Non-Prime NumberPrime 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
<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.
JavaScript
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
<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>
Similar Reads
Prime Number Program in Java A prime number is a natural number greater than 1, divisible only by 1 and itself. Examples include 2, 3, 5, 7, and 11. These numbers have no other factors besides themselves and one.In this article, we will learn how to write a prime number program in Java when the input given is a Positive number.
6 min read
Quick ways to check for Prime and find next Prime in Java Many programming contest problems are somehow related Prime Numbers. Either we are required to check Prime Numbers, or we are asked to perform certain functions for all prime number between 1 to N. Example: Calculate the sum of all prime numbers between 1 and 1000000. Java provides two function unde
2 min read
Prime Number Program | Code to Check whether a number is Prime or not Given a positive integer n, write a code to check whether the number is prime. What is Prime Number?A prime is a natural number greater than 1 that has no positive divisors other than 1 and itself. Examples of the first few prime numbers are {2, 3, 5, ...}Examples:Input: n = 11Output: trueInput: n =
12 min read
JavaScript Program to Check Prime Number By Creating a Function A prime number is a natural number greater than 1 that has no positive divisors other than 1 and itself. In this article, we will explore how to check if a given number is a prime number in JavaScript by creating a function. Table of Content Check Prime Number using for LoopCheck Prime Number using
2 min read
JavaScript Program to Print Prime Numbers from 1 to N A prime number is a natural number greater than 1 that has no positive divisors other than 1 and itself. In this article, we'll explore how to create a JavaScript program to print all prime numbers from 1 to a given number N. To find prime numbers from 1 to N, we need to: Iterate through all numbers
3 min read