Scribd
Upload
8 views

JS ANSWER

The document contains solutions to various programming questions, including form validation using HTML and JavaScript, an image gallery with modal functionality, and a simple multiple-choice quiz application. It also includes modifications for age validation in a registration form and regex-based validation for registration numbers, emails, passwords, and image types. Each section provides code snippets and explanations for implementation.

Uploaded by

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

JS ANSWER

The document contains solutions to various programming questions, including form validation using HTML and JavaScript, an image gallery with modal functionality, and a simple multiple-choice quiz application. It also includes modifications for age validation in a registration form and regex-based validation for registration numbers, emails, passwords, and image types. Each section provides code snippets and explanations for implementation.

Uploaded by

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

Here are the solutions to your questions:

Question 1: Form Validation


This is an HTML and JavaScript-based form validation script that ensures all fields meet the
required conditions.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Validation</title>
<style>
.error { color: red; font-size: 14px; }
</style>
</head>
<body>

<form id="registrationForm">
<label>Name: <input type="text" id="name"></label>
<span class="error" id="nameError"></span><br>

<label>Email: <input type="email" id="email"></label>


<span class="error" id="emailError"></span><br>

<label>Password: <input type="password" id="password"></label>


<span class="error" id="passwordError"></span><br>
<label>Confirm Password: <input type="password" id="confirmPassword"></label>
<span class="error" id="confirmPasswordError"></span><br>

<button type="submit">Register</button>
</form>

<script>
document.getElementById("registrationForm").addEventListener("submit", function(event)
{
let isValid = true;

let name = document.getElementById("name").value;


let email = document.getElementById("email").value;
let password = document.getElementById("password").value;
let confirmPassword = document.getElementById("confirmPassword").value;

document.getElementById("nameError").textContent = name.length >= 3 ? "" : "Name


must be at least 3 characters.";
document.getElementById("emailError").textContent = email.includes("@") ? "" : "Enter
a valid email.";
document.getElementById("passwordError").textContent = password.length >= 6 ? "" :
"Password must be at least 6 characters.";
document.getElementById("confirmPasswordError").textContent = password ===
confirmPassword ? "" : "Passwords do not match.";

if (name.length < 3 || !email.includes("@") || password.length < 6 || password !==


confirmPassword) {
isValid = false;
}
if (!isValid) {
event.preventDefault();
}
});
</script>

</body>
</html>

Question 2: Image Gallery


This HTML and JavaScript code implements an image gallery with a modal popup and
navigation.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Gallery</title>
<style>
.gallery img { width: 100px; cursor: pointer; margin: 5px; }
.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0, 0, 0, 0.8); text-align: center; }
.modal img { margin-top: 10%; max-width: 80%; }
.close, .prev, .next { position: absolute; color: white; font-size: 24px; cursor: pointer; }
.close { top: 10px; right: 20px; }
.prev { left: 10px; top: 50%; }
.next { right: 10px; top: 50%; }
</style>
</head>
<body>

<div class="gallery">
<img src="image1.jpg" onclick="openModal(0)">
<img src="image2.jpg" onclick="openModal(1)">
<img src="image3.jpg" onclick="openModal(2)">
</div>

<div class="modal" id="modal">


<span class="close" onclick="closeModal()">&times;</span>
<span class="prev" onclick="prevImage()">&#10094;</span>
<img id="modalImg">
<span class="next" onclick="nextImage()">&#10095;</span>
</div>

<script>
let images = ["image1.jpg", "image2.jpg", "image3.jpg"];
let currentIndex = 0;

function openModal(index) {
document.getElementById("modal").style.display = "block";
document.getElementById("modalImg").src = images[index];
currentIndex = index;
}
function closeModal() {
document.getElementById("modal").style.display = "none";
}

function prevImage() {
currentIndex = (currentIndex > 0) ? currentIndex - 1 : images.length - 1;
document.getElementById("modalImg").src = images[currentIndex];
}

function nextImage() {
currentIndex = (currentIndex < images.length - 1) ? currentIndex + 1 : 0;
document.getElementById("modalImg").src = images[currentIndex];
}
</script>

</body>
</html>

Question 3: Quiz Application


This is a simple multiple-choice quiz implemented using JavaScript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quiz Application</title>
</head>
<body>

<h2>Quiz</h2>
<form id="quizForm">
<p>1. What is the capital of France?</p>
<input type="radio" name="q1" value="Paris"> Paris<br>
<input type="radio" name="q1" value="London"> London<br>

<p>2. 2 + 2 = ?</p>
<input type="radio" name="q2" value="4"> 4<br>
<input type="radio" name="q2" value="5"> 5<br>

<button type="submit">Submit</button>
</form>

<p id="result"></p>

<script>
document.getElementById("quizForm").addEventListener("submit", function(event) {
event.preventDefault();

let score = 0;
let answers = { q1: "Paris", q2: "4" };

for (let q in answers) {


let selected = document.querySelector(`input[name="${q}"]:checked`);
if (selected && selected.value === answers[q]) {
score++;
}
}

document.getElementById("result").textContent = "Your score: " + score + "/2";


});
</script>

</body>
</html>

Question 4: Registration Form with Age Restriction


Modify Question 1’s form and add a Date of Birth field. Validate that the user is at least 18
years old.

Question 5: JavaScript Validation for IAA Students


For the registration number, email, image type, and password strength, use regex-based
validation.
let regNumber = document.getElementById("regNumber").value;
let email = document.getElementById("email").value;
let password = document.getElementById("password").value;
let profilePhoto = document.getElementById("profilePhoto").files[0];

let regNumPattern = /^BCS-\d{2}-\d{4}-\d{4}$/;


let emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
let passwordPattern = /(?=(.*[!@#$%^&*()_+{}\[\]:;<>,.?~])){3,}(?=.*[A-Z])/;

if (!regNumPattern.test(regNumber)) alert("Invalid Registration Number.");


if (!emailPattern.test(email)) alert("Invalid Email.");
if (!passwordPattern.test(password)) alert("Password must have 3 special characters and 1
uppercase.");

🚀
if (profilePhoto.type !== "image/jpeg") alert("Profile photo must be JPG.");
Let me know if you need modifications!

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy