Question

In: Computer Science

Using Javascript Create a page places an order for a Calzone: Using Text box to get...

Using Javascript

Create a page places an order for a Calzone:

Using Text box to get customers Name

Radio Buttons for sizes: small, medium, large

list for type of crust: crispy, soft, hard

check boxes for toppings, with at least 3 to be selected

Submit button that displays the order information.

Solutions

Expert Solution

Order.html:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <!-- title for web page -->

    <title>Calzone order</title>

</head>

<body>

    <form>

        <fieldset>

            <legend>Place Order</legend>

        <table>

            <tr>

                <td>Name</td>

                <td>

                    <!-- <textbox> for name -->

                        <input type="text" id="txtName"/>

                </td>

            </tr>

            <tr>

                    <td>Size</td>

                    <td>

                        <!-- radiobuttons fot size -->

                            <input type="radio" name="size" value="small"/>Small

                            <input type="radio" name="size" value="medium"/>Medium

                            <input type="radio" name="size" value="large"/>Large

                    </td>

                </tr>

                <tr>

                    <td>Type of Crust</td>

                    <td>

                        <!-- dropdown list -->

                        <select id="crust">

                            <option value="crispy">Crispy</option>

                            <option value="soft">Soft</option>

                            <option value="Hard">hard</option>

                        </select>

                    </td>

                </tr>

                <tr>

                    <td>Toppings</td>

                    <td>

                        <input type="checkbox" name="toppings" value="olive">Olive

                        <input type="checkbox" name="toppings" value="Bacon">Bacon

                        <input type="checkbox" name="toppings" value="Sausage">Sausage<br/>

                        <input type="checkbox" name="toppings" value="Onions">Onions

                        <input type="checkbox" name="toppings" value="Mushrooms">Mushrooms

                        <input type="checkbox" name="toppings" value="Pepperoni">Pepperoni

                        

                    </td>

                </tr>

                <tr>

                    <td>

                        <!-- button to place order -->

                        <input type="button" value="Place Order" onclick="order()"/>

                    </td>

                    <td>

                            <!-- button to reset order -->

                            <input type="reset" value="Reset""/>

                    </td>

                </tr>

        </table>

    </fieldset>

    <!-- div to display order details -->

    <div id="myOrder"></div>

    </form>

    <!-- <script> is used for javascript -->

        <script>

            //function order()

            function order()

            {

                //getting name entered by user

                var name=document.getElementById("txtName").value;

                //getting radio buttons

                var size=document.getElementsByName("size");

                //getting type of crust

                var crust=document.getElementById("crust");

                //getting toppings

                var toppings=document.getElementsByName("toppings");

                //checking which size is selected

                var selectedSize="";

                //using for loop

                for(var i=0;i<size.length;i++)

                {

                    if(size[i].checked)

                    {

                        //get size

                        selectedSize=size[i].value;

                    }

                }

                //crust is selected

                var selectedCrust=crust.options[crust.selectedIndex].value;

                var countToppings=0;//variable to check selected toppings

                var selectedToppings="";//variable to store selected toppings text

                for(var i=0;i<toppings.length;i++)

                {

                    //checking toppings

                    if(toppings[i].checked)

                    {

                        //concatenate selected toppings

                        selectedToppings+=toppings[i].value+" , ";

                        countToppings++;//count the toppings

                    }

                }

                //checking count of toppings

                if(countToppings>=3)

                {

                    var orderDetails="Name :"+name;

                    orderDetails+="<br/>Size : "+selectedSize;

                    orderDetails+="<br/>Crust : "+selectedCrust;

                    orderDetails+="<br/>Toppings : "+selectedToppings;

                    //display order details on the web page

                    document.getElementById("myOrder").innerHTML=orderDetails;

                }

                else{

                    //alert user

                    alert("Select at leat three toppings");

                }

                

            }

        </script>

</body>

</html>

=====================================

Screen 1:

Screen 2:

venereology answered 1 year ago
Next > < Previous

Related Solutions

JavaScript. Create a Web page with the following features: Three lines of text about anything. A...
JavaScript. Create a Web page with the following features: Three lines of text about anything. A link to OCC (http://www.orangecoastcollege.edu) that opens in a new browser window. An image link (graphical link). A link to the top of the page. A graphical link to your email. Formatted text throughout the page. Horizontal lines
javaScript html receives an entry of a character string in a text box, when a button...
javaScript html receives an entry of a character string in a text box, when a button is clicked, the count of vowels in the string stored in the textbox is displayed. The html file contains one function: vowelcount(). vowelcount(): returns the number of uppercase and lowercase English language vowel letter that occurs in the string entry in the textbox. //html: <!--    YOUR ID    YOUR NAME --> <html> <head> <script> function vowelcount() {        /* YOUR CODE HERE...
Using JavaScript, create a simple web page that will take orders for Chess Org. Chess Org...
Using JavaScript, create a simple web page that will take orders for Chess Org. Chess Org sells yearly membership for $30 each. Discounts are given for buying in bulk (see Table 1 and example below). Table 1 – Discounts Quantity Purchased Discount 1 – 29 0% 30 - 59 10% 60 + 15% Example: If a customer purchases 40 family membership, their total price (CTotal) would be: COriginalPrice = 30*40=1200 DMainDiscount = 1200*0.1=120 CTotalPrice = COriginalPrice - DMainDiscount= 1200-120 =...
Please Use JavaScript and P5 1) Greeter Create an page with an input, and a button....
Please Use JavaScript and P5 1) Greeter Create an page with an input, and a button. When the button is clicked, output the phrase "Hello {Name}" to the developer console, with {Name} being the value the user put into the input field. Use a function that takes the name as an argument, and returns the full phrase as its output.
The code to create a Search/Filter Data with Javascript or html from html page.
The code to create a Search/Filter Data with Javascript or html from html page.
JavaScript Form Validation Name: a text box where the content must start with 1 upper case...
JavaScript Form Validation Name: a text box where the content must start with 1 upper case characters and no special character (i.e. !, @, #, $, %, &, *). Number is not allowed. The text box must not be empty. Module code: a text box where the content must start with 3 lower case alphabets and follows by 4 digits where the first digit cannot be zero. This textbox can be empty. All validation error messages must be italic and...
JavaScript - Create a class using "names" as the identifier. Create a constructor. The constructor must...
JavaScript - Create a class using "names" as the identifier. Create a constructor. The constructor must have elements as follow: first ( value passed will be String ) last ( value passed will be String ) age ( value passed will be Numeric ) The constructor will assign the values for the three elements and should use the "this" keyword Create a function, using "printObject" as the identifier printObject: This function will have three input parameters: allNames , sortType, message...
I'm trying to create a javascript order form that outputs the items/cost/quantity in the form of...
I'm trying to create a javascript order form that outputs the items/cost/quantity in the form of a table. I have to use a for loop to accomplish this, but I'm not sure where to place the loop & what it needs to reference <!DOCTYPE html> <head> <meta charset="utf-8" /> <style media="screen"> div{ background-color: #f7df3e; border: 1px solid black; padding: 10px; margin: 30px; } h1{ text-align: center; } </style> <script type="text/javascript"> var items = []; var quans = []; var costs...
JavaScript Find and Replace Text Main text: a text area with 3 rows and 20 columns....
JavaScript Find and Replace Text Main text: a text area with 3 rows and 20 columns. The default text is “Hello testing”. The text area cannot be empty. • Find text: a text box for the user to key in text he/she wants to find. • Replacement text: a text box for the user to key in the replacement text. If the find text is empty, this element should be disabled (i.e. user cannot key in anything here). • Find...
For this assignment you need to create a ToDo list using Javascript, along with HTML and...
For this assignment you need to create a ToDo list using Javascript, along with HTML and CSS. Begin by creating a HTML page called todo.html. Then create a Javascript file called todo.js and link it in to the HTML page using a script tag. All Javascript for the assignment must be in the separate file. (For CSS, feel free to include styles in a style block at the top of the HTML page, or to link in CSS from a...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT