Scribd
Upload
3 views

index

The document outlines the structure and functionality of a Grocery Management Website, including features for user registration, login, product browsing, and cart management. It utilizes HTML, CSS, and JavaScript to create a responsive interface with various sections like Home, Login, Registration, and Profile. The website allows users to add products to their cart and manage their profiles while ensuring proper validation of user inputs.

Uploaded by

Rushikesh Waghule
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
3 views

index

The document outlines the structure and functionality of a Grocery Management Website, including features for user registration, login, product browsing, and cart management. It utilizes HTML, CSS, and JavaScript to create a responsive interface with various sections like Home, Login, Registration, and Profile. The website allows users to add products to their cart and manage their profiles while ensuring proper validation of user inputs.

Uploaded by

Rushikesh Waghule
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 12

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grocery Management Website</title>
<style>
/* General Styles */
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
background-color: #1e272e; /* Carbonistic dark background */
color: #f1f2f6; /* Light text for contrast */
}

.container {
width: 80%;
margin: auto;
overflow: hidden;
padding: 20px 0;
}

/* Navigation Bar */
nav {
background-color: #2d3436; /* Darker nav background */
color: #fff;
padding: 10px 0;
position: sticky;
top: 0;
}

nav ul {
padding: 0;
list-style: none;
text-align: center;
}

nav li {
display: inline;
margin: 0 20px;
}

nav a {
color: #fff;
text-decoration: none;
font-weight: bold;
transition: color 0.3s ease;
}

nav a:hover {
color: #a4b0af; /* Hover color */
}

/* Form Styles */
form {
background: #2d3436; /* Form background */
padding: 20px;
border-radius: 8px;
margin-bottom: 20px;
}

form label {
display: block;
margin-top: 10px;
color: #a4b0af;
}

form input[type="text"],
form input[type="email"],
form input[type="password"],
form input[type="number"],
form textarea {
width: 100%;
padding: 8px;
margin-top: 5px;
margin-bottom: 10px;
border: 1px solid #485460; /* Input border */
background-color: #353b48; /* Input background */
color: #f1f2f6;
border-radius: 4px;
box-sizing: border-box; /* Ensures padding is included in width */
}

form button {
background-color: #485460; /* Button background */
color: #fff;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
}

form button:hover {
background-color: #353b48; /* Button hover background */
}

/* Product Listing Styles */


.products {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}

.product {
width: 200px;
margin: 20px;
padding: 15px;
background: #2d3436; /* Product card background */
border-radius: 8px;
text-align: center;
}

.product button {
background-color: #485460; /* Add to cart button */
color: #fff;
padding: 8px 12px;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
margin-top: 10px;
}

.product button:hover {
background-color: #353b48; /* Button hover background */
}

/* Cart Styles */
#cart {
margin-top: 20px;
background: #2d3436; /* Cart background */
padding: 20px;
border-radius: 8px;
}

#cart ul {
list-style: none;
padding: 0;
}

#cart li {
padding: 10px 0;
border-bottom: 1px solid #485460;
}

#cart li:last-child {
border-bottom: none;
}

#cart button {
background-color: #c23616; /* Delete button */
color: #fff;
padding: 5px 8px;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
}

#cart button:hover {
background-color: #e55039; /* Delete button hover */
}

/* Footer Style */
footer {
text-align: center;
padding: 20px;
background-color: #2d3436; /* Footer background */
color: #a4b0af;
}

/* Utility Classes */
.hidden {
display: none;
}
.error {
color: #c23616;
margin-top: 5px;
}
</style>
</head>
<body>

<nav>
<div class="container">
<ul>
<li id="navHome"><a href="#" onclick="loadHomePage(); return
false;">Home</a></li>
<li id="navLogin"><a href="#" onclick="showLoginForm(); return
false;">Login</a></li>
<li id="navRegister"><a href="#" onclick="showRegistrationForm();
return false;">Register</a></li>
<li id="navProfile" class="hidden"><a href="#"
onclick="loadProfilePage(); return false;">My Profile</a></li>
<li id="navCart"><a href="#" onclick="loadCartPage(); return
false;">Cart</a></li>
<li id="navLogout" class="hidden"><a href="#" onclick="logout();
return false;">Logout</a></li>

</ul>
</div>
</nav>

<div class="container">
<!-- Registration Form -->
<section id="registrationPage">
<h2>Register</h2>
<form id="registrationForm" onsubmit="return validateRegistration()">
<label for="name">Name:</label>
<input type="text" id="name" name="name" maxlength="50">
<div class="error" id="nameError"></div>

<label for="email">Email:</label>
<input type="email" id="email" name="email">
<div class="error" id="emailError"></div>

<label for="password">Password:</label>
<input type="password" id="password" name="password">
<div class="error" id="passwordError"></div>

<label for="address">Address:</label>
<textarea id="address" name="address" maxlength="100"></textarea>
<div class="error" id="addressError"></div>

<label for="contact">Contact Number:</label>


<input type="number" id="contact" name="contact">
<div class="error" id="contactError"></div>

<button type="submit">Register</button>
</form>
</section>
<!-- Login Form -->
<section id="loginPage">
<h2>Login</h2>
<form id="loginForm" onsubmit="return validateLogin()">
<label for="customerID">Customer ID:</label>
<input type="text" id="customerID" name="customerID">
<div class="error" id="customerIDError"></div>

<label for="loginPassword">Password:</label>
<input type="password" id="loginPassword" name="loginPassword">
<div class="error" id="loginPasswordError"></div>

<button type="submit">Login</button>
<p>
<a href="#" onclick="showRegistrationForm(); return
false;">Register Yourself</a>
</p>
</form>
</section>

<!-- Home Page -->


<section id="homePage" class="hidden">
<h2 id="homeHeader">Hello to Online Grocery Store</h2>

<h3>Products</h3>
<div class="products" id="productsList">
<!-- Product items will be dynamically added here -->
</div>

<h3>Cart</h3>
<div id="cart">
<ul id="cartItems">
<!-- Cart items will be dynamically added here -->
</ul>
<p><strong>Summary: $<span id="cartTotal">0.00</span></strong></p>
<button onclick="checkout()">Checkout</button>
</div>
</section>

<!-- Profile Page -->


<section id="profilePage" class="hidden">
<h2>My Profile</h2>
<div id="profileDetails">
<!-- Profile details will be dynamically added here -->
</div>
<!-- Update Profile Form (hidden by default) -->
<form id="updateProfileForm" class="hidden">
<label for="updateName">Name:</label>
<input type="text" id="updateName" name="updateName">
<div class="error" id="updateNameError"></div>
<label for="updateEmail">Email:</label>
<input type="email" id="updateEmail" name="updateEmail">
<div class="error" id="updateEmailError"></div>
<label for="updateAddress">Address:</label>
<textarea id="updateAddress" name="updateAddress"></textarea>
<div class="error" id="updateAddressError"></div>
<label for="updateContact">Contact Number:</label>
<input type="number" id="updateContact" name="updateContact"
oninput="validateContact()">
<div class="error" id="updateContactError"></div>
<button type="submit" onclick="saveProfileChanges(); return
false;">Save Changes</button>
</form>
<button onclick="updateProfile()">Update</button>
</section>

<!-- Order Confirmation Message -->


<section id="orderConfirmation" class="hidden">
<h2>Order Placed Successfully!</h2>
</section>
</div>

<footer>
<p>&copy; 2024 Grocery Management System</p>
</footer>

<script>
// --- State Management ---
let isLoggedIn = false;
let currentUser = null;
let cart = [];
let products = [
{ id: 1, name: "Apples", price: 2.00 },
{ id: 2, name: "Bananas", price: 1.50 },
{ id: 3, name: "Milk", price: 3.50 },
{ id: 4, name: "Bread", price: 2.50 }
];

// --- Utility Functions ---


function showSection(sectionId) {
const sections = ['registrationPage', 'loginPage', 'homePage',
'profilePage', 'orderConfirmation'];
sections.forEach(id => {
document.getElementById(id).classList.add('hidden');
});
document.getElementById(sectionId).classList.remove('hidden');
}

// --- Registration Functions ---


function showRegistrationForm() {
showSection('registrationPage');
}

function validateRegistration() {
let isValid = true;
resetErrors();

// --- Name Validation ---


let name = document.getElementById('name').value;
if (!name) {
document.getElementById('nameError').innerText = 'Name is
required';
isValid = false;
} else if (!/^[a-zA-Z\s]+$/.test(name)) {
document.getElementById('nameError').innerText = 'Name must contain
only alphabets';
isValid = false;
}
// --- Email Validation ---
let email = document.getElementById('email').value;
if (!email) {
document.getElementById('emailError').innerText = 'Email is
required';
isValid = false;
} else if (!/@/.test(email)) {
document.getElementById('emailError').innerText = 'Email must
contain @';
isValid = false;
}

// --- Password Validation ---


let password = document.getElementById('password').value;
if (!password) {
document.getElementById('passwordError').innerText = 'Password is
required';
isValid = false;
} else if (password.length < 5 || !/[A-Z]/.test(password) || !/[0-
9]/.test(password) || !/[^a-zA-Z0-9]/.test(password)) {
document.getElementById('passwordError').innerText = 'Password must
be at least 5 characters long and contain 1 uppercase letter, 1 number, and 1
special character';
isValid = false;
}

// --- Address Validation ---


let address = document.getElementById('address').value;
if (!address) {
document.getElementById('addressError').innerText = 'Address is
required';
isValid = false;
}

// --- Contact Validation ---


let contact = document.getElementById('contact').value;
if (!contact) {
document.getElementById('contactError').innerText = 'Contact is
required';
isValid = false;
} else if (!/^\d{10}$/.test(contact)) {
document.getElementById('contactError').innerText = 'Contact must
be 10 digits';
isValid = false;
}

if (isValid) {
registerUser();
return false; // Prevent form submission
} else {
return false; // Prevent form submission
}
}

function registerUser() {
// Basic user object creation for demonstration
currentUser = {
name: document.getElementById('name').value,
email: document.getElementById('email').value,
password: document.getElementById('password').value,
address: document.getElementById('address').value,
contact: document.getElementById('contact').value,
customerID: 'CUST' + Date.now() // Generate a unique Customer ID
};
alert('Registration Successful! Your Customer ID is: ' +
currentUser.customerID);
showLoginForm(); // Redirect to login after successful registration
}

function resetErrors() {
let errors = document.querySelectorAll('.error');
errors.forEach(error => error.innerText = '');
}

// --- Login Functions ---


function showLoginForm() {
showSection('loginPage');
}

function validateLogin() {
let customerID = document.getElementById('customerID').value;
let password = document.getElementById('loginPassword').value;

if (!customerID) {
document.getElementById('customerIDError').innerText = 'Customer ID
is required';
return false;
}

if (!password) {
document.getElementById('loginPasswordError').innerText = 'Password
is required';
return false;
}

// --- Authentication Logic ---


if (currentUser && currentUser.customerID === customerID &&
currentUser.password === password) {
isLoggedIn = true;
loadHomePage();
return false;
} else {
alert('Invalid Login');
return false;
}
}

function updateNav() {
document.getElementById('navLogin').classList.toggle('hidden',
isLoggedIn);
document.getElementById('navRegister').classList.toggle('hidden',
isLoggedIn);
document.getElementById('navProfile').classList.toggle('hidden', !
isLoggedIn);
document.getElementById('navLogout').classList.toggle('hidden', !
isLoggedIn);
}

// --- Home Page Functions ---


function loadHomePage() {
if (!isLoggedIn) {
showLoginForm();
return;
}

updateNav();
showSection('homePage');
document.getElementById('homeHeader').innerText = `Hello $
{currentUser.name} to Online Grocery Store`;
displayProducts();
}

function displayProducts() {
let productsList = document.getElementById('productsList');
productsList.innerHTML = ''; // Clear existing products

products.forEach(product => {
let productDiv = document.createElement('div');
productDiv.className = 'product';
productDiv.innerHTML = `
<h3>${product.name}</h3>
<p>Price: $${product.price.toFixed(2)}</p>
<button onclick="addToCart(${product.id})">Add to Cart</button>
`;
productsList.appendChild(productDiv);
});
}

// --- Cart Functions ---


function addToCart(productId) {
let product = products.find(p => p.id === productId);
if (product) {
cart.push(product);
updateCartDisplay();
}
}

function updateCartDisplay() {
let cartItemsList = document.getElementById('cartItems');
let cartTotalDisplay = document.getElementById('cartTotal');

cartItemsList.innerHTML = ''; // Clear existing items

let total = 0;
cart.forEach(item => {
let listItem = document.createElement('li');
listItem.innerHTML = `
${item.name} - $${item.price.toFixed(2)}
<button onclick="deleteFromCart(${item.id})">Delete</button>
`;
cartItemsList.appendChild(listItem);
total += item.price;
});

cartTotalDisplay.innerText = total.toFixed(2);
}

function deleteFromCart(productId) {
cart = cart.filter(item => item.id !== productId);
updateCartDisplay();
}

function loadCartPage() {
if (!isLoggedIn) {
showLoginForm();
return;
}
updateNav();
showSection('homePage'); // Ensure home page is displayed
updateCartDisplay(); // Refresh cart display
// Optionally scroll to the cart section
document.getElementById('cart').scrollIntoView({ behavior: 'smooth' });
}

function checkout() {
cart = []; // Clear the cart
updateCartDisplay();
showSection('orderConfirmation');
}

// --- Profile Functions ---


function loadProfilePage() {
if (!isLoggedIn) {
showLoginForm();
return;
}
updateNav();

showSection('profilePage');
let profileDetailsDiv = document.getElementById('profileDetails');
profileDetailsDiv.innerHTML = `

`;
loadProfileDetails();
}
function loadProfileDetails(){
document.getElementById('profileDetails').innerHTML = `
<p><strong>Name:</strong> ${currentUser.name}</p>
<p><strong>Email:</strong> ${currentUser.email}</p>
<p><strong>Address:</strong> ${currentUser.address}</p>
<p><strong>Contact:</strong> ${currentUser.contact}</p>
<p><strong>Customer ID:</strong> ${currentUser.customerID}</p>
`;
}

function validateContact(){
const updatedContact = document.getElementById('updateContact').value;
if (updatedContact.length < 10 ) {
document.getElementById('updateContactError').innerText = 'Contact
must be 10 digits';
} else if(updatedContact.length > 10){
document.getElementById('updateContactError').innerText = 'Contact
must be 10 digits';
} else {
document.getElementById('updateContactError').innerText = '';

}
}

// Function to show the update profile form


function updateProfile() {
// Hide profile details and show the update form
document.getElementById('profileDetails').classList.add('hidden');

document.getElementById('updateProfileForm').classList.remove('hidden');

// Populate the form fields with current user data


document.getElementById('updateName').value = currentUser.name;
document.getElementById('updateEmail').value = currentUser.email;
document.getElementById('updateAddress').value = currentUser.address;
document.getElementById('updateContact').value = currentUser.contact;
resetErrors();
}

// Function to save the profile changes


function saveProfileChanges() {
// Get the updated values from the form
const updatedName = document.getElementById('updateName').value;
const updatedEmail = document.getElementById('updateEmail').value;
const updatedAddress = document.getElementById('updateAddress').value;
const updatedContact = document.getElementById('updateContact').value;

let isValid=true;
if(!updatedName) {
document.getElementById('updateNameError').innerText = 'Name is
required';
isValid = false;

} else if (!/^[a-zA-Z\s]+$/.test(updatedName)) {
document.getElementById('updateNameError').innerText = 'Name must
contain only alphabets';
isValid = false;
}
if(!updatedEmail) {
document.getElementById('updateEmailError').innerText = 'Email is
required';
isValid = false;
} else if (!/@/.test(updatedEmail)) {
document.getElementById('updateEmailError').innerText = 'Email must
contain @';
isValid = false;
}
if(!updatedAddress) {
document.getElementById('updateAddressError').innerText = 'Address
is required';
isValid = false;
}
if(!updatedContact) {
document.getElementById('updateContactError').innerText = 'Contact
is required';
isValid = false;
}else if (updatedContact.length < 10) {
document.getElementById('updateContactError').innerText = 'Contact
must be 10 digits';

isValid = false;
}else if (updatedContact.length > 10) {
isValid=false;
}
if(isValid){
currentUser.name = updatedName;
currentUser.email = updatedEmail;
currentUser.address= updatedAddress;
currentUser.contact= updatedContact;
// Hide the update form and show the updated profile details
document.getElementById('profileDetails').classList.remove('hidden');
document.getElementById('updateProfileForm').classList.add('hidden');

loadProfilePage();
}else{
return false;
}

// --- Logout Function ---


function logout() {
isLoggedIn = false;
currentUser = null;
showLoginForm();
updateNav();
}

// --- Initialization ---


document.addEventListener('DOMContentLoaded', function () {
showLoginForm(); // Show login form on page load
});
</script>

</body>
</html>

You might also like