Scribd
Upload
14 views7 pages

Experiment 9

The document contains three HTML files focused on number operations and a registration form. The first two files implement various mathematical functions like factorial, Fibonacci series, prime number generation, and palindrome checking, with the second file enhancing user interaction by allowing separate calculations. The third file is a registration form that includes validation for name, mobile number, and email, ensuring proper user input before submission.

Uploaded by

sankarayaswitha
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
14 views7 pages

Experiment 9

The document contains three HTML files focused on number operations and a registration form. The first two files implement various mathematical functions like factorial, Fibonacci series, prime number generation, and palindrome checking, with the second file enhancing user interaction by allowing separate calculations. The third file is a registration form that includes validation for name, mobile number, and email, ensuring proper user input before submission.

Uploaded by

sankarayaswitha
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 7

==================================================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>

You might also like