Convert Snippet to Image

Preview:

HTML 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Registration</title> 
<link rel="stylesheet" href="styles.css"> 
</head> 
<body> 
<h1>Register</h1> 
<form id="registrationForm"> 
<input type="text" id="username" placeholder="Username" required> 
<input type="email" id="email" placeholder="Email" required> 
<input type="password" id="password" placeholder="Password" required> 
<button type="submit">Register</button> 
<div id="message" class="error-message"></div> 
</form> 
<script src="script.js"></script> 
</body> 
</html> 
script.js 
document.getElementById("registrationForm").addEventListener("submit", function(event) { 
event.preventDefault(); // Prevent form submission 
validateRegistration(); 
}); 
function validateRegistration() { 
const username = document.getElementById("username").value; 
const email = document.getElementById("email").value; 
const password = document.getElementById("password").value; 
const messageDiv = document.getElementById("message"); 
messageDiv.textContent = ""; 
// Simple validation 
if (username.length < 3) { 
messageDiv.textContent = "Username must be at least 3 characters."; 
return; 
} 
if (!/\S+@\S+\.\S+/.test(email)) { 
messageDiv.textContent = "Email is not valid."; 
return; 
} 
if (password.length < 6) { 
messageDiv.textContent = "Password must be at least 6 characters."; 
return; 
} 
messageDiv.textContent = "Registration successful!"; 
// You can proceed to send the data to the server here 
} 
---------------------------
User Login Page(HTML) 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Login</title> 
<link rel="stylesheet" href="styles.css"> 
</head> 
<body> 
<h1>Login</h1> 
<form id="loginForm"> 
<input type="email" id="loginEmail" placeholder="Email" required> 
<input type="password" id="loginPassword" placeholder="Password" required> 
<button type="submit">Login</button> 
<div id="loginMessage" class="error-message"></div> 
</form> 
<script src="script.js"></script> 
</body> 
</html> 
script.js 
document.getElementById("loginForm").addEventListener("submit", function(event) { 
event.preventDefault(); // Prevent form submission 
validateLogin(); 
}); 
function validateLogin() { 
const email = document.getElementById("loginEmail").value; 
const password = document.getElementById("loginPassword").value; 
const loginMessageDiv = document.getElementById("loginMessage"); 
loginMessageDiv.textContent = ""; 
// Simple validation 
if (!/\S+@\S+\.\S+/.test(email)) { 
loginMessageDiv.textContent = "Email is not valid."; 
return; 
} 
if (password.length < 6) { 
loginMessageDiv.textContent = "Password must be at least 6 characters."; 
return; 
} 
loginMessageDiv.textContent = "Login successful!"; 
// You can proceed to authenticate the user here 
} 
----------------------------------
User Profile Page(HTML) 
<!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> 
<link rel="stylesheet" href="styles.css"> 
</head> 
<body> 
<h1>User Profile</h1> 
<form id="profileForm"> 
<input type="text" id="profileUsername" placeholder="Username" required> 
<input type="email" id="profileEmail" placeholder="Email" required> 
<button type="submit">Update Profile</button> 
<div id="profileMessage" class="error-message"></div> 
</form> 
<script src="script.js"></script> 
</body> 
</html> 
script.js 
document.getElementById("profileForm").addEventListener("submit", function(event) { 
event.preventDefault(); // Prevent form submission 
validateProfile(); 
}); 
function validateProfile() { 
const username = document.getElementById("profileUsername").value; 
const email = document.getElementById("profileEmail").value; 
const profileMessageDiv = document.getElementById("profileMessage"); 
profileMessageDiv.textContent = ""; 
// Simple validation 
if (username.length < 3) { 
profileMessageDiv.textContent = "Username must be at least 3 characters."; 
return; 
} 
if (!/\S+@\S+\.\S+/.test(email)) { 
profileMessageDiv.textContent = "Email is not valid."; 
return; 
} 
profileMessageDiv.textContent = "Profile updated successfully!"; 
// You can proceed to update the user profile on the server here 
} 
------------------------------------
Payment page(HTML) 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Payment</title> 
<link rel="stylesheet" href="styles.css"> 
</head> 
<body> 
<h1>Payment</h1> 
<form id="paymentForm"> 
<input type="text" id="cardNumber" placeholder="Card Number" required> 
<input type="text" id="expiryDate" placeholder="MM/YY" required> 
<input type="text" id="cvv" placeholder="CVV" required> 
<button type="submit">Pay</button> 
<div id="paymentMessage" class="error-message"></div> 
</form> 
<script src="script.js"></script> 
</body> 
</html> 
script.js 
document.getElementById("paymentForm").addEventListener("submit", function(event) { 
event.preventDefault(); // Prevent form submission 
validatePayment(); 
}); 
function validatePayment() { 
const cardNumber = document.getElementById("cardNumber").value; 
const expiryDate = document.getElementById("expiryDate").value; 
const cvv = document.getElementById("cvv").value; 
const paymentMessageDiv = document.getElementById("paymentMessage"); 
paymentMessageDiv.textContent = ""; 
// Simple validation 
if (!/^\d{16}$/.test(cardNumber)) { 
paymentMessageDiv.textContent = "Card number must be 16 digits."; 
return; 
} 
if (!/^(0[1-9]|1[0-2])\/\d{2}$/.test(expiryDate)) { 
paymentMessageDiv.textContent = "Expiry date must be in MM/YY format."; 
return; 
} 
if (!/^\d{3}$/.test(cvv)) { 
paymentMessageDiv.textContent = "CVV must be 3 digits."; 
return; 
} 
paymentMessageDiv.textContent = "Payment successful!"; 
// You can proceed to process the payment here 
}
Download PNG Download JPEG Download 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