invoice.jsp

 <%@ page language="java" contentType="text/html; charset=ISO-8859-1"

pageEncoding="ISO-8859-1"%>


<!DOCTYPE html>


<html lang="en">


<head>


<meta charset="ISO-8859-1">


<meta name="viewport" content="width=device-width, initial-scale=1.0">


<title>Invoice - Online Grocery Store</title>


<link rel="stylesheet" href="styles.css">


<script src="js/script.js" defer></script>


</head>


<body>


<header>


<div class="header-container">


<h1>Online Grocery Store</h1>


<nav>


<a href="home.jsp">Home</a>


<a href="products.jsp">Products</a>


<a href="cart.jsp">Cart</a>


<a href="profile.jsp">Profile</a>


<a href="login.jsp">Login</a>


<a href="register.jsp">Register</a>


</nav>


</div>


</header>




<main>


<section class="invoice-section">


<h2>Invoice</h2>


<p>Thank you for your purchase! Below are the details of your order:</p>




<table class="invoice-table">


<thead>


<tr>


<th>Item</th>


<th>Quantity</th>


<th>Price</th>


<th>Total</th>


</tr>


</thead>


<tbody>


<c:forEach var="item" items="${cart.items}">


<tr>


<td>${item.name}</td>


<td>${item.quantity}</td>


<td>$${item.price}</td>


<td>$${item.quantity * item.price}</td>


</tr>


</c:forEach>


</tbody>


<tfoot>


<tr>


<td colspan="3" class="total-label">Subtotal:</td>


<td>$${cart.subtotal}</td>


</tr>


<tr>


<td colspan="3" class="total-label">Tax (10%):</td>


<td>$${cart.subtotal * 0.1}</td>


</tr>


<tr>


<td colspan="3" class="total-label">Total:</td>


<td>$${cart.subtotal + (cart.subtotal * 0.1)}</td>


</tr>


</tfoot>


</table>




<div class="invoice-actions">


<button onclick="window.print()" class="btn-primary">Print Invoice</button>

<br><br>

<a href="home.jsp" class="btn-secondary">Continue Shopping</a>


</div>


</section>


</main>




<footer>


<p>&copy; 2024 Online Grocery Store</p>


</footer>


</body>


</html>




Comments

Post a Comment

Popular posts from this blog

fruit.jsp

 <%@ page language="java" contentType="text/html; charset=ISO-8859-1"     pageEncoding="ISO-8859-1"%>     <%@ page import="cart.CartItem" %>      <!DOCTYPE html> <html lang="en"> <head>   <meta charset="ISO-8859-1">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Online Grocery Store - Home</title>     <link rel="stylesheet" href="home.css">     <script src="js/script.js" defer></script> </head> <body>     <header>         <div class="header-container">             <h1>Online Grocery Store</h1>             <nav>                 <a href="home.jsp">Home</a>                 <...
Read more
const btnCart = document.querySelector('#cart-icon'); const cart = document.querySelector('.cart'); const btnClose = document.querySelector('#cart-close'); btnCart.addEventListener('click', () => { cart.classList.add('cart-active'); }); btnClose.addEventListener('click', () => { cart.classList.remove('cart-active'); }); document.addEventListener('DOMContentLoaded', () => { loadContent(); loadFood(); }); function loadFood() { // Any initialization related to food items can be placed here } function loadContent() { // Retrieve item list from localStorage itemList = JSON.parse(localStorage.getItem('cartItems')) || []; // Remove Food Items From Cart let btnRemove = document.querySelectorAll('.cart-remove'); btnRemove.forEach((btn) => { btn.addEventListener('click', removeItem); }); // Product Item Change Event let qtyElements = document.querySelectorAll('.ca...
Read more
/* General Styles */ body {     font-family: Arial, sans-serif;     background-color: #f4fdf4; /* Light green background */     color: #333;     margin: 0;     padding: 0; } /* Header and Navigation */ header {     background-color: #2d572c; /* Dark green */     color: white;     padding: 10px 20px;     position: sticky;     top: 0;     z-index: 1000; } .header-container {     display: flex;     justify-content: space-between;     align-items: center; } nav {     display: flex;     justify-content: space-between;     width: 100%;     align-items: center; } .nav-left, .nav-center, .nav-right {     display: flex;     align-items: center; } .nav-center {     justify-content: center;     flex-grow: 1; } .nav-link {     color: white;     text-decoration: n...
Read more