Untitled

avatar
unknown
plain_text
2 years ago
13 kB
8
Indexable
/////////////Registeration html//////////////////////////////////////


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./Registration_page.css">
  <script src="./Registeration_page.js" defer></script>
  <title>Registration</title>
  </head>
<body>

  <div id="form">
    <h2>Customer Registration</h2>
    <form id="registrationForm" onsubmit="register(event)">
        <div class="input-box">
            <label for="customerName">Customer Name:</label>
            <input type="text" id="customerName" maxlength="50" required>
        </div>
        <div class="input-box">
            <label for="email">Email:</label>
            <input type="text" id="email" required>
        </div>
        <div class="input-box">
            <label for="password">Password:</label>
            <input type="password" id="password" maxlength="30" required>
        </div>
        <div class="input-box">
            <label for="address">Address:</label>
            <textarea id="address" maxlength="100" required></textarea>
        </div>
        <div class="input-box">
            <label for="contactNumber">Contact Number:</label>
            <input type="text" id="contactNumber" maxlength="10" required>
        </div>
    <button type="submit">Register</button>
    </form>
  </div>

  <div id="acknowledgment">
    <h2>Registration Successful</h2>
    <p id="custId"></p>
    <p id="ackName"></p>
    <p id="ackEmail"></p>
  </div>
</body>
</html>



///////////////////////////////////Registration Css////////////////////////////////////

body {
      font-family: Arial, sans-serif;
}

#form {
      max-width: 400px;
      margin: 50px auto;
      padding: 20px;
      border: 1px solid #ccc;
      border-radius: 5px;
      align-items: center;
}
.input-box{
    display: flex;
    align-items: center;
    margin-bottom: 2px;
}
.input-box label{
    width: 50%;
}
.input-box input{
    width: 50%;
}
button{
    margin: auto 30%;
}

#acknowledgment {
      display: none;
      max-width: 400px;
      margin: 50px auto;
      padding: 20px;
      border: 1px solid #d45454;
      border-radius: 5px;
      background-color: #f8f8f8;
      color: #d45454;
}




///////////////////////////////Regisration js/////////////////////////////////////////

function register(event) {
    event.preventDefault();
    if (!validName() || !validEmail() || !validPassword() || !validAddress() || !validNumber()) {
        return;
    }
      const customerId = Math.floor(Math.random() * 1000000);
      const customerName = document.getElementById('customerName').value;
      const email = document.getElementById('email').value;

    
      document.getElementById('custId').innerText = `Customer ID: ${customerId}`;
      document.getElementById('ackName').innerText = `Customer Name: ${customerName}`;
      document.getElementById('ackEmail').innerText = `Email: ${email}`;
      document.getElementById('acknowledgment').style.display = 'block';
      

}

function validName() {
    const customerName = document.getElementById('customerName').value;
    if (!/^[a-zA-Z]+$/.test(customerName)) {
    alert("Customer Name must have alphabets only");
    return false;
    }
    return true;
}

function validEmail() {
    const email = document.getElementById('email').value;
    if (!/@/.test(email)) {
    alert("Email id not valid");
    return false;
    }
    return true;
}

function validPassword() {
    const password = document.getElementById('password').value;
    if (password.length <8  || !/[A-Z]/.test(password) || !/\d/.test(password) || !/[@#$%^&*()_+!]/.test(password)) {
    alert("Password is not matching the criteria");
    return false;
    }
    return true;
}

function validAddress() {
    const address = document.getElementById('address').value;
    if (!address.trim()) {
    alert("Address field must not be blank or null");
    return false;
    }
    return true;
}

function validNumber() {
    const contactNumber = document.getElementById('contactNumber').value;
    if (!/^\d+$/.test(contactNumber)) {
    alert("Contact number must not have any alphabets");
    return false;
    }
    return true;
}








//////////////////////////Login html////////////////////////////////////
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./Login_page.css">
  <script src="./Login_page.js" defer></script>
  <title>Login</title>
  </head>
<body>
    <div id="login-form">
        <h2>Login</h2>
        <form id="loginForm" onsubmit="login(event)">
            <div class="input-box">
                <label for="customerId">Customer ID:</label>
                <input type="text" id="customerId" required>
            </div>
            <div class="input-box">
                <label for="password">Password:</label>
                <input type="password" id="password" maxlength="30" required>
            </div>
            <button type="submit">Login</button>
        </form>
        <p id="message"></p>
        <p> New User? <span id="registration-link" onclick="openRegistrationForm()">Register Yourself</span></p>
    </div>
</body>
</html>



//////////////////////////login css///////////////////////////////////////////

body {
      font-family: Arial, sans-serif;
}

#login-form {
      max-width: 400px;
      margin: 50px auto;
      padding: 20px;
      border: 1px solid #ccc;
      border-radius: 5px;
}
.input-box{
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}
button{
    margin:auto 30%;
}

#registration-link {
      color: blue;
      cursor: pointer;
}

#message {
      color: red;
      margin-top: 10px;
}


///////////////////////login js////////////////////////////////////

function login(event) {
    event.preventDefault();
    window.location.href = "./Home_page.html";
}
function openRegistrationForm() {
    window.location.href = "./Registeration_page.html"; 
}














/////////////////////////////////Home html//////////////////////////////////////////

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./Home_page.css">
  <script src="./Home_page.js" defer></script>
  <title>Home</title>
</head>
<body>
    

    <nav>
        <a href="#" onclick="redirectToHome()">Home</a>
        <a href="#" onclick="viewProfile()">My Profile</a>
        <a href="#" onclick="viewCart()">Cart</a>
        <a href="#" onclick="logout()">Logout</a>
    </nav>

    <header>
        Hello <span id="userName">Ronak Vijayvergia</span> to Online Grocery Store
    </header>

    <div id="productContainer">
        
    </div>

</body>
</html>

/////////////////////////home css////////////////////////

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}
header {
    background-color: #d45454;
    color: white;
    text-align: center;
    padding: 15px;
    font-size: 20px;
}
nav {
    background-color: #333;
    overflow: hidden;
}
nav a {
    float: left;
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
.product {
    border: 1px solid #ddd;
    padding: 15px;
    margin: 10px;
    text-align: center;
}
.product button {
    background-color: #d45454;
    color: white;
    padding: 8px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
.cart {
    float: left;
    width: 50%;
    padding: 20px;
}
.summary {
    float: right;
    width: 50%;
    padding: 20px;
}
#checkoutBtn {
    background-color: #d45454;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

#orderMessage {
    color: #d45454;
    font-weight: bold;
}
#invoice {
    margin-top: 20px;
}


/////////////////////////home js////////////////////////////////////////

const userName = "Ronak Vijayvergia";
function redirectToHome() {
    window.location.href = "./Home_page.html";
}
function viewProfile() {
    alert("Viewing/Updating Profile");
}
function viewCart() {
    window.location.href = "./Cart.html";
    }
function logout() {
    window.location.href = "./Login_page.html"; 
}
function addToCart(productName) {
  alert(`Adding ${productName} to the cart`);
}
const products = [
    { name: "Product 1", price: "Rs 100" },
    { name: "Product 2", price: "Rs 1500" },
    { name: "Product 3", price: "Rs 130" },
    { name: "Product 4", price: "Rs 170" },
    { name: "Product 5", price: "Rs 140" },
    { name: "Product 6", price: "Rs 100" },
    { name: "Product 7", price: "Rs 110" },
    { name: "Product 8", price: "Rs 50" },
    { name: "Product 9", price: "Rs 350" },
    { name: "Product 10", price: "Rs 850" },
    // Add more products as needed
];
window.onload = function () {
    loadProducts();
  };

function loadProducts() {
    const productContainer = document.getElementById("productContainer");
    products.forEach(product => {
      const productElement = document.createElement("div");
      productElement.classList.add("product");
      productElement.innerHTML = `<p>${product.name}</p><p>${product.price}</p>
        <button onclick="addToCart('${product.name}')">Add to Cart</button>`;
      productContainer.appendChild(productElement);
    });
  }







///////////////////////////Cart html//////////////////////////////

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./Cart.css">
  <script src="./Cart.js" defer></script>
  <title>Cart</title>
  
</head>
<body>
    <nav>
        <a href="#" onclick="ToHome()">Home</a>
        <a href="#" onclick="Profile()">My Profile</a>
        <a href="#" onclick="Cart()">Cart</a>
        <a href="#" onclick="logout()">Logout</a>
    </nav>

    <header>
        Hello <span id="userName">Ronak Vijayvergia</span> to Online Grocery Store
    </header>
    <div id="cartContainer">
        <div id="cartItems">
        </div>
    <div id="summary">
      <h3>Summary</h3>
      <div id="invoice">
         <p>Product 1 - Rs 100</p><p>Product 2 - Rs 1300</p><p>Total Amount: Rs 1400</p>
      </div>
      <button id="checkoutBtn" onclick="checkout()">Checkout</button>
      <p id="orderMessage"></p>
    </div>
  </div>
</body>
</html>



/////////////////////cart css//////////////////////////////////////

#cartContainer {
    display: flex;
    justify-content: space-between;
}

#cartItems {
    width: 50%;
}

#summary {
    width: 45%;
    background-color: #f8f8f8;
    padding: 10px;
    border: 1px solid #ddd;
}

#checkoutBtn {
    background-color: #d45454;
    color: white;
    padding: 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

#orderMessage {
    color: #d45454;
    font-weight: bold;
}

.product {
    border: 1px solid #ddd;
    padding: 10px;
    margin: 5px 0;
    display: flex;
    justify-content: space-between;
}

.deleteBtn {
    background-color: black;
    color: white;
    border: none;
    padding: 5px;
    cursor: pointer;
}
header {
background-color: #d45454;
color: white;
text-align: center;
padding: 15px;
margin-bottom: 20px;
font-size: 20px;
}
nav {
background-color: #333;
overflow: hidden;
}
nav a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}


/////////////////////////////cart js/////////////////////////////////

function ToHome() {
window.location.href = "./Home_page.html";
}
function Profile() {
alert("Viewing/Updating Profile");
}
function Cart() {
window.location.href = "./Cart.html";
}
function logout() {
window.location.href = "./Login_page.html"; 
}
function checkout() {
    document.getElementById("orderMessage").innerText = "Order Placed Successfully";
}
function removeFromCart(productName) {
    alert(`Removing ${productName} from the cart`);
}
window.onload = function () {
    CartItems();
};
function CartItems() {
    const cartItemsContainer = document.getElementById("cartItems");
    const cartItems = [
    { name: "Product 1", price: "Rs 100" },
    { name: "Product 2", price: "Rs 1300" },
    ];
    cartItems.forEach(item => {
    const productElement = document.createElement("div");
    productElement.classList.add("product");
    productElement.innerHTML = `<span>${item.name}</span>
        <span>${item.price}</span>
        <button class="deleteBtn" onclick="removeFromCart('${item.name}')">Delete</button>`;
    cartItemsContainer.appendChild(productElement);
    });
}




////////////////////////////////////END////////////////////////////////////////////////////////////
Editor is loading...
Leave a Comment