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