Scribd
Carica
5 visualizzazioni22 pagine

Code Flashfood

Learn Coding

Caricato da

JUBILE ALMOND BIN ADISNELSON Moe
Copyright
© © All Rights Reserved
Per noi i diritti sui contenuti sono una cosa seria. Se sospetti che questo contenuto sia tuo, rivendicalo qui.
Formati disponibili
Scarica in formato DOCX, PDF, TXT o leggi online su Scribd
5 visualizzazioni22 pagine

Code Flashfood

Learn Coding

Caricato da

JUBILE ALMOND BIN ADISNELSON Moe
Copyright
© © All Rights Reserved
Per noi i diritti sui contenuti sono una cosa seria. Se sospetti che questo contenuto sia tuo, rivendicalo qui.
Formati disponibili
Scarica in formato DOCX, PDF, TXT o leggi online su Scribd
Sei sulla pagina 1/ 22

<!

DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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


scale=1.0">

<title>Flash Food</title>

<style>

body {

font-family: Arial, sans-serif;

margin: 0;

padding: 0;

background-color: #f8f8f8;

header {

background-color: #ff6347;

color: white;

padding: 1rem;

text-align: center;

.container {

width: 80%;

margin: 0 auto;

}
.menu-section,

.cart-section {

margin: 2rem 0;

.menu-item {

background: white;

margin: 1rem 0;

padding: 1rem;

border-radius: 8px;

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

display: flex;

justify-content: space-between;

align-items: center;

.menu-item h3 {

margin: 0 0 0.5rem;

.menu-item p {

margin: 0.5rem 0;

.menu-item img {

width: 200px;
height: 200px;

object-fit: cover;

border-radius: 4px;

cursor: pointer;

.order-form,

.cart-section {

background: white;

padding: 1rem;

border-radius: 8px;

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

.order-form h3,

.cart-section h3 {

margin-top: 0;

.order-form input,

.order-form select,

.order-form textarea {

width: 100%;

padding: 0.5rem;

margin: 0.5rem 0;

border: 1px solid #ccc;

border-radius: 4px;
}

.order-form button,

.add-to-cart-button,

.cancel-button {

background-color: #ff6347;

color: white;

padding: 0.5rem 1rem;

border: none;

border-radius: 4px;

cursor: pointer;

.order-form button:hover,

.add-to-cart-button:hover,

.cancel-button:hover {

background-color: #ff4500;

.cart-item {

display: flex;

justify-content: space-between;

align-items: center;

margin: 0.5rem 0;

.cart-item button {
background-color: #ff6347;

color: white;

padding: 0.3rem 0.6rem;

border: none;

border-radius: 4px;

cursor: pointer;

.cart-item button:hover {

background-color: #ff4500;

/* Modal styles */

.modal {

display: none;

position: fixed;

z-index: 1;

left: 0;

top: 0;

width: 100%;

height: 100%;

overflow: auto;

background-color: rgba(0, 0, 0, 0.4);

.modal-content {

background-color: white;
margin: 15% auto;

padding: 20px;

border: 1px solid #888;

width: 80%;

max-width: 600px;

border-radius: 8px;

.close {

color: #aaa;

float: right;

font-size: 28px;

font-weight: bold;

.close:hover,

.close:focus {

color: black;

text-decoration: none;

cursor: pointer;

</style>

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

</head>

<body>

<header>
<h1>Delicious Food Delivery</h1>

</header>

<div class="container">

<section class="menu-section">

<h2>Main Dish(Carbohydrates)</h2>

<div class="menu-item" id="rice">

<div>

<h3>Rice</h3>

<p>Literally rice</p>

<img src="img/rice.jpeg" onclick="showModal('Rice',


'img/rice.jpeg', 'Kalori: 130' ,'kaloriProtein: 2.4 ,gramLemak:
0.3 ,gramKarbohidrat: 28.2 ,gramSerat: 0.4 ,gramGula: 0 ,gramNatrium:
1 ,mgKalium: 35 mg', 'RM2', '130 Calories')">

<p>Price: RM2</p>

<p>Calories: 130</p>

</div>

<button class="add-to-cart-button" onclick="addToCart('rice', 2,


130, 'Main Dish(Carbohydrates)')">Add to Cart</button>

</div>

<div class="menu-item" id="fried mee">

<div>

<h3>Fried mee</h3>

<p>best mee in tuaran</p>

<img src="img/fried mee.jpeg" onclick="showModal('Fried


mee', 'img/fried mee.jpeg', 'Kalori: 220 ,kaloriProtein: 4 ,gramLemak:
10 ,gramKarbohidrat: 30 ,gramSerat: 2 ,gramGula: 2 ,gramNatrium: 500 mg
', 'RM8', '220 Calories')">

<p>Price: RM8</p>

<p>Calories: 220</p>

</div>

<button class="add-to-cart-button" onclick="addToCart('fried


mee', 8, 220, 'Main Dish(Carbohydrates)')">Add to Cart</button>

</div>

<div class="menu-item" id="fried rice">

<div>

<h3>Fried rice</h3>

<p>MAKANAN UNCLE ROGER SUKA</p>

<img src="img/fried rice.jpeg" onclick="showModal('Fried rice',


'img/fried rice.jpeg', 'Kalori: 160 ,kaloriProtein: Sekitar 5-7 ,gramLemak:
Sekitar 7-10 ,gramKarbohidrat: Sekitar 25-30 ,gramSerat: Sekitar 1-
2 ,gramGula: Sekitar 1-2 ,gramNatrium: Sekitar 300-400 mg ', 'RM8', '160
Calories')">

<p>Price: RM8</p>

<p>Calories: 160</p>

</div>

<button class="add-to-cart-button" onclick="addToCart('Fried


Rice', 8, 160, 'Main Dish(Carbohydrates)')">Add to Cart</button>

</div>

</section>

<section class="menu-section">

<h2>Side Dish(Proteins)</h2>
<div class="menu-item" id="chicken">

<div>

<h3>Chicken</h3>

<p>chicken say kukkuk</p>

<img src="img/chicken.jpeg" onclick="showModal('Chicken',


'img/chicken.jpeg', 'Kalori: 246 ,kaloriProtein: 25 ,gramLemak:
14 ,gramLemak jenuh: 3.5 ,gramKarbohidrat: 0 ,gramSerat: 0 ,gramGula:
0 ,gramNatrium: 70 mg', 'RM5', '246 Calories')">

<p>Price: RM5</p>

<p>Calories: 246</p>

</div>

<button class="add-to-cart-button" onclick="addToCart('chicken',


5, 246, 'Side Dish(Proteins)')">Add to Cart</button>

</div>

<div class="menu-item" id="egg">

<div>

<h3>Egg</h3>

<p>i like egg</p>

<img src="img/egg.jpeg" onclick="showModal('Egg',


'img/egg.jpeg', 'Kalori: Sekitar 155 ,caloriProtein: Sekitar 10-12 ,gramLemak:
Sekitar 10-12 ,gramLemak jenuh: Sekitar 3-4 ,gramKarbohidrat: Sekitar
1 ,gramSerat: 0 ,gramGula: 0 ,gramNatrium: Sekitar 200 mg', 'RM4', '155
Calories')">

<p>Price: RM4</p>

<p>Calories: 155</p>

</div>

<button class="add-to-cart-button" onclick="addToCart('Egg', 4,


155, 'Side Dish(Proteins)')">Add to Cart</button>

</div>
<div class="menu-item" id="fish">

<div>

<h3>Fish</h3>

<p>ikan kekek mak iloi</p>

<img src="img/fish.jpeg" onclick="showModal('Fish',


'img/fish.jpeg', 'Kalori: 206 ,kaloriProtein: 22 ,gramLemak: 12 ,gramLemak
jenuh: 2 ,gramKarbohidrat: 0 ,gramSerat: 0 ,gramGula: 0 ,gramNatrium: 60
mg', 'RM5', '206 Calories')">

<p>Price: RM5</p>

<p>Calories: 206</p>

</div>

<button class="add-to-cart-button" onclick="addToCart('fish', 5,


206, 'Side Dish(Proteins)')">Add to Cart</button>

</div>

</section>

<section class="menu-section">

<h2>Vegetable and Fruit(Vitamin,mineral,fibre)</h2>

<div class="menu-item" id="Vegetable">

<div>

<h3>Vegetable</h3>

<p>sayur</p>

<img src="img/vegetable.jpeg"
onclick="showModal('Vegetable', 'img/vegetable.jpeg', 'Kalori:
65 ,kaloriProtein: 2-3 ,gramLemak: 0.2-0.5 ,gramKarbohidrat: 4-8 ,gramSerat:
2-4 ,gramGula: 1-3 ,gramNatrium: 20-50 mg', 'RM4', '65 Calories')">

<p>Price: RM4</p>

<p>Calories: 65</p>
</div>

<button class="add-to-cart-button"
onclick="addToCart('Vegetable', 4, 65, 'Vegetable and
Fruit(Vitamin,mineral,fibre)')">Add to Cart</button>

</div>

<div class="menu-item" id="fruit salad">

<div>

<h3>Fruit salad</h3>

<p>salad buah</p>

<img src="img/fruit salad.jpeg" onclick="showModal('Fruit


salad', 'img/fruit salad.jpeg', 'Kalori: 50 kaloriProtein: 0.5 gramLemak: 0.2
gramKarbohidrat: 13-15 gramSerat: 2-3 gramGula: 10-12 gramNatrium: 1-2
mg', 'RM4', '50 Calories')">

<p>Price: RM4</p>

<p>Calories: 50</p>

</div>

<button class="add-to-cart-button" onclick="addToCart('Fruit


salad', 4, 50, 'Vegetable and Fruit(Vitamin,mineral,fibre)')">Add to
Cart</button>

</div>

<div class="menu-item" id="watermelon">

<div>

<h3>watermelon</h3>

<p>buah</p>

<img src="img/watermelon.jpeg"
onclick="showModal('watermelon', 'img/watermelon.jpeg', 'Kalori:
30 ,kaloriKarbohidrat: Sekitar 7.6 ,gramGula: Sekitar 6.2 ,gramSerat: Sekitar
0.4,gramProtein: Sekitar 0.6 ,gramLemak: Sekitar 0.2 ,gramVitamin C:
Sekitar 8.1 ,mgVitamin A: Sekitar 28 µg', 'RM3', '30 Calories')">
<p>Price: RM3</p>

<p>Calories: 30</p>

</div>

<button class="add-to-cart-button"
onclick="addToCart('watermelon', 3, 30, 'Vegetable and
Fruit(Vitamin,mineral,fibre)')">Add to Cart</button>

</div>

</section>

<section class="menu-section">

<h2>Drinks</h2>

<div class="menu-item" id="plain water">

<div>

<h3>plain water</h3>

<p>air putih</p>

<img src="img/plain water.jpeg" onclick="showModal('Plain


water', 'img/plain water.jpeg', 'Calories: 0. ,Fat: 0g. ,Sodium:
9.5mg. ,Carbohydrates: 0g. ,Fiber: 0g. ,Sugars: 0g. ,Protein: 0g.', 'RM1', '0
Calories')">

<p>Price: RM1</p>

<p>Calories: 0</p>

</div>

<button class="add-to-cart-button" onclick="addToCart('plain


water', 1, 0, 'Drinks')">Add to Cart</button>

</div>

<div class="menu-item" id="tea">

<div>
<h3>tea</h3>

<p>miniman JIPUN JUGA</p>

<img src="img/tea.jpeg" onclick="showModal('Tea',


'img/tea.jpeg', 'Kalori: 1 ,kaloriProtein: 0 ,gramLemak: 0 ,gramKarbohidrat:
0 ,gramSerat: 0 ,gramGula: 0 ,gramKafein: 20-60 mg ,Antioksidan: 30-40
mg', 'RM1', '1 Calories')">

<p>Price: RM1</p>

<p>Calories: 1</p>

</div>

<button class="add-to-cart-button" onclick="addToCart('tea', 1, 1,


'Drinks')">Add to Cart</button>

</div>

<div class="menu-item" id="iced lemon tea">

<div>

<h3>iced lemon tea</h3>

<p>lemon tea ping</p>

<img src="img/iced lemon tea.jpeg" onclick="showModal('Iced


lemon tea', 'img/iced lemon tea.jpeg', 'Kalori: Sekitar 6, kaloriKarbohidrat:
Sekitar 1, gramGula: Sekitar 0-1 gram, Vitamin C: Terdapat dalam jumlah
kecil dari perasan lemon', 'RM2', '6 Calories')">

<p>Price: RM2</p>

<p>Calories: 6</p>

</div>

<button class="add-to-cart-button" onclick="addToCart('iced


lemon tea', 2, 6, 'Drinks')">Add to Cart</button>

</div>

</section>
<section class="cart-section" id="order">

<h3>Your Cart</h3>

<div id="cart-items"></div>

<div id="cart-total"></div>

<div id="cart-calories"></div>

</section>

<section class="order-form">

<h3>Place Your Order</h3>

<form onsubmit="placeOrder(event)">

<label for="name">Name:</label>

<input type="text" id="name" name="name" required>

<label for="phone">Phone:</label>

<input type="text" id="phone" name="phone" required>

<label for="Class">Class:</label>

<select id="Class" name="Class" required>

<option value="">--Select Your Class--</option>

<option value="1Z">1Z</option>

<option value="1G">1G</option>

<option value="1X">1X</option>

<option value="1N">1N</option>

<option value="2Z">2Z</option>

<option value="2G">2G</option>

<option value="2X">2X</option>

<option value="2N">2N</option>
<option value="3Z">3Z</option>

<option value="3G">3G</option>

<option value="3X">3X</option>

<option value="3N">3N</option>

<option value="4Z">4Z</option>

<option value="4G">4G</option>

<option value="4X">4X</option>

<option value="4L">4L</option>

<option value="5Z">5Z</option>

<option value="5G">5G</option>

<option value="5X">5X</option>

<option value="5N">5N</option>

</select>

<label for="datePicker">Pickup Date:</label>

<input type="date" id="datePicker" name="datePicker" required>

<label for="time">Pickup Time:</label>

<select id="time" name="time" required>

<option value="">-- Select Pickup Time --</option>

<option value="7:00a.m">7:00a.m</option>

<option value="9:00a.m">9:00a.m</option>

<option value="12:00p.m">12:00p.m</option>

<option value="12:30p.m">12:30p.m</option>

<option value="3:00p.m">3:00p.m</option>

</select>
<label for="Email">Your Email:</label>

<input type="email" id="Email" name="Email" required>

<label for="Comment">Comment:</label>

<input type="text" id="Comment" name="Comment" required>

<button type="submit">Order Now</button>

</form>

</section>

</div>

<!-- The Modal -->

<div id="myModal" class="modal">

<div class="modal-content">

<span class="close" onclick="closeModal()">&times;</span>

<h3 id="modal-title"></h3>

<img id="modal-image" src="img/" style="width:100%; height:auto;


border-radius: 4px;">

<p id="modal-description"></p>

<p id="modal-price"></p>

<p id="modal-calories"></p>

</div>

</div>

<script>

let cart = [];


function addToCart(itemName, itemPrice, itemCalories, category) {

const item = cart.find(i => i.name === itemName);

if (item) {

item.quantity += 1;

} else {

cart.push({ name: itemName, price: itemPrice, calories:


itemCalories, quantity: 1, category: category });

displayCart();

function removeFromCart(itemName) {

cart = cart.filter(item => item.name !== itemName);

displayCart();

function displayCart() {

const cartItems = document.getElementById('cart-items');

const cartTotal = document.getElementById('cart-total');

const cartCalories = document.getElementById('cart-calories');

cartItems.innerHTML = '';

let total = 0;

let totalCalories = 0;

cart.forEach(item => {

const itemTotal = item.price * item.quantity;


total += itemTotal;

totalCalories += item.calories * item.quantity;

cartItems.innerHTML += `

<div class="cart-item">

<span>${item.name} (x${item.quantity})</span>

<span>RM${itemTotal.toFixed(2)}</span>

<span>${item.calories * item.quantity} Cal</span>

<button onclick="removeFromCart('$
{item.name}')">Cancel</button>

</div>

`;

});

cartTotal.innerHTML = `Total: RM${total.toFixed(2)}`;

cartCalories.innerHTML = `Total Calories: ${totalCalories}`;

function placeOrder(event) {

event.preventDefault();

if (cart.length === 0) {

alert('Your cart is empty!');

return;

const categories = ['Main Dish(Carbohydrates)', 'Side Dish(Proteins)',


'Vegetable and Fruit(Vitamin,mineral,fibre)', 'Drinks'];

const orderedCategories = new Set(cart.map(item =>


item.category));
const missingCategories = categories.filter(category => !
orderedCategories.has(category));

if (missingCategories.length > 0) {

const confirmation = confirm(`You have not ordered from the


following categories: ${missingCategories.join(', ')}. Do you still want to
proceed with the order?`);

if (!confirmation) {

return;

// alert('Order placed successfully!');

sendEmail();

cart = [];

displayCart();

event.target.reset();

function showModal(title, image, description, price, calories) {

document.getElementById('modal-title').innerText = title;

document.getElementById('modal-image').src = image;

document.getElementById('modal-description').innerText =
description;

document.getElementById('modal-price').innerText = 'Price: ' + price;


document.getElementById('modal-calories').innerText = 'Calories: ' +
calories;

const modal = document.getElementById('myModal');

modal.style.display = "block";

function closeModal() {

const modal = document.getElementById('myModal');

modal.style.display = "none";

// Close the modal if the user clicks outside of it

window.onclick = function(event) {

const modal = document.getElementById('myModal');

if (event.target === modal) {

modal.style.display = "none";

</script>

<script>

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {

console.log("Device is ready");

}
// document.getElementById('sendEmailBtn').addEventListener('click',
sendEmail);

function sendEmail() {

var name = document.getElementById('name').value;

var phone = document.getElementById('phone').value;

var className = document.getElementById("Class").value;

var datePicker = document.getElementById("datePicker").value;

var time = document.getElementById("time").value;

var Email = document.getElementById("Email").value;

var Comment = document.getElementById("Comment").value;

var order = document.getElementById('order').innerText.replace(/\b\


w*Cancel\w*\b/g, '---');;

alert(`${order}`);

cordova.plugins.email.open({

to: '[email protected]',

cc: `${Email}`,

bcc: [],

subject: 'Your order at foodWeb',

body: `${order}\n\nWill be sent to\n${name}\n${phone}\n$


{className}\n${datePicker}\n${time}\n${Email}`

});

</script>

</body>

</html>
>

Potrebbero piacerti anche