Scribd
Upload
2 views8 pages

Assignment6 Webd

The document contains multiple HTML snippets demonstrating form validation, dynamic table creation, array manipulation, and object display in JavaScript. It includes a registration form with validation for name, email, password, and age, a script to create a table from an array of data, and examples of array methods and object properties. Each section is self-contained and illustrates different programming concepts using JavaScript.

Uploaded by

nikhil.2226cse1108
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views8 pages

Assignment6 Webd

The document contains multiple HTML snippets demonstrating form validation, dynamic table creation, array manipulation, and object display in JavaScript. It includes a registration form with validation for name, email, password, and age, a script to create a table from an array of data, and examples of array methods and object properties. Each section is self-contained and illustrates different programming concepts using JavaScript.

Uploaded by

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

Registration form

<!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>
<script>
function validateForm(e) {
e.preventDefault();
const name = document.getElementById("name").value;
if (name.length < 2) {
alert("Name must be at least 2 characters long.");
return false;
}

const email = document.getElementById("email").value;


const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]
{2,6}$/;
if (!emailRegex.test(email)) {
alert("Please enter a valid email address.");
return false;
}

const password = document.getElementById("password").value;


const passwordRegex = /^(?=.*[0-9])(?=.*[\W_]).{8,}$/;
if (!passwordRegex.test(password)) {
alert("Password must be at least 8 characters long and
contain at least one number and one special character.");
return false;
}

const age = document.getElementById("age").value;


if (age && (isNaN(age) || age < 1 || age > 120)) {
alert("Please enter a valid age between 1 and 120.");
return false;
}

console.log("Name:", name);
console.log("Email:", email);
console.log("Password:", password);
console.log("Age:", age);
}
</script>
</head>
<body>

<h2>Registration Form</h2>
<form id="registrationForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<br><br>

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<br><br>

<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<br><br>

<label for="age">Age (Optional):</label>


<input type="text" id="age" name="age">
<br><br>

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

<script>

document.getElementById("registrationForm").addEventListener("submit",
validateForm);
</script>

</body>
</html>
Table

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Create Table with innerHTML</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
th, td {
padding: 10px;
text-align: center;
}
</style>
<script>
function createTable() {
const data = [
{ name: "John", age: 28, country: "USA" },
{ name: "Sara", age: 24, country: "UK" },
{ name: "Carlos", age: 32, country: "Mexico" },
{ name: "Mia", age: 25, country: "Canada" }
];

let tableHTML = `<table>`;

tableHTML += "<tr>";
tableHTML += "<th>Name</th><th>Age</th><th>Country</th>";
tableHTML += "</tr>";

data.forEach(item => {
tableHTML += "<tr>";
tableHTML += `<td>${item.name}</td>`;
tableHTML += `<td>${item.age}</td>`;
tableHTML += `<td>${item.country}</td>`;
tableHTML += "</tr>";
});

tableHTML += "</table>";
document.getElementById("tableContainer").innerHTML =
tableHTML;
}
</script>
</head>
<body>

<h2>Click the button to create a dynamic table using innerHTML</h2>


<button onclick="createTable()">Create Table</button>

<!-- Container for the dynamically generated table -->


<div id="tableContainer"></div>

</body>
</html>
Array

let fruits = ["Apple", "Banana", "Cherry", "Date", "Elderberry"];

fruits.push("Fig");
console.log( fruits);

let poppedFruit = fruits.pop();


console.log("After pop(): Removed", poppedFruit, "New array:",
fruits);

fruits.reverse();
console.log("After reverse():", fruits);

let index = fruits.indexOf("Banana");


console.log("Index of 'Banana':", index);

let lastIndex = fruits.lastIndexOf("Apple");


console.log("Last index of 'Apple':", lastIndex);
Object Display Function
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Object Demonstration</title>
</head>
<body>

<h2>Person Object Demonstration</h2>

<script>
let person = {
name: "John Doe",
id: "P12345",
age: 30,
gender: "Male",
salary: 50000, displayALL: function() {
console.log("Person Details:");
console.log("Name: " + this.name);
console.log("ID: " + this.id);
console.log("Age: " + this.age);
console.log("Gender: " + this.gender);
console.log("Salary: $" + this.salary);
}
};

person.displayALL();
</script>

</body>
</html>

You might also like