Scribd
Upload
2 views

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
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views

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