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 2 years 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 =...
Step 2: using text editor (WordPad) to create a web page with the following content (you...
Step 2: using text editor (WordPad) to create a web page with the following content (you may cut-and-paste): ----------------------------------------------------------------------------------- Just a screenshoot of the output Book-O-Rama Catalog Search Book-O-Rama Catalog Search     Choose Search Type:          Author      Title      ISBN             Enter Search Term:             ------------------------------------------------------------------------------------- Then save above document to the local directory (C:\temp) and make sure that you saved it in the plain text format (in the “Save as type” popup window, choose “Text Document...
using text edit html Create a Web page that makes a list of your favorite movies...
using text edit html Create a Web page that makes a list of your favorite movies and a list of your favorite actors. Make one list ordered (numbered) and one list unordered (bulleted). Title your Web page - John Doe's Movies Page but use your own name (this information goes in the title tag). Also include a paragraph describing one of your favorite movies and another paragraph describing one of your favorite actors. Include two heading levels - h1 and...
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...
Create a footer for web page using HTML,CSS,Javascript. The footer should contain 1.Back to top button...
Create a footer for web page using HTML,CSS,Javascript. The footer should contain 1.Back to top button 2.Random logo 3.Copyright content
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 - 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...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT