Scribd
Upload
3 views

carts

The document is a web application code for a food cart system that calculates the total cost of items based on user input quantities and prices. It includes HTML for the user interface, CSS for styling, and JavaScript for handling calculations and interactions. The application displays a menu cart, allows cash tendered input, and calculates change due to the customer.

Uploaded by

vivianpunay6
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as RTF, PDF, TXT or read online on Scribd
3 views

carts

The document is a web application code for a food cart system that calculates the total cost of items based on user input quantities and prices. It includes HTML for the user interface, CSS for styling, and JavaScript for handling calculations and interactions. The application displays a menu cart, allows cash tendered input, and calculates change due to the customer.

Uploaded by

vivianpunay6
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as RTF, PDF, TXT or read online on Scribd
You are on page 1/ 10

total_cost=0

#first item

#name1

if request.form['qty1'].isnumeric()>0:

name1=request.form['name1']

cost1=request.form['cost1']

qty1=request.form['qty1']

list_carts.append([name1,cost1,qty1])

total_cost=total_cost+(float(cost1)*int(qty1))

#name2

if request.form['qty2'].isnumeric()>0:

name2=request.form['name2']

cost2=request.form['cost2']

qty2=request.form['qty2']

list_carts.append([name2,cost2,qty2])

total_cost=total_cost+(float(cost2)*int(qty2))

#name3

if request.form['qty3'].isnumeric()>0:

name3=request.form['name3']

cost3=request.form['cost3']

qty3=request.form['qty3']

list_carts.append([name3,cost3,qty3])

total_cost=total_cost+(float(cost3)*int(qty3))

#name4

if request.form['qty4'].isnumeric()>0:
name4=request.form['name4']

cost4=request.form['cost4']

qty4=request.form['qty4']

list_carts.append([name4,cost4,qty4])

total_cost=total_cost+(float(cost4)*int(qty4))

#name5

if request.form['qty5'].isnumeric()>0:

name5=request.form['name5']

cost5=request.form['cost5']

qty5=request.form['qty5']

list_carts.append([name5,cost5,qty5])

total_cost=total_cost+(float(cost5)*int(qty5))

{{ list_carts }}

[item2,cost2,qty2,subtotal2]

{{ item(0) }}

{{ item(1) }}

{{ item(2) }}

{{ item(3) }}

{{ item(2) }} pcs -- {{ item(0) }} -- Php {{ item(1) }} -- Php {{ item(3) }}

1,998.00

'{:,.2f}'.format(item(3))

jQuery - download -googlecdn - number 3


<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Jollicious Food Park</title>

<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"


integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>

<style>

/* Styling remains the same */

.jollibee-header {

background-color: #D62300;

color: white;

padding: 10px 0;

.jollibee-header h2 {

color: #FFD600;

margin: 0;
font-family: 'Pacifico', cursive;

font-size: 2.5rem;

.logo-img {

width: 55px;

height: 55px;

border-radius: 50%;

object-fit: cover;

.jollibee-nav .nav-link {

color: white !important;

.jollibee-nav .nav-link:hover {

background-color: #FFD600;

color: #D62300 !important;

.card-footer .row {

margin-bottom: 1.5rem;

.input-group {
border-radius: 5px;

.input-group-text {

background-color: #FFD600;

color: #D62300;

#cashTendered, #change {

text-align: right;

font-weight: bold;

font-size: 1.1rem;

#change {

background-color: #f0f0f0;

button {

margin-top: 15px;

padding: 10px 20px;

font-size: 1.1rem;

border-radius: 5px;

}
button:hover {

background-color: #FFD600;

color: #D62300;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

#cashTendered:focus {

border-color: #D62300;

box-shadow: 0 0 5px rgba(214, 35, 0, 0.5);

</style>

</head>

<body>

<div class="jollibee-header">

<div class="container d-flex justify-content-between align-items-center">

<div class="d-flex align-items-center">

<img src="images/prof.png" alt="Small Logo" class="logo-img me-2">

<h2 class="mb-0">Jollicious Food Park</h2>

</div>

<nav class="nav jollibee-nav">

<a class="nav-link" aria-current="page" href="{{url_for('index')}}">Home</a>

<a class="nav-link" href="{{url_for('menu')}}">Menu</a>

<a class="nav-link" href="{{url_for('contact_us')}}">Contact Us</a>

</nav>
</div>

</div>

<div class="container mt-4">

<div class="row">

<div class="col-md-8 mx-auto">

<div class="card shadow">

<div class="card-header bg-danger text-white text-center">

<h4>Menu Cart</h4>

</div>

<div class="card-body">

<table class="table table-striped cart-table">

<thead>

<tr>

<th>Qty.</th>

<th>Item</th>

<th>Price</th>

<th>Subtotal</th>

</tr>

</thead>

<tbody>

{% for item in list_carts %}

<tr>

<td>{{ item[2] }}</td>

<td>{{ item[0] }}</td>


<td>Php {{ "{:,.2f}".format(item[1]) }}</td>

<td>Php {{ "{:,.2f}".format(item[1] * item[2]) }}</td>

</tr>

{% endfor %}

</tbody>

<tfoot>

<tr>

<th colspan="3" class="text-end">Total Cost:</th>

<th>Php {{ "{:,.2f}".format(total_cost) }}</th>

</tr>

</tfoot>

</table>

</div>

<div class="card-footer text-center">

<div class="row mb-3">

<label for="cashTendered" class="col-sm-4 col-form-label text-end">Cash Tendered:</label>

<div class="col-sm-4">

<div class="input-group">

<span class="input-group-text">₱</span>

<input type="number" class="form-control" id="cashTendered" placeholder="Enter amount"


min="0" onchange="calculateChange()" required>

</div>

</div>

</div>
<div class="row mb-3">

<label for="change" class="col-sm-4 col-form-label text-end">Change:</label>

<div class="col-sm-4">

<div class="input-group">

<span class="input-group-text">₱</span>

<input type="text" class="form-control" id="change" readonly>

</div>

</div>

</div>

<button class="btn btn-warning" onclick="location.href='{{ url_for('menu') }}';">Back to


Menu</button>

</div>

</div>

</div>

</div>

</div>

<script>

// Function to format numbers with commas

function formatNumberWithCommas(number) {

return number.toLocaleString();

// Pass the total_cost value from the server to JavaScript

const totalCost = {{ total_cost|float }};


function calculateChange() {

const cashTendered = parseFloat(document.getElementById('cashTendered').value);

const changeField = document.getElementById('change');

if (isNaN(cashTendered) || cashTendered < 0) {

changeField.value = "Invalid input";

changeField.style.backgroundColor = "#f8d7da"; // Red background for invalid input

} else if (cashTendered < totalCost) {

changeField.value = "Insufficient funds";

changeField.style.backgroundColor = "#f8d7da"; // Red background for insufficient funds

} else {

const change = cashTendered - totalCost;

changeField.value = "₱ " + formatNumberWithCommas(change.toFixed(2)); // Format change with


commas

changeField.style.backgroundColor = "#d4edda"; // Green background for valid change

</script>

</body>

</html>

You might also like