Task -3
Registration page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration</title>
</head>
<body>
<form id="registrationForm">
<input type="text" id="username" placeholder="Username" required><br>
<input type="email" id="email" placeholder="Email" required><br>
<input type="password" id="password" placeholder="Password" required><br>
<input type="text" id="phone" placeholder="Phone" required><br>
<button type="submit">Register</button>
</form>
<script>
registrationForm.onsubmit = (e) => {
e.preventDefault();
const username = username.value, email = email.value, password = password.value, phone = phone.value;
const errors = [
username.length < 5 && "Username must be 5+ characters",
!/@/.test(email) && "Invalid email",
password.length < 6 && "Password must be 6+ characters",
!/^\d{10}$/.test(phone) && "Phone must be 10 digits"
].filter(Boolean);
alert(errors.length ? errors.join("\n") : "Registration successful!");
};
</script>
</body>
</html>
Task-3
Login page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
</head>
<body>
<form id="loginForm">
<input type="text" id="loginUsername" placeholder="Username" required><br>
<input type="password" id="loginPassword" placeholder="Password" required><br>
<button type="submit">Login</button>
</form>
<script>
loginForm.onsubmit = (e) => {
e.preventDefault();
const username = loginUsername.value, password = loginPassword.value;
alert(username && password ? "Login successful!" : "Please fill out all fields.");
};
</script>
</body>
</html>
Task -3
User profile page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User Profile</title>
</head>
<body>
<form id="profileForm">
<input type="text" id="name" placeholder="Name" required><br>
<input type="email" id="profileEmail" placeholder="Email" required><br>
<input type="text" id="address" placeholder="Address" required><br>
<button type="submit">Update</button>
</form>
<script>
profileForm.onsubmit = (e) => {
e.preventDefault();
const name = name.value, email = profileEmail.value, address = address.value;
const errors = [
name.length < 3 && "Name must be 3+ characters",
!/@/.test(email) && "Invalid email",
address.length < 5 && "Address must be 5+ characters"
].filter(Boolean);
alert(errors.length ? errors.join("\n") : "Profile updated!");
};
</script>
</body>
</html>
Task -3
Payment page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Payment</title>
</head>
<body>
<form id="paymentForm">
<input type="text" id="cardNumber" placeholder="Card Number" required><br>
<input type="text" id="expiryDate" placeholder="MM/YY" required><br>
<input type="text" id="cvv" placeholder="CVV" required><br>
<button type="submit">Pay</button>
</form>
<script>
paymentForm.onsubmit = (e) => {
e.preventDefault();
const cardNumber = cardNumber.value, expiryDate = expiryDate.value, cvv = cvv.value;
const errors = [
!/^\d{16}$/.test(cardNumber) && "Card must be 16 digits",
!/^\d{2}\/\d{2}$/.test(expiryDate) && "Invalid date format",
!/^\d{3}$/.test(cvv) && "CVV must be 3 digits"
].filter(Boolean);
alert(errors.length ? errors.join("\n") : "Payment successful!");
};
</script>
</body>
</html>