Instructions
Requirements and Specifications
- 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:
- 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:
- 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.
- 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:
- Marking Schemes:
Submit your assignment no later than 11:59pm in the due date.
- For programming questions, 10% of the mark will be judged on the coding style.
- 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>