Question
In: Computer Science
Create an application that allows the user to place an order at a coffee shop named...
Create an application that allows the user to place an order at a coffee shop named Zips Coffee.
Create a coffee order form that looks like a table
with columns for coffee type, price and quantity.
Provide values for at least three rows of data.
Provide a row for the total cost of your order.
Create Javascript code to calculate the total of your order
and present the total to the user.
Provide a button to initiate the Javascript described above.
Provide a button to clear the form data.
Provide a button to submit the form. Create Javascript code
to prevent the form from being submitted if the total cost is
0.
When the user hovers the mouse over one of the images in the
menu, another image
should be displayed with the description and price of the item. The
id attribute of
each image identifies the image to be displayed when it’s rolled
over.
The rollover images should be preloaded.
When the user clicks on an image, the order list and order total
should be updated and
displayed.
If the user clicks the Place Order button, the checkout.html page
should be displayed.
If the user clicks the Clear Order button, all of the items
should be removed from the
order list and the total should be cleared.
Solutions
Expert Solution
The images are representation purpose only. Change the images for your requirement.
======================= Full Answer =================
File: coffeeshop.html
----------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<title>Zips Coffee</title>
<style type="text/css">
/* Style the footer */
footer {
background-color: #777;
padding: 10px;
text-align: center;
color: white;
margin: 20px;
}
/* Style the header */
header {
background-color: #666;
padding: 10px;
text-align: center;
font-size: 20px;
color: white;
margin: 20px;
}
.one {
width: 225px;
height: 100px;
background-size: 50%;
}
.two {
width: 225px;
height: 100px;
background-size: 50%;
}
.three {
width: 225px;
height: 100px;
background-size: 50%;
}
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 5px;
text-align: left;
width: 50px;
}
</style>
<script>
// On clicking button preload images and calculate total
function activateJavaScript() {
preloadImages(); // preload images
total(); //calculate total
}
// Globla variable for images
var imgArray = new Array(
'1.jfif',
'2.jfif',
'3.jfif',
'11.jfif',
'22.jfif',
'33.jfif'
);
/* Pre loading image */
function preloadImages() {
for (var i = 0; i < imgArray.length; i++) {
var tmpImg = new Image;
tmpImg.src = imgArray[i];
}
}
/* on hover on image, change the image to new one */
function hover(element) {
element.setAttribute('src', element.id);
}
/* on un hover on image, change the image to new one */
function unhover(element, img) {
element.setAttribute('src', img);
}
function funone() {
var value = parseInt(document.getElementById('one').value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('one').value = value;
total();
}
function funtwo() {
var value = parseInt(document.getElementById('two').value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('two').value = value;
total();
}
function funthree() {
var value = parseInt(document.getElementById('three').value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('three').value = value;
total();
}
function total() {
var val1 = parseInt(document.getElementById('one').value, 10);
val1 = isNaN(val1) ? 0 : val1;
var val2 = parseInt(document.getElementById('two').value, 10);
val2 = isNaN(val2) ? 0 : val2;
var val3 = parseInt(document.getElementById('three').value, 10);
val3 = isNaN(val3) ? 0 : val3;
var total = val1 * 100 + val2 * 200 + val3 * 50;
document.getElementById('total').value = total;
}
function checkTotal() {
var total = parseInt(document.getElementById('total').value, 10);
total = isNaN(total) ? 0 : total;
if (total == 0) {
alert("Total Value of cart is 0. Please order some coffee");
return false;
}
}
</script>
</head>
<body>
<header>
<h2>Zips Coffee</h2>
</header>
<center>
<div>
<form id="myform" action="checkout.html" onsubmit="return checkTotal()" method="POST">
<table style="width:50%">
<tr>
<th>Coffee Type</th>
<th>Rate</th>
<th>Quantity</th>
</tr>
<tr>
<td>
<img id="1.jfif" src="11.jfif" onmouseover="hover(this)" onmouseout="unhover(this, '11.jfif')" class="one" onclick="funone()"></img>
</td>
<td>
$ 100
</td>
<td>
<input type="text" id="one" name="one" />
</td>
</tr>
<td>
<img id="2.jfif" src="22.jfif" onmouseover="hover(this)" onmouseout="unhover(this, '22.jfif')" class="two" onclick="funtwo()"></img>
</td>
<td>
$ 200
</td>
<td>
<input type="text" id="two" name="two" />
</td>
</tr>
<tr>
<td>
<img id="3.jfif" src="33.jfif" onmouseover="hover(this)" onmouseout="unhover(this, '33.jfif')" class="three" onclick="funthree()"></img>
</td>
<td>
$ 50
</td>
<td>
<input type="text" id="three" name="three" />
</td>
</tr>
<tr>
<td>
</td>
<td>
Total:
</td>
<td>
<input type="text" id="total" name="total" />
</td>
</tr>
</table>
<br>
<br>
<!-- Activate the preloading by clicking Activate JavaScript-->
<div onclick="activateJavaScript()">
<input type="button" value="Activate JavaScript" />
</div>
<br>
<br>
<input type="submit" value="Place Order">
<input type="reset" value="Clear Values">
</form>
</div>
</center>
<footer>
<p>Copy Rights . The coffee shop</p>
</footer>
</body>
</html>
====================================================================================
File: checkout.html
---------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<title>Zips Coffee</title>
<style type="text/css">
/* Style the footer */
footer {
background-color: #777;
padding: 10px;
text-align: center;
color: white;
margin: 20px;
}
/* Style the header */
header {
background-color: #666;
padding: 10px;
text-align: center;
font-size: 20px;
color: white;
margin: 20px;
}
</style>
</head>
<body>
<header>
<h2>Zips Coffee</h2>
</header>
<center>
<div>
<h2> Your Order has been placed Successfully.
<br>
Have a nice coffee
</h2>
</div>
</center>
<footer>
<p>Copy Rights . The coffee shop</p>
</footer>
</body>
</html>
==============================================================
WebPage Output:
venereology answered 10 months agoRelated Solutions
Show: Create an application that allows the user to enter the number of calories and fat...
Create an application named Rusty2 that asks the user for the dealer cost of a car,...
Android Studio. Java. Please create an application that -> An activity that allows user to enter...
Write an application that allows a user to enter the names and birthdates of up to...
Create a simple python app that allows the user to create a roster of students and...
Create an application that makes the user guess a number. The user must be allowed tries....
Create a function named getCreds with no parameters that will prompt the user for their username...
Write an application that allows a user to enter any number of student quiz scores, as...
Write an application named MultiplicationTable that prompts the user for an integer value, for example 7....
Create a java Swing GUI application that presents the user with a “fortune”. Create a java...
- A small metal sphere, A, carrying a charge of +15.0 µC is at the origin. An...
- Note: You can use only pointer based operations while implementing each of the functionalities below// zero...
- ANALYSIS each line1 to 5 RATIOSANALYSIS Profitability Ratios (%) E. commerce Amazon EBay 1)Gross Margin 43%...
- Describe a dysfunctional system. What would you do to transform the dysfunctional system into a functional...
- A unit of inventory costs a company $40. Annual carrying costs are 1% for interest charges,...
- There are four hazards that were identified in the last hazard assessment that have not been...
- Wile standing at the edge of the roof of a building, you throw a stone upward...