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 =...
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...
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...
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...
In linux , Using a simple text editor, create a text file with the following name...
In linux , Using a simple text editor, create a text file with the following name &quot;Test&quot; and content: GNU GENERAL PUBLIC LICENSE The GNU General Public License is a free, copy left license for the GNU General Public License is intended to guarantee your freedom to GNU General Public License for most of our software; it applies … 2-Write the command to create the text file. 3-Print the file permissions. 4-Create a directory named &quot;361&quot; 5-Copy file &quot;Test&quot; to...
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...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT