WEB TECHNOLOGY LAB
ASSIGNMENT NO – 7
NAME – SUNDARAM SHUKLA
ROLLNO – 2400290109023
BRANCH – CSE (V-C)
Q1- 1. Create a form that includes the following fields:
Name (required, must be at least 2 characters)
Email (required, must be in a valid email format)
Password (required, must be at least 8 characters,
including at least one number and one special
character)
Age (optional, must be a number between 1 and 120)
<!DOCTYPE html>
<html>
<head>
<title>Form Validation</title>
</head>
<body>
<h2>Registration Form</h2>
<form id="myForm">
Name: <input type="text" id="name" required
minlength="2"><br><br>
Email: <input type="email" id="email" required><br><br>
Password: <input type="password" id="password"
required><br><br>
Age: <input type="number" id="age" min="1" max="120"><br><br>
<button type="submit">Submit</button>
</form>
<script>
[Link]("myForm").addEventListener("submit",
function(e) {
[Link]();
let name = [Link]("name").value;
let email = [Link]("email").value;
let password = [Link]("password").value;
let age = [Link]("age").value;
let passRegex = /^(?=.*[0-9])(?=.*[!@#$%^&*]).{8,}$/;
if ([Link] < 2) {
alert("Name must be at least 2 characters");
return;
}
if () {
alert("Password must be at least 8 chars, include 1 number & 1
special char");
return;
alert("Form submitted successfully!");
});
</script>
</body>
</html>
Q2- Write a JavaScript program to dynamically display a
table on button click.
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Table</title>
</head>
<body>
<button onclick="createTable()">Show Table</button>
<div id="tableDiv"></div>
<script>
function createTable() {
let data = [
["ID", "Name", "Age"],
[1, "Virat", 25],
[2, "Rohit", 30],
[3, "Dhoni", 28]
];
let table = "<table border='1' cellpadding='5'>";
for (let row of data) {
table += "<tr>";
for (let cell of row) {
table += "<td>" + cell + "</td>";
table += "</tr>";
table += "</table>";
[Link]("tableDiv").innerHTML =
table;
</script>
</body>
</html>
Q3- Write a JavaScript program to demonstrate Arrays.
Use reverse, push, pop and indexof , lastindexof etc.
methods on Arrays
<!DOCTYPE html>
<html>
<head>
<title>Array Demo</title>
</head>
<body>
<h3>Check Console for Array Operations</h3>
<script>
let arr = [10, 20, 30, 40, 50];
[Link]("Original Array:", arr);
[Link]("Reverse:", [Link]());
[Link](60);
[Link]("After Push 60:", arr);
[Link]();
[Link]("After Pop:", arr);
[Link]("Index of 30:", [Link](30));
[Link]("Last Index of 40:", [Link](40));
</script>
</body>
</html>
Q4- Write a JavaScript program to demonstrate Objects.
Create person object with name, id, age, gender, salary
attributes and displayALL() function.
<!DOCTYPE html>
<html>
<head>
<title>Object Demo</title>
</head>
<body>
<h3>Check Console for Object Demo</h3>
<script>
let person = {
name: "Sundaram Shukla",
id: 101,
age: 22,
gender: "Male",
salary: 50000,
displayALL: function() {
[Link]("Name:", [Link]);
[Link]("ID:", [Link]);
[Link]("Age:", [Link]);
[Link]("Gender:", [Link]);
[Link]("Salary:", [Link]);
};
[Link]();
</script>
</body>
</html>