==================================================experiment 9==============
======================================9.1)numberoperations.html=================
<!DOCTYPE html>
<html>
<head>
<title>Number Operations</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
input[type="number"] {
padding: 10px;
width: 200px;
margin-right: 10px;
}
button {
padding: 10px 15px;
}
#results {
margin-top: 20px;
}
</style>
</head>
<body>
<h1>Number Operations</h1>
<label for="numberInput">Enter a number:</label>
<input type="number" id="numberInput" min="0">
<button onclick="displayResults()">Calculate</button>
<div id="results"></div>
<script>
// Function to calculate the factorial of a number
function factorial(n) {
if (n < 0) return "Factorial is not defined for negative numbers.";
if (n === 0 || n === 1) return 1;
let result = 1;
for (let i = 2; i <= n; i++) {
result *= i;
}
return result;
}
// Function to generate Fibonacci series up to n
function fibonacci(n) {
if (n < 0) return "Fibonacci series is not defined for negative numbers.";
let fibSeries = [];
let a = 0, b = 1;
while (a <= n) {
fibSeries.push(a);
let c = a + b;
a = b;
b = c;
}
return fibSeries;
}
// Function to find all prime numbers up to n
function primeNumbers(n) {
if (n < 2) return [];
let primes = [];
for (let num = 2; num <= n; num++) {
let isPrime = true;
for (let i = 2; i <= Math.sqrt(num); i++) {
if (num % i === 0) {
isPrime = false;
break;
}
}
if (isPrime) {
primes.push(num);
}
}
return primes;
}
// Function to check if a number is a palindrome
function isPalindrome(num) {
const str = num.toString();
return str === str.split('').reverse().join('');
}
// Function to display results for a given number
function displayResults() {
const number = parseInt(document.getElementById('numberInput').value);
if (isNaN(number) || number < 0) {
alert('Please enter a valid non-negative integer.');
return;
}
const factorialResult = factorial(number);
const fibonacciResult = fibonacci(number);
const primeResult = primeNumbers(number);
const palindromeResult = isPalindrome(number) ? 'Yes' : 'No';
const resultsDiv = document.getElementById('results');
resultsDiv.innerHTML = `
<h2>Results:</h2>
<p><strong>Factorial of ${number}: </strong>${factorialResult}</p>
<p><strong>Fibonacci series up to ${number}: </strong>$
{fibonacciResult.join(', ')}</p>
<p><strong>Prime numbers up to ${number}: </strong>$
{primeResult.join(', ')}</p>
<p><strong>Is ${number} a palindrome? </strong>${palindromeResult}</p>
`;
}
</script>
</body>
</html>
======================================9.b)updatedfunctions.html===================
<!DOCTYPE html>
<html>
<head>
<title>Number Operations</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
input[type="number"] {
padding: 10px;
width: 200px;
margin-right: 10px;
}
button {
padding: 10px 15px;
margin-right: 10px;
}
#results {
margin-top: 20px;
border: 1px solid #ccc;
padding: 15px;
border-radius: 5px;
}
</style>
</head>
<body>
<h1>Number Operations</h1>
<label for="numberInput">Enter a number:</label>
<input type="number" id="numberInput" min="0">
<button onclick="displayFactorial()">Factorial</button>
<button onclick="displayFibonacci()">Fibonacci</button>
<button onclick="displayPrimes()">Prime Numbers</button>
<button onclick="checkPalindrome()">Palindrome</button>
<div id="results"></div>
<script>
// Function to calculate the factorial of a number
function factorial(n) {
if (n < 0) return "Factorial is not defined for negative numbers.";
if (n === 0 || n === 1) return 1;
let result = 1;
for (let i = 2; i <= n; i++) {
result *= i;
}
return result;
}
// Function to generate Fibonacci series up to n
function fibonacci(n) {
if (n < 0) return "Fibonacci series is not defined for negative numbers.";
let fibSeries = [];
let a = 0, b = 1;
while (a <= n) {
fibSeries.push(a);
let c = a + b;
a = b;
b = c;
}
return fibSeries;
}
// Function to find all prime numbers up to n
function primeNumbers(n) {
if (n < 2) return [];
let primes = [];
for (let num = 2; num <= n; num++) {
let isPrime = true;
for (let i = 2; i <= Math.sqrt(num); i++) {
if (num % i === 0) {
isPrime = false;
break;
}
}
if (isPrime) {
primes.push(num);
}
}
return primes;
}
// Function to check if a number is a palindrome
function isPalindrome(num) {
const str = num.toString();
return str === str.split('').reverse().join('');
}
// Function to display factorial result
function displayFactorial() {
const number = parseInt(document.getElementById('numberInput').value);
const result = factorial(number);
document.getElementById('results').innerHTML = `<h2>Factorial of ${number}:
${result}</h2>`;
}
// Function to display Fibonacci result
function displayFibonacci() {
const number = parseInt(document.getElementById('numberInput').value);
const result = fibonacci(number);
document.getElementById('results').innerHTML = `<h2>Fibonacci series up to
${number}: ${result.join(', ')}</h2>`;
}
// Function to display prime numbers result
function displayPrimes() {
const number = parseInt(document.getElementById('numberInput').value);
const result = primeNumbers(number);
document.getElementById('results').innerHTML = `<h2>Prime numbers up to $
{number}: ${result.join(', ')}</h2>`;
}
// Function to check palindrome result
function checkPalindrome() {
const number = parseInt(document.getElementById('numberInput').value);
const result = isPalindrome(number) ? 'Yes' : 'No';
document.getElementById('results').innerHTML = `<h2>Is ${number} a
palindrome? ${result}</h2>`;
}
</script>
</body>
</html>
===========================================================9.c)registatin2.html====
=============
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Page</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
padding: 20px;
max-width: 400px;
border: 1px solid #ccc;
border-radius: 5px;
}
input[type="text"],
input[type="tel"],
input[type="email"] {
width: 100%;
padding: 10px;
margin: 8px 0;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
padding: 10px 15px;
cursor: pointer;
}
.error {
color: red;
font-size: 0.9em;
margin-bottom: 10px;
}
.highlight {
border: 1px solid red;
background-color: #ffe6e6;
}
</style>
</head>
<body>
<h2>Registration Form</h2>
<form id="registrationForm">
<label for="name">Name (Starts with alphabet, max 5 characters): </label>
<input type="text" id="name" name="name" required>
<div id="nameError" class="error"></div>
<label for="mobile">Mobile (10 digits only): </label>
<input type="tel" id="mobile" name="mobile" required pattern="\d{10}">
<div id="mobileError" class="error"></div>
<label for="email">Email: </label>
<input type="email" id="email" name="email" required>
<div id="emailError" class="error"></div>
<button type="submit">Register</button>
</form>
<script>
// Function to validate the registration form
document.getElementById('registrationForm').onsubmit = function (event) {
// Prevent form submission
event.preventDefault();
// Clear existing error messages and styles
document.getElementById('nameError').innerHTML = '';
document.getElementById('mobileError').innerHTML = '';
document.getElementById('emailError').innerHTML = '';
document.getElementById('name').classList.remove('highlight');
document.getElementById('mobile').classList.remove('highlight');
document.getElementById('email').classList.remove('highlight');
// Collect field values
const name = document.getElementById('name').value;
const mobile = document.getElementById('mobile').value;
const email = document.getElementById('email').value;
let valid = true;
// Validate name
const namePattern = /^[A-Za-z][A-Za-z0-9]{0,4}$/; // Starts with an
alphabet, max 5 characters
if (!namePattern.test(name)) {
document.getElementById('nameError').innerHTML = 'Name must start
with an alphabet and be less than 6 characters.';
document.getElementById('name').classList.add('highlight');
valid = false;
}
// Validate mobile
const mobilePattern = /^\d{10}$/; // Exactly 10 digits
if (!mobilePattern.test(mobile)) {
document.getElementById('mobileError').innerHTML = 'Mobile number
must be exactly 10 digits.';
document.getElementById('mobile').classList.add('highlight');
valid = false;
}
// Validate email
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; // Basic email
validation pattern
if (!emailPattern.test(email)) {
document.getElementById('emailError').innerHTML = 'Please enter a
valid email address.';
document.getElementById('email').classList.add('highlight');
valid = false;
}
// If all validations pass, alert success message (or handle form
submission here)
if (valid) {
alert('Registration successful!');
// Here you can submit the form or perform any action
// document.getElementById('registrationForm').submit();
}
};
</script>
</body>
</html>
