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 1 year ago
Next > < Previous

Related Solutions

Show: Create an application that allows the user to enter the number of calories and fat...
Show: Create an application that allows the user to enter the number of calories and fat grams in a food. The application should display the percentage of the calories that come from fat. If the calories from fat are less than 30% of the total calories of the food, it should also display a message indicating the food is low in fat. One gram of fat has 9 calories, so: Calories from fat = fat grams *9 The percentage of...
Create an application named Rusty2 that asks the user for the dealer cost of a car,...
Create an application named Rusty2 that asks the user for the dealer cost of a car, and the cleaning cost, and then displays the retail cost. Your application should simply send the dealer cost and cleaning cost to the getRetailPrice method in the Dealership class to obtain the retail cost. here below is the dealership class code amd meed to create rusty2 code import java.util.Calendar; public class Dealership { // public static final class variables public static final int YEAR_STARTED...
Android Studio. Java. Please create an application that -> An activity that allows user to enter...
Android Studio. Java. Please create an application that -> An activity that allows user to enter name, gender, date of birth, state of residence (selected from a pre-defined list: CA, AZ, NV, OR), email address and favorite website. This activity has a button "Show Data" that displays detail entered
Create an C# application named ConvertMilesToKilometers whose Main() method prompts a user for a number of...
Create an C# application named ConvertMilesToKilometers whose Main() method prompts a user for a number of miles, passes the value to a method that converts the value to kilometers, and then returns the value to the Main() method where it is displayed.
Write an application that allows a user to enter the names and birthdates of up to...
Write an application that allows a user to enter the names and birthdates of up to 10 friends. Continue to prompt the user for names and birthdates until the user enters the sentinel value ZZZ for a name or has entered 10 names, whichever comes first. When the user is finished entering names, produce a count of how many names were entered, and then display the names. In a loop, continuously ask the user to type one of the names...
Create a simple python app that allows the user to create a roster of students and...
Create a simple python app that allows the user to create a roster of students and their grade on CUS-1166. Moreover the app needs to calculate the average grade of students added to the roster. 1-To begin with, create a new file n the same working folder as part A (i.e. cus1166_lab1) and name it app.py. Moreover, create a subfolder and name it mymodules. 2-Within mymodules create the files __init__.py , models.py , math_utils.py . 3-In the models.py file define...
2. Create a new project named named lab5_2. You will prompt the user for an amount...
2. Create a new project named named lab5_2. You will prompt the user for an amount of names to enter, and then ask for that amount of names. You’ll store these names in a vector of strings. Then you’ll sort the vector. Finally, you’ll print the results. How many names?: 4 Enter a name: Leonardo Enter a name: Donatello Enter a name: Michelangelo Enter a name: Raphael ==================== Alphabetized ==================== Donatello                  Leonardo Michelangelo                      Raphael
Create an application that makes the user guess a number. The user must be allowed tries....
Create an application that makes the user guess a number. The user must be allowed tries. You must have a loop, user input (Scanner), and a constructor. (JAVA)
Write an application that allows a user to enter any number of student quiz scores, as...
Write an application that allows a user to enter any number of student quiz scores, as integers, until the user enters 99. If the score entered is less than 0 or more than 10, display Score must be between 10 and 0 and do not use the score. After all the scores have been entered, display the number of valid scores entered, the highest score, the lowest score, and the arithmetic average.
Create a function named getCreds with no parameters that will prompt the user for their username...
Create a function named getCreds with no parameters that will prompt the user for their username and password. This function should return a dictionary called userInfo that looks like the dictionaries below: # Administrator accounts list adminList = [ { "username": "DaBigBoss", "password": "DaBest" }, { "username": "root", "password": "toor" } ] Create a function named checkLogin with two parameters: the userInfo and the adminList. The function should check the credentials to see if they are contained within the admin...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT