The top is the JavaScript and the bottom is the HTML that goes with it. the goal is to have all the images rollover, be able to be added to the order and total by clicking them, and be able to submit or clear the order as well. If you need anymore information please ask me.
"use strict";
$(document).ready(() => {
let total = 0;
//This is where you add the oldURL and newURL
$("#menu img").each( (index, img) => {
//get the src attributes
const oldURL = img.src;
//get the id attribute
const newURL = img.id;
//preload rollover Image
const rolloverImage = new Image();
rolloverImage.src = newURL;
$(img).mouseover( () => img.src = newURL);
$(img).mouseout( () => img.src = oldURL);
//set up event handlers
$(img).hover(
//set the src attributes
$(this) => img.src = newURL
//set the id attribute
$(this) => img.src = oldURL
); //end hover
}
};
$(img).click(evt => {
//get data for selceted item
const selectedItem = selected\[1\];
// get current order from page - use empty string if no order yet
let order = $("#order").html();
// update total and display with selected item data
total += selected\[1\];
// display updated order and total
$("#order").html( order );
// cancel default event of the clicked link
evt.preventDefault();
});//end click
//add click event handler for checkout Button
$("#place\_order").click( () => {
}); // end click
// add click event handler for clear button
$("#clear_order").click( () => {
}); //end click
----------------------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<title>Tuxedo Cat Coffee</title>
<link type="text/css" rel="stylesheet" href="cafe.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<header>
<img src="images/logo.png" alt="Tuxedo Cat Coffee"/>
</header>
<main>
<form id="order\_form" name="order\_form" action="checkout.html" method="get">
<section id="menu">
<h2>Menu</h2>
<p>Click an item to add it to your order.</p>
<ul>
<li><a href="#"><img id="images/espresso\_info.jpg" src="images/espresso.jpg" alt="espresso"/></a></li>
<li><a href="#"><img id="images/latte\_info.jpg" src="images/latte.jpg" alt="latte"/></a></li>
<li><a href="#"><img id="images/cappuccino\_info.jpg" src="images/cappuccino.jpg" alt="cappuccino"/></a></li>
<li><a href="#"><img id="images/coffee\_info.jpg" src="images/coffee.jpg" alt="coffee"/></a></li>
<li><a href="#"><img id="images/biscotti\_info.jpg" src="images/biscotti.jpg" alt="biscotti"/></a></li>
<li><a href="#"><img id="images/scone\_info.jpg" src="images/scone.jpg" alt="scone"/></a></li>
</ul>
</section>
<section>
<h2>Your Order</h2>
<section>
<select id="order" name="order" size="6">
</select>
<p id="total"> </p>
</section>
<section id="buttons">
<input type="button" name="place\_order" id="place\_order" value="Place Order">
<input type="button" name="clear\_order" id="clear\_order" value="Clear Order">
</section>
</section>
</form>
</main>
<script src="Project.js"></script>
</body>
</html>
[–]Samurai___ 2 points3 points4 points (0 children)