Scribd
Upload
8 views

Q10

The document contains multiple HTML snippets showcasing various web forms and functionalities, including a student registration form, prime number checker, largest and smallest number finder, and a simple calculator. Each section includes JavaScript for form validation, calculations, and user interactions. The snippets demonstrate basic web development techniques using HTML and JavaScript.

Uploaded by

Kshitija Khilari
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
8 views

Q10

The document contains multiple HTML snippets showcasing various web forms and functionalities, including a student registration form, prime number checker, largest and smallest number finder, and a simple calculator. Each section includes JavaScript for form validation, calculations, and user interactions. The snippets demonstrate basic web development techniques using HTML and JavaScript.

Uploaded by

Kshitija Khilari
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/ 13

<!

DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Question 10</title>
</head>

<body>
<h1>Student Registration Form</h1>
<form id="regForm">
<p>
<label for="name">Name:</label>
<input type="name" id="name" placeholder="Enter your full name" />
<span id="name-error" style="color: red;"></span>
</p>
<p>
<label for="email">E-mail Address:</label>
<input type="text" id="email" placeholder="Enter your email" />
<span id="email-error" style="color: red;"></span>
</p>
<p>
<label for="age">Age:</label>
<input type="number" id="age" placeholder="Enter your age" />
<span id="age-error" style="color: red;"></span>
</p>
<p>
<input type="submit" value="Register" />
</p>
</form>

<script>
document.getElementById("regForm").addEventListener("submit", function
(event) {
event.preventDefault(); // Prevent form submission

let isValid = true;

// Get values from the form


const name = document.getElementById("name").value.trim();
const email = document.getElementById("email").value.trim();
const age = document.getElementById("age").value.trim();

// Clear previous error messages


document.getElementById("name-error").textContent = "";
document.getElementById("email-error").textContent = "";
document.getElementById("age-error").textContent = "";

// Name Validation: Only alphabets allowed


if (name === "") {
document.getElementById("name-error").textContent = "Name is
Required!";
} else {
if (!/^[A-Za-z\s]+$/.test(name)) {
document.getElementById("name-error").textContent = "Name must
contain only alphabets.";
isValid = false;
}
}

// Email Validation: Must include '@' and end with '.com'


if (email === "") {
document.getElementById("email-error").textContent = "Email is
Required!";
} else {
if (!email.includes('@') || !email.endsWith('.com')) {
document.getElementById("email-error").textContent = "Email
must include '@' and end with '.com'.";
isValid = false;
}
}

// Age Validation: Must be between 18 and 30


if (age === "") {
document.getElementById("age-error").textContent = "Age is
Required!";
} else {

if (age < 18 || age > 30) {


document.getElementById("age-error").textContent = "Age must be
between 18 and 30.";
isValid = false;
}
}

});
</script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Question2</title>
</head>
<body>
<form action="">
<label for="number">Enter Number: </label> <br> <br>
<input type="number" id="number" placeholder="enter number here..."> <br>
<br>
<button id="btn" type="button" onclick="checkPrime()">Check</button>
<p id="result">Result: </p>
</form>
<script>
function checkPrime(){
let num=parseInt(document.getElementById('number').value);
let result=document.getElementById('result');

let isPrime = true;


if(isNaN(num)||num<2){
result.textContent="Result: Please enter number greater than 2";
return;
}

for(let i=2; i<num; i++){


if(num%i===0){
isPrime=false;
break;
}
}
if(isPrime){
result.textContent=`Result: ${num} is a Prime Number`;
} else {
result.textContent=`Result: ${num} is a NOT Prime Number`;
}
}
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Largest and Smallest</title>
</head>
<body>
<h1>Find Largest and Smallest Numbers</h1>
<p>
<label for="array">Enter numbers (comma separated):</label>
<input type="text" id="array" placeholder="e.g. 5,2,9,1,3" />
</p>
<button onclick="findLargestSmallest()">Find</button>
<p id="result"></p>

<script>
function findLargestSmallest() {
const input = document.getElementById("array").value;
const arr = input.split(',').map(Number);

if (arr.length === 0) {
document.getElementById("result").textContent = "Array is empty.";
return;
}

let largest = arr[0];


let smallest = arr[0];

for (let i = 1; i < arr.length; i++) {


if (arr[i] > largest) {
largest = arr[i];
}
if (arr[i] < smallest) {
smallest = arr[i];
}
}

document.getElementById("result").textContent = `Largest: ${largest},


Smallest: ${smallest}`;
}
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sum of Array Elements</title>
</head>
<body>
<h1>Sum of Array Elements</h1>
<p>
<label for="array">Enter numbers (comma separated):</label>
<input type="text" id="array" placeholder="e.g. 5,2,9,1,3" />
</p>
<button onclick="sumArray()">Find Sum</button>
<p id="result"></p>

<script>
function sumArray() {
const input = document.getElementById("array").value;
const arr = input.split(',').map(Number);

let sum = 0;
for (let i = 0; i < arr.length; i++) {
sum += arr[i];
}

document.getElementById("result").textContent = "Sum of Elements: " +


sum;
}
</script>
</body>
</html>
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Banner Advertisement</title>
</head>
<body>
<a href="https://www.example1.com" target="_blank">
<img src="image1.jpeg" alt="image1" id="banner1">
</a>
<a href="https://www.example2.com" target="_blank">
<img src="image2.jpeg" alt="image2" id="banner2">
</a>
<a href="https://www.example3.com" target="_blank">
<img src="image3.jpeg" alt="image3" id="banner3">
</a>
<script>
document.getElementById('banner1').addEventListener('click',
function(event){
alert("Banner 1 clicked, now will be redirecting to example 1");
});
document.getElementById('banner2').addEventListener('click',
function(event){
alert("Banner 2 clicked, now will be redirecting to example 2");
});
document.getElementById('banner3').addEventListener('click',
function(event){
alert("Banner 3 clicked, now will be redirecting to example 3");
});
</script>
</body>
</html>-->

<!-- <!DOCTYPE html>


<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pull-Down Menu</title>
</head>
<body>
<h2>Pull-Down Menu</h2>
<select id="menu" onchange="redirect()">
<option value="">Select an option</option>
<option value="https://www.google.com">Google</option>
<option value="https://msbte.org.in">MSBTE</option>
<option value="https://www.yahoo.com">Yahoo</option>
</select>

<script>
function redirect() {
const menu = document.getElementById('menu');
const selectedValue = menu.value;

if (selectedValue) {
window.location.href = selectedValue; // Redirect to the selected
site
}
}
</script>
</body>
</html> -->

<!DOCTYPE html>
<html>
<head>
<title>Change Window Content</title>
</head>
<body>
<h2 id="content">Welcome to My Website!</h2>
<button onclick="changeContent()">Change Content</button>

<script>
function changeContent() {
// Changing the content of the window
document.getElementById("content").innerHTML = "You have clicked the
button!";
}
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login validation</title>
</head>

<body>
<form onsubmit="return false;">
<label for="username">Enter User ID: </label>
<input type="text" id="userId" placeholder="enter user id here...">
<br><br>
<label for="password">Enter Password: </label>
<input type="password" id="password" placeholder="enter password here...">
<br><br>
<button id="btn" onclick="validateForm()">Login</button>
</form>
<p id="loginStatus">Login Status: </p>
<script>
function validateForm(){
let userId=document.getElementById('userId').value.trim();
let password=document.getElementById('password').value.trim();
let loginStatus=document.getElementById('loginStatus');
switch(userId){
case "John":
if(password==="john123"){
loginStatus.textContent="Valid Credentials!"
} else {
loginStatus.textContent="Invalid Credentials"
}
break;
case "Bobby":
if(password==="bobby123"){
loginStatus.textContent="Valid Credentials!"
} else {
loginStatus.textContent="Invalid Credentials"
}
break;
case "James":
if(password==="james123"){
loginStatus.textContent="Valid Credentials!"
} else {
loginStatus.textContent="Invalid Credentials"
}
break;

default:
loginStatus.textContent="Invalid credentials";
}

}
</script>
</body>

</html>

<html>
<head>
<title>Using Intrinsic JavaScript Functions</title>
</head>
<body>
<FORM name="contact" action="#" method="post">
<P>
First Name: <INPUT type="text" name="Fname"/> <BR>
Last Name: <INPUT type="text" name="Lname"/><BR>
Email: <INPUT type="text" name="Email"/><BR>
<img src="image1.jpeg"
onclick="javascript:document.forms.contact.submit()"/>
<img src="image2.jpeg"
onclick="javascript:document.forms.contact.reset()"/>
</P>
</FORM>
</body>
</html>

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

<script>
function storeCookie() {
let uname = document.getElementById('uname').value;
let pwd = document.getElementById('pwd').value;
let unameCookie = document.cookie = "Username=" + uname + ";"
let pwdCookie = document.cookie = "Password=" + pwd + ";"
alert("Cookie Stored\n" + unameCookie + " , " + pwdCookie);
}
</script>
</head>

<body>
<form name="myForm">
Enter Username <input type="text" id="uname" /><br />
Enter Password <input type="password" id="pwd" /><br />
<input type="button" value="Submit" onclick="storeCookie()" />
<p id="panel"></p>
</form>
</body>

</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Banner Ads</title>
<script type="text/javascript">
let banners = ['image1.jpeg', 'image2.jpeg', 'image3.jpeg']; // Array of
banner images
let links = ['http://google.com', 'http://vpt.edu.in',
'http://msbte.org.in']; // Array of URLs
let currentBanner = 0;

// Function to switch to the next banner every 2 seconds


function displayBanners() {
currentBanner++;
if (currentBanner == banners.length) {
currentBanner = 0; // Loop back to the first banner
}
document.getElementById('banner').src = banners[currentBanner]; //
Change the banner image
setTimeout(displayBanners, 1000); // Call the function again after 2
seconds
}

// Function to link to the respective URL when the banner is clicked


function linkBanner() {
window.location.href = links[currentBanner]; // Redirect to the
respective link
}
</script>
</head>
<body onload="displayBanners();">
<center>
<a href="javascript: linkBanner()"> <!-- Click the banner to redirect -->
<img id="banner" src="image1.jpeg" width="400" height="200"
alt="Banner" />
</a>
</center>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Elegant Calculator</title>
</head>
<body>
<h1>Welcome to Your Elegant Calculator</h1>
<form>
<label for="firstNumber">First Number: </label>
<input type="text" id="firstNumber"><br><br>

<label for="secondNumber">Second Number: </label>


<input type="text" id="secondNumber"><br><br>

<input type="button" onClick="multiplyNumbers()" value="Multiply" />


<input type="button" onClick="divideNumbers()" value="Divide" />
<input type="button" onClick="addNumbers()" value="Add" />
<input type="button" onClick="subtractNumbers()" value="Subtract" />
</form>
<p id="calculationResult">Result: </p>
<script>
function multiplyNumbers() {
let firstNumber =
parseFloat(document.getElementById("firstNumber").value);
let secondNumber =
parseFloat(document.getElementById("secondNumber").value);
let result = firstNumber * secondNumber;
document.getElementById("calculationResult").innerHTML = `Result: $
{result}`;
}

function divideNumbers() {
let firstNumber =
parseFloat(document.getElementById("firstNumber").value);
let secondNumber =
parseFloat(document.getElementById("secondNumber").value);
let result = firstNumber / secondNumber;
document.getElementById("calculationResult").innerHTML = `Result: $
{result}`;
}

function addNumbers() {
let firstNumber =
parseFloat(document.getElementById("firstNumber").value);
let secondNumber =
parseFloat(document.getElementById("secondNumber").value);
let result = firstNumber + secondNumber;
document.getElementById("calculationResult").innerHTML = `Result: $
{result}`;
}

function subtractNumbers() {
let firstNumber =
parseFloat(document.getElementById("firstNumber").value);
let secondNumber =
parseFloat(document.getElementById("secondNumber").value);
let result = firstNumber - secondNumber;
document.getElementById("calculationResult").innerHTML = `Result: $
{result}`;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>String Length Example</title>
</head>
<body>
<p id="demo"></p>
<script>
// Function to return the length of the string
function len(text) {
return text.length;
}
// Displaying the length of the string "Information"
document.getElementById("demo").innerHTML = "Length of string: " +
len("Information Technology");
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Email validation using RegExp</title>
</head>
<body>
<script>
function emailValidation(email){
let emailRegEx = /^\w+([/.-]?\w+)*@\w+([/.-]?\w+)*(\.\w{2,3})+$/;
//let emailRegEx = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;

if(emailRegEx.test(email)){
document.write("Valid Email");
} else {
document.write("Invalid Email");
}
}
emailValidation("[email protected]")
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Book Discounts on Hover</title>
</head>
<body>
<h2>Books and Discounts</h2>
<img id="bookImage" src="image1.jpeg" width="200" height="150" alt="Book Image"
/>
<br><br>
<!-- Use hover (onmouseover) to display the popup with discount info -->
<img src="image1.jpeg" width="100" height="100" alt="Book 1"
onmouseover="showDiscount(1)" />
<img src="image2.jpeg" width="100" height="100" alt="Book 2"
onmouseover="showDiscount(2)" />
<img src="image3.jpeg" width="100" height="100" alt="Book 3"
onmouseover="showDiscount(3)" />
<script>
function showDiscount(bookId) {
let popupWindow;
if (bookId === 1) {
document.getElementById("bookImage").src = "image1.jpeg";
popupWindow = window.open('', 'discountWindow',
'height=100,width=200,left=500,top=200');
popupWindow.document.write("Discount is 50%");
}
if (bookId === 2) {
document.getElementById("bookImage").src = "image2.jpeg";
popupWindow = window.open('', 'discountWindow',
'height=100,width=200,left=500,top=200');
popupWindow.document.write("Discount is 40%");
}
if (bookId === 3) {
document.getElementById("bookImage").src = "image3.jpeg";
popupWindow = window.open('', 'discountWindow',
'height=100,width=200,left=500,top=200');
popupWindow.document.write("Discount is 20%");
}
}
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>Dropdown Redirection</title>
</head>
<body>
<h3>Select a site to visit:</h3>
<select id="siteSelector" onchange="redirectToSite()">
<option value="">--Select an option--</option>
<option value="https://www.aicte-india.org">AICTE</option>
<option value="https://dtemaharashtra.gov.in">DTE</option>
<option value="https://msbte.org.in">MSBTE</option>
<option value="https://www.google.com">Google</option>
</select>
<script>
function redirectToSite() {
// Get the selected value from the dropdown
const selectedOption = document.getElementById("siteSelector").value;

// Redirect to the selected website if a valid option is selected


if (selectedOption !== "") {
window.location.href = selectedOption;
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Crawling Status Bar</title>
</head>
<body>
<div id="statusBar"></div>

<script>
const message = "Welcome to the Mystic World of JavaScript ";
const statusBar = document.getElementById("statusBar");
let index = 0;
function crawlMessage() {
statusBar.innerText = message.substring(index) + message.substring(0, index);
index = (index + 1) % message.length;
}

// Initial display and interval setup


setInterval(crawlMessage, 150); // Adjust speed with interval in milliseconds
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Beverage Selector</title>
<script>
function updateDropdown() {
const dropdown = document.getElementById("dropdown");
dropdown.innerHTML = ""; // Clear previous options

if (document.getElementById("tea").checked) {
dropdown.innerHTML = `
<option>Green tea</option>
<option>Milk tea</option>
<option>Black tea</option>
`;
} else if (document.getElementById("coffee").checked) {
dropdown.innerHTML = `
<option>Cappuccino</option>
<option>Latte</option>
<option>Espresso</option>
`;
} else if (document.getElementById("softDrink").checked) {
dropdown.innerHTML = `
<option>MAAZA</option>
<option>SPRITE</option>
<option>COCA-COLA</option>
`;
}
}
</script>
</head>
<body>
<h3>Select Beverage:</h3>
<label>
<input type="radio" id="tea" name="beverage" onclick="updateDropdown()">
TEA
</label><br>
<label>
<input type="radio" id="coffee" name="beverage" onclick="updateDropdown()">
COFFEE
</label><br>
<label>
<input type="radio" id="softDrink" name="beverage"
onclick="updateDropdown()"> SOFT DRINK
</label>

<h3>Dropdown List:</h3>
<select id="dropdown">
<option>Select a beverage first</option>
</select>
</body>
</html>

You might also like