+1 (315) 557-6473 

Html Program to Create a Pizza Order Website Layout Assignment Solution.


Instructions

Objective
Write a program to create a pizza order website layout in html.

Requirements and Specifications

Drexel University
College of Computing and Informatics
INFO 532 – Software Development
Week 7: Programming Assignment 7
Due Date: Sunday, Nov. 7, 2021
This assignment has 1 question. For each file submitted, you must indicate your name and student number in a header. An example header is shown as follows:
<!—
===============================================
Student Name:
Solution for Assignment 7
===============================================
-->
For submitting this assignment, you need to put all your individual HTML files in a single ZIP file called a7-submission-FirstName-LastName.zip and submit the zipped file through the Blackboard system. You must submit your HTML with JavaScript code in a zipped file. If you submit individual files through the Blackboard system, the system will modify the JavaScript tags and disable them.
Figure 1: Pizza Order Form
Question. In this question, you are asked to create a pizza order form as shown in Figure 1. This assignment combines the forms in the programming assignment 5 and assignment 6.
Requirements:
  • Create a new HTML document in your text editor. Name your document as a7-FirstName-LastName.html.
  • Create <html> element, header information, and the <body> element in the HTML document.
  • Use “Pizza Order Form” as the title and heading of the document.
  • Add a form section in the document body.
  • Add other form fields as shown in Figure 1: Note: there are 3 textboxes for Name, Address, and Phone.
  • Add a script section in the head.
  • Implement the following functionality for the “Submit Order” button:
When the “Submit Order” button is clicked,
  1. Firstly, check whether there are values in the Name, Address, and Phone textboxes, whether a size radio button is selected, and whether at least one toppings are selected. If any value is missing, alert the user. Note: the alert message must be specific. That is, it must notify user which value is missing. For example, if the Phone textbox is empty, alert the user with a message such as “Phone is required.”
  2. Secondly, check whether the phone number is in the correct format. This time, a correct format is either a string of exact 10 digits or a string of ddd-ddd-dddd. If the phone number is not in a correct format, alert the user.
  3. Finally, if above checks passed, print out the order information as follows:
Name: John Smith
Address: 3675 Market Street
Phone: 215-895-2500
Size: Small
Toppings: Bacon, Sausage
  • Implement the following functionality for the “Clear Entries” button:
  • When the “Clear Entries” button is clicked, all the text fields should be empty; no radio button and check box should be selected.
If you need further clarifications about the requirements, please ask your instructor.
  1. How to Hand In:
    1. Please name your individual files as indicated in the questions.
    2. Please place all your individual files in a single ZIP file named as a7-submission-FirstName-LastName.zip and submit the zipped file.
    3. Submit the a7-submission-FirstName-LastName.zip through the course website in the Blackboard system.
  2. When to Hand In:
  3. Submit your assignment no later than 11:59pm in the due date.

  4. Marking Schemes:
Marking assignments will be based on several aspects: correctness, presentation, and coding styles.
  1. For programming questions, 10% of the mark will be judged on the coding style.
The following is an adaptation of the coding style of Java programming to this course:
  • Write a good comment for each variable, each method, each control branch, and each loop.
  • Use appropriate indentations to indicate control flows and blocks of code. For example,
function func(){
 if (expression 1){
  do some thing;
 }
 else {
  do some thing else;
 }
  }
  • Your method comments must mention the purpose of each parameter, and must be grammatically correct.
  • Each line must be less than 80 characters long including tabs and spaces. Beware of "soft returns" -- some word processors, like WordPad, wrap lines automatically. If you use such a program, make sure that you press the return key yourself.
  • Put a blank space before and after every operator. For example, the first line below is good but the second line is not:
            boolean b = 3 > x && 4 - 5 < 32;
     boolean b = 3>x && 4-5<32;
  • When breaking up a long line, break it before an operator, not after. The first example below is good but the second is not:
          boolean b = "Hello".charAt(3) + 3 > x
            && Integer.parseInt(s) < 32;
    boolean b = "Hello".charAt(3) + 3 > x &&
            Integer.parseInt(s) < 32;
  • Always use braces on if, else, and loop blocks. The first example below is good but the second is not:
    if (x > 5) {
      while (i > 3) {
        // Do something
 }
    } else {
      // Do something else
    }
    if (x > 5)
      while (i > 3)
        // Do something
    else
                  // Do something

Source Code

<!--

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

    Student Name:

    Solution for Assignment 7

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

-->

<!DOCTYPE html>

<html>

    <title>Pizza Order Form</title>

    <head>

        <h1>Pizza Order Form</h1>

    </head>

    <div id="customer_info">

        <h2>Step 1: Customer Information:</h2>

        <label for="customer_name">Name:</label>

        <input type="text" id="customer_name"><br>

        <label for="customer_address">Address:</label>

        <input type="text" id="customer_address"><br>

        <label for="customer_phone">Phone:</label>

        <input type="text" id="customer_phone"><br>

    </div>

    <div id="pizza_size">

        <h2>Step 2: Select the size of the piuzza you want:</h2>

        <input type="radio" name="pizza_size" id="rb_size_small" value="small">

        <label for="rb_size_small">Small</label>

        <input type="radio" name="pizza_size" id="rb_size_medium" value="medium">

        <label for="rb_size_medium">Mediun</label>

        <input type="radio" name="pizza_size" id="rb_size_large" value="large">

        <label for="rb_size_large">Large</label>

    </div>

    <div id="piza_toppings">

        <h2>Step 3: Select the pizza toppings you want:</h2>

        <input type="checkbox" id="cb_topping_pepperoni">

        <label for="cb_topping_pepperoni">Pepperoni</label>

        <input type="checkbox" id="cb_topping_bacon">

        <label for="cb_topping_bacon">Bacon</label>

        <input type="checkbox" id="cb_topping_sausage">

        <label for="cb_topping_sausage">Sausage</label>

        <input type="checkbox" id="cb_topping_mushrooms">

        <label for="cb_topping_mushrooms">Mushrooms</label>

    </div>

    <div id="buttons" style="padding-top:20px">

        <button id="Submit" onclick="submitOrder()">Submit Order</button>

        <button id="Clear" onclick="clearEntries()">Clear Entries</button>

    </div>

    <div id="result" style="padding-top:20px">

        <h3><label id="result_text"></label></h3>

    </div>

    <script>

        function submitOrder()

        {

            // Check that there are values in name, address and phone

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

            var address = document.getElementById("customer_address").value;

            var phone = document.getElementById("customer_phone").value;

            if(name.length == 0) // no name entered

            {

                alert("Name is required");

                return;

            }

            if(address.length == 0) // no address entered

            {

                alert("Address is required");

                return;

            }

             if(phone.length == 0) // phone not entered

             {

                 alert("Phone is required");

                 return;

             }

             else // check if the phone is in correct format

             {

                 // define the pattern

                 let phoneRegex1 = /\d{3}-\d{3}-\d{4}/;

                 let phoneRegex2 = /^\d{10}$/;

                 if(!phoneRegex1.test(phone) && !phoneRegex2.test(phone)) {

                     alert("Invalid phone number. Phone number must have 10 digits or be in the following format: xxx-xxx-xxxx");

                     return;

                 }

             }

            // Check that there is at least one pizza size selected

            var small = document.getElementById("rb_size_small").checked

            var medium = document.getElementById("rb_size_medium").checked

            var large = document.getElementById("rb_size_large").checked

            var pizza_size = "";

            if(!small && !medium && !large) // no size selected

            {

                alert("You must select a pizza size");

                return;

            }

            else

            {

                if(small)

                    pizza_size = "Small";

                else if(medium)

                    pizza_size = "Medium";

                else if(large)

                    pizza_size = "Large";

            }

            // Construct string with toppins

            var toppings = "";

            var pepperoni = document.getElementById("cb_topping_pepperoni").checked;

            var bacon = document.getElementById("cb_topping_bacon").checked;

            var sausage = document.getElementById("cb_topping_sausage").checked;

            var mushrooms = document.getElementById("cb_topping_mushrooms").checked;

            if(pepperoni)

                toppings = "Pepperoni";

            if(bacon) {

                if(toppings.length > 0)

                    toppings += ", ";

                toppings += "Bacon";

            }

            if(sausage) {

                if(toppings.length > 0)

                    toppings += ", ";

                toppings += "Sausage";

            }

            if(mushrooms) {

                if(toppings.length > 0)

                    toppings += ", ";

                toppings += "Mushrooms";

            }

            // If the variable toppings has length 0, it means that no topping has been selected

            if(toppings.length == 0)

                toppings = "None";

            // Now, print results

            var result = "Name: " + name + "<br>";

            result += "Address: " + address + "<br>";

            result += "Phone: " + phone + "<br>";

            result += "Size: " + pizza_size + "<br>";

            result += "Toppings: " + toppings;

            document.getElementById("result_text").innerhtml = result;

        }

        function clearEntries()

        {

            // Clear name, address and phone text

            document.getElementById("customer_name").value = "";

            document.getElementById("customer_address").value = "";

            document.getElementById("customer_phone").value = "";

            // Uncheck the radio buttons

            document.getElementById("rb_size_small").checked = false;

            document.getElementById("rb_size_medium").checked = false;

            document.getElementById("rb_size_large").checked = false;

            // uncheck toppings

            document.getElementById("cb_topping_pepperoni").checked = false;

            document.getElementById("cb_topping_bacon").checked = false;

            document.getElementById("cb_topping_mushrooms").checked = false;

            document.getElementById("cb_topping_sausage").checked = false;

            // Finally, clear the result text

            document.getElementById("result_text").innerhtml = "";

        }

    </script>

</html>