<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kamran General Store - Sell Items</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
.container {
width: 80%;
margin: 20px auto;
background-color: #fff;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1, h2 {
text-align: center;
}
label {
display: block;
margin-bottom: 5px;
}
input, select {
width: 100%;
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
padding: 10px 15px;
background-color: #28a745;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #218838;
}
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}
th, td {
padding: 10px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: #f8f9fa;
}
.footer {
text-align: center;
margin-top: 20px;
font-size: 14px;
color: #555;
}
.no-print {
display: block;
}
@media print {
.no-print {
display: none;
}
.footer {
display: block;
}
}
</style>
</head>
<body>
<div class="container">
<h1>Kamran General Store</h1>
<form id="itemForm" class="no-print">
<label for="itemName">Select Product:</label>
<select id="itemName" onchange="updatePrice()" required>
<option value="" disabled selected>Select a product</option>
<option value="Sugar">Sugar</option>
<option value="Flour">Flour</option>
<option value="Rice">Rice</option>
<option value="Tea">Tea</option>
<option value="Cooking Oil">Cooking Oil</option>
<option value="Milk">Milk</option>
<option value="Bread">Bread</option>
<option value="Eggs">Eggs</option>
<option value="Soap">Soap</option>
<option value="Toothpaste">Toothpaste</option>
</select>
<label for="itemPrice">Price (PKR):</label>
<input type="number" id="itemPrice" readonly>
<label for="itemQuantity">عدد / کلو گرام :</label>
<input type="number" id="itemQuantity" required>
<select id="unitType">
<option value="عدد">عدد</option>
<option value="کلو گرام">کلو گرام </option>
</select>
<button type="submit">Add Item</button>
</form>
<form id="discountForm" class="no-print">
<label for="discount">Discount (PKR):</label>
<input type="number" id="discount" value="0" min="0">
<button type="button" onclick="applyDiscount()">Discount</button>
</form>
<h2>Items List</h2>
<table id="itemsTable">
<thead>
<tr>
<th>نام اشیاء </th>
<th>قیمت</th>
<th>تعداد / کلو گرام </th>
<th>کل قیمت </th>
</tr>
</thead>
<tbody>
<!-- Items will be added here -->
</tbody>
<tfoot>
<tr>
<td colspan="3" style="text-align: right;"><strong>Subtotal:</strong></td>
<td id="subtotal">0.00 Rs</td>
</tr>
<tr>
<td colspan="3" style="text-align: right;"><strong>Discount:</strong></td>
<td id="discountAmount">0.00 Rs</td>
</tr>
<tr>
<td colspan="3" style="text-align: right;"><strong>Grand Total:</strong></td>
<td id="grandTotal">0.00 Rs</td>
</tr>
</tfoot>
</table>
<div class="no-print">
<button onclick="printItems()">Print Items</button>
</div>
</div>
<div class="footer no-print">
Kamran General Store, Langrial Road Kotla Arb Ali Khan.<br>
Mobile No# 03001234567
</div>
<script>
const productPrices = {
"Sugar": 120,
"Flour": 80,
"Rice": 200,
"Tea": 500,
"Cooking Oil": 400,
"Milk": 100,
"Bread": 50,
"Eggs": 150,
"Soap": 60,
"Toothpaste": 120
};
let subtotal = 0;
let discount = 0;
function updatePrice() {
const selectedProduct = document.getElementById('itemName').value;
document.getElementById('itemPrice').value = productPrices[selectedProduct];
}
document.getElementById('itemForm').addEventListener('submit', function(event) {
event.preventDefault();
const itemName = document.getElementById('itemName').value;
const itemPrice = parseFloat(document.getElementById('itemPrice').value);
const itemQuantity = parseFloat(document.getElementById('itemQuantity').value);
const unitType = document.getElementById('unitType').value;
const total = itemPrice * itemQuantity;
subtotal += total;
const tableBody = document.querySelector('#itemsTable tbody');
const newRow = document.createElement('tr');
newRow.innerHTML = `
<td>${itemName}</td>
<td>${itemPrice.toFixed(2)} PKR</td>
<td>${itemQuantity} ${unitType}</td>
<td>${total.toFixed(2)} PKR</td>
`;
tableBody.appendChild(newRow);
updateTotals();
document.getElementById('itemForm').reset();
});
function applyDiscount() {
discount = parseFloat(document.getElementById('discount').value) || 0;
updateTotals();
}
function updateTotals() {
document.getElementById('subtotal').textContent = `${subtotal.toFixed(2)} Rs`;
document.getElementById('discountAmount').textContent = `${discount.toFixed(2)} Rs`;
document.getElementById('grandTotal').textContent = `${(subtotal - discount).toFixed(2)} Rs`;
}
function printItems() {
const printContents = `
<h1>Kamran General Store</h1>
${document.getElementById('itemsTable').outerHTML}
<div class="footer">
Kamran General Store, Langrial Road Kotla Arb Ali Khan.<br>
Mobile No# 03001234567
</div>
`;
const originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
window.location.reload();
}
</script>
</body>
</html>
Kamran General Store
Items List
| نام اشیاء | قیمت | تعداد / کلو گرام | کل قیمت |
|---|---|---|---|
| Subtotal: | 0.00 Rs | ||
| Discount: | 0.00 Rs | ||
| Grand Total: | 0.00 Rs | ||
.jpeg){kind=avatar}
No comments:
Post a Comment