1) registration.
html (With Client Side Validation)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Cart</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<div class="container">
<h2>Your Cart</h2>
<div id="cartItems"></div>
<h3 id="total" class="total">Total: $0</h3>
<button onclick="checkout()" class="btn">Checkout</button>
</div>
<script>
let cart = [Link]([Link]("cart")) || [];
let total = 0;
let output = "";
if ([Link] === 0) {
output = "<p style='text-align:center;'>Cart is empty!</p>";
} else {
[Link]((item, index) => {
output += `<p>${index + 1}. ${[Link]} -
$${[Link]}</p>`;
total += [Link];
});
}
[Link]("cartItems").innerHTML = output;
[Link]("total").innerText = "Total: $" +
[Link](2);
function checkout() {
if ([Link] === 0) {
alert("Cart is empty! Add products first.");
return;
alert("Order Placed Successfully!");
[Link]("cart");
[Link] = "[Link]"; // Redirect to output page
</script>
</body>
</html>
2) [Link] (With Client Side Validation)
<!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="[Link]">
<script>
function validateLogin() {
let username =
[Link]("loginUser").[Link]();
let password =
[Link]("loginPass").[Link]();
let savedUser = [Link]("username");
let savedPass = [Link]("password");
if (username === "" || password === "") {
alert("All fields are required!");
return false;
if (savedUser === null || savedPass === null) {
alert("Please Register first!");
return false;
if (username !== savedUser || password !== savedPass) {
alert("Invalid Username or Password!");
return false;
alert("Login Successful!");
[Link] = "[Link]"; // Correct page name
return false;
</script>
</head>
<body>
<body class="center-page">
<div class="container">
<form class="form" onsubmit="return validateLogin()">
<h2>Login</h2>
<input type="text" id="loginUser" placeholder="Username">
<input type="password" id="loginPass" placeholder="Password">
<button type="submit" class="btn">Login</button>
<p>Don't have an account? <a
href="[Link]">Register</a></p>
</form>
</div>
</body>
</html>
3) [Link]
/* ====== Global ====== */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
body {
font-family: Arial, sans-serif;
background: linear-gradient(to right, #dfe9f3, #ffffff);
min-height: 100vh;
/* ====== Center container ONLY for login/register ====== */
.center-page {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
/* ====== Container ====== */
.container {
width: 90%;
max-width: 900px;
background: white;
padding: 25px;
border-radius: 12px;
margin: 30px auto;
box-shadow: 0px 5px 12px rgba(0,0,0,0.2);
/* ====== Form ====== */
.form {
display: flex;
flex-direction: column;
gap: 12px;
.form h2 {
text-align: center;
margin-bottom: 10px;
color: #333;
input {
padding: 12px;
border: 1px solid #aaa;
border-radius: 8px;
font-size: 16px;
outline: none;
input:focus {
border-color: green;
box-shadow: 0px 0px 5px rgba(0, 128, 0, 0.4);
}
/* ====== Buttons ====== */
.btn {
padding: 12px;
background: green;
color: white;
font-size: 16px;
border: none;
border-radius: 8px;
cursor: pointer;
text-decoration: none;
text-align: center;
transition: 0.3s;
display: inline-block;
.btn:hover {
background: darkgreen;
transform: scale(1.02);
/* ====== Links ====== */
a{
text-decoration: none;
color: green;
font-weight: bold;
a:hover {
text-decoration: underline;
}
/* ====== Catalog Grid ====== */
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 20px;
margin-top: 20px;
/* ====== Cards ====== */
.card {
border: 1px solid #ddd;
padding: 15px;
border-radius: 12px;
text-align: center;
background: #f9f9f9;
transition: 0.3s;
.card:hover {
box-shadow: 0px 5px 12px rgba(0,0,0,0.2);
transform: translateY(-5px);
/* ====== Responsive ====== */
@media (max-width: 600px) {
.container {
padding: 15px;
input {
font-size: 14px;
}
.btn {
font-size: 14px;
4) [Link] :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Catalog</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<div class="container">
<h2>Catalog Page</h2>
<p>Welcome! You have successfully logged in.</p>
<a href="[Link]" class="btn" style="text-decoration:none; text-
align:center;">Go to Cart</a>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Catalog</title>
<link rel="stylesheet" href="[Link]">
<script>
function addToCart(product, price) {
let cart = [Link]([Link]("cart")) || [];
[Link]({ product, price });
[Link]("cart", [Link](cart));
alert(product + " added to cart!");
</script>
</head>
<body>
<div class="container">
<h2>Catalog Page</h2>
<div class="grid">
<div class="card">
<h3>Product 1</h3>
<p>Price: $10.99</p>
<button onclick="addToCart('Product 1', 10.99)" class="btn">Add to
Cart</button>
</div>
<div class="card">
<h3>Product 2</h3>
<p>Price: $15.99</p>
<button onclick="addToCart('Product 2', 15.99)" class="btn">Add to
Cart</button>
</div>
</div>
<br>
<a href="[Link]" class="btn">Go to Cart</a>
</div>
</body>
</html>
5) [Link]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Cart</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<div class="container">
<h2>Your Cart</h2>
<div id="cartItems"></div>
<h3 id="total" class="total">Total: $0</h3>
<button onclick="checkout()" class="btn">Checkout</button>
</div>
<script>
let cart = [Link]([Link]("cart")) || [];
let total = 0;
let output = "";
if ([Link] === 0) {
output = "<p style='text-align:center;'>Cart is empty!</p>";
} else {
[Link]((item, index) => {
output += `<p>${index + 1}. ${[Link]} -
$${[Link]}</p>`;
total += [Link];
});
[Link]("cartItems").innerHTML = output;
[Link]("total").innerText = "Total: $" +
[Link](2);
function checkout() {
if ([Link] === 0) {
alert("Cart is empty! Add products first.");
return;
alert("Order Placed Successfully!");
[Link]("cart");
[Link] = "[Link]"; // Redirect to output page
</script>
</body>
</html>
6) [Link]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Checkout</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<div class="container">
<h2>Checkout Successful ✅</h2>
<p style="text-align:center; font-size:18px; margin-top:15px;">
Thank you for shopping! Your order has been placed successfully.
</p>
<br>
<div style="text-align:center;">
<a href="[Link]" class="btn">Back to Catalog</a>
</div>
</div>
</body>
</html>