Factorial, Fibonacci, Prime, Palindrome
a. Design a appropriate function should be called to display
- Factorial of that number
- Fibonacci series up to that number
- Prime numbers up to that number
- Is it palindrome or not
b. Design a HTML having a text box and four buttons named Factorial, Fibonacci, Prime, and Palindrome. When a button is pressed an appropriate function should be called to display
index.html
</>
Copy
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Functions and Events</title>
<script type="text/javascript">
// Utility: Reads the input value and converts it to an integer.
function getInputNumber() {
return parseInt(document.getElementById("numberInput").value, 10);
}
// Utility: Displays the provided message in the result div.
function displayResult(message) {
document.getElementById("result").innerHTML = message;
}
// Function to calculate the factorial of the entered number.
function computeFactorial() {
var num = getInputNumber();
if (isNaN(num) || num < 0) {
displayResult("Please enter a non-negative integer.");
return;
}
var factorial = 1;
for (var i = 2; i <= num; i++) {
factorial *= i;
}
displayResult("Factorial of " + num + " is " + factorial + ".");
}
// Function to display the Fibonacci series up to the entered number.
function computeFibonacci() {
var num = getInputNumber();
if (isNaN(num) || num < 0) {
displayResult("Please enter a non-negative integer.");
return;
}
var fibSeries = [];
var a = 0, b = 1;
// Always include 0 in the series.
if (num >= 0) {
fibSeries.push(a);
}
// Include 1 if within the limit.
if (num >= 1) {
fibSeries.push(b);
}
var next = a + b;
while (next <= num) {
fibSeries.push(next);
a = b;
b = next;
next = a + b;
}
displayResult("Fibonacci series up to " + num + ": " + fibSeries.join(", "));
}
// Function to list all prime numbers up to the entered number.
function computePrimes() {
var num = getInputNumber();
if (isNaN(num) || num < 2) {
displayResult("Please enter an integer greater than or equal to 2.");
return;
}
var primes = [];
for (var i = 2; i <= num; i++) {
var isPrime = true;
// Check for factors up to the square root of i.
for (var j = 2; j <= Math.sqrt(i); j++) {
if (i % j === 0) {
isPrime = false;
break;
}
}
if (isPrime) {
primes.push(i);
}
}
displayResult("Prime numbers up to " + num + ": " + primes.join(", "));
}
// Function to check whether the entered number is a palindrome.
function checkPalindrome() {
var input = document.getElementById("numberInput").value;
if (input === "") {
displayResult("Please enter a number.");
return;
}
var reversed = input.split("").reverse().join("");
if (input === reversed) {
displayResult(input + " is a palindrome.");
} else {
displayResult(input + " is not a palindrome.");
}
}
</script>
</head>
<body>
<h1>JavaScript Functions and Events</h1>
<p>
<label for="numberInput">Enter a number:</label>
<input type="text" id="numberInput" placeholder="Enter number" />
</p>
<p>
<button onclick="computeFactorial()">Factorial</button>
<button onclick="computeFibonacci()">Fibonacci</button>
<button onclick="computePrimes()">Prime</button>
<button onclick="checkPalindrome()">Palindrome</button>
</p>
<div id="result" style="margin-top:20px; font-size:1.2em;"></div>
</body>
</html>
Calculating Factorial
Calculating Fibonacci
Prime Numbers
Checking Palindrome
Registration Page Validation
c. Write a program to validate the following fields in a registration page i Name (start with alphabet and followed by alphanumeric and the length should not be less than 6 characters)
ii.Mobile (only numbers and length 10 digits)
iii.E-mail (should contain format like xxxxxxx@xxxxxx.xxx)
index.html
</>
Copy
<!DOCTYPE html>
<html>
<head>
<title>Registration Form Validation</title>
<style>
.error { color: red; }
.success { color: green; }
body { font-family: Arial, sans-serif; }
form div { margin-bottom: 10px; }
</style>
<script type="text/javascript">
function validateForm(event) {
// Prevent form submission (page refresh)
event.preventDefault();
// Clear previous messages
document.getElementById("message").innerHTML = "";
// Get field values and trim any extra spaces
var name = document.getElementById("name").value.trim();
var mobile = document.getElementById("mobile").value.trim();
var email = document.getElementById("email").value.trim();
// Array to hold error messages
var errors = [];
// Validate Name:
// - Starts with an alphabet
// - Followed by alphanumeric characters
// - Total length not less than 6 characters
var nameRegex = /^[A-Za-z][A-Za-z0-9]{5,}$/;
if (!nameRegex.test(name)) {
errors.push("Name must start with an alphabet, followed by alphanumeric characters, and be at least 6 characters long.");
}
// Validate Mobile:
// - Only digits
// - Exactly 10 digits
var mobileRegex = /^\d{10}$/;
if (!mobileRegex.test(mobile)) {
errors.push("Mobile number must be exactly 10 digits and contain only numbers.");
}
// Validate E-mail:
// - Basic pattern: one or more allowed characters, an @, one or more allowed characters, a dot, and at least 2 letters
var emailRegex = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/;
if (!emailRegex.test(email)) {
errors.push("E-mail must be in the format xxxxxxx@xxxxxx.xxx.");
}
// Display messages
var messageDiv = document.getElementById("message");
if (errors.length > 0) {
var errorHTML = "<ul>";
errors.forEach(function(error) {
errorHTML += "<li class='error'>" + error + "</li>";
});
errorHTML += "</ul>";
messageDiv.innerHTML = errorHTML;
} else {
messageDiv.innerHTML = "<p class='success'>Registration Successful!</p>";
}
}
</script>
</head>
<body>
<h1>Registration Form</h1>
<form onsubmit="validateForm(event)">
<div>
<label for="name">Name:</label>
<input type="text" id="name" placeholder="Enter your name" required>
</div>
<div>
<label for="mobile">Mobile:</label>
<input type="text" id="mobile" placeholder="10-digit mobile number" required>
</div>
<div>
<label for="email">E-mail:</label>
<input type="text" id="email" placeholder="example@domain.com" required>
</div>
<button type="submit">Register</button>
</form>
<div id="message" style="margin-top:20px;"></div>
</body>
</html>
Not entering email
