Preview:
 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>
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter