Program To Create A-Pizza-Order-Website-Layout Assignment Solution.

Instructions

Objective

Write a HTML assignment to create a pizza order website layout.

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 element, header information, and the 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,

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.”
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.
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.

How to Hand In:

Please name your individual files as indicated in the questions.
Please place all your individual files in a single ZIP file named as a7-submission-FirstName-LastName.zip and submit the zipped file.
Submit the a7-submission-FirstName-LastName.zip through the course website in the Blackboard system.

When to Hand In:

Submit your assignment no later than 11:59pm in the due date.

Marking Schemes:

Marking assignments will be based on several aspects: correctness, presentation, and coding styles.

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 >
< head >
< title >Pizza Order Form< /title >

< body >
< 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 pizza 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" >Medium< /label >
< input type="radio" name="pizza_size" id="rb_size_large" value="large" >
< label for="rb_size_large" >Large< /label >
< /div >
< div id="pizza_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() {
// Your validation and order submission logic here...
}
function clearEntries() {
// Your code to clear form entries here...
}
< /script >
< /body >
< /html >

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

Instructions

Requirements and Specifications