Write a JavaScript Program to achieve the following requirements from the provided webpage codes. An expected output has been provided for you. The user can select the type of pizza from the “Select a pizza” dropdown list. The user can enter the pizza quantity in the “Pizza Quantity” field. After the user clicks the “Add Pizza” button, the page will show the Pizza list and the quantity of each. Afterward, the selection of the “Select a pizza” dropdown list will go back to “-----” and the quantity in the “Pizza Quantity” field will go back to “0” After the user clicks the “Calculate Total Cost” button, the page will show the total cost of the order and start with the message “Total bill of the order is - ”. Add JavaScript event in the HTML file where necessary. Pizzas Ordering Form Simply select your pizza and enter quantity to calculate total order cost Select a pizza Pizza Quantity
Write a JavaScript Program to achieve the following requirements from the provided webpage codes. An expected output has been provided for you.
- The user can select the type of pizza from the “Select a pizza” dropdown list.
- The user can enter the pizza quantity in the “Pizza Quantity” field.
- After the user clicks the “Add Pizza” button, the page will show the Pizza list and the quantity of each. Afterward, the selection of the “Select a pizza” dropdown list will go back to “-----” and the quantity in the “Pizza Quantity” field will go back to “0”
- After the user clicks the “Calculate Total Cost” button, the page will show the total cost of the order and start with the message “Total bill of the order is - ”.
Add JavaScript event in the HTML file where necessary.
<!DOCTYPE html>
<html>
<body>
<h1>Pizzas Ordering Form</h1>
<p> Simply select your pizza and enter quantity to calculate total order cost </p>
<form id="orderForm">
<p>
<label for="pizza_list">Select a pizza</label>
<select name="pizza_list " id="pizza_list">
<option value="---" selected id="empty">-----</option>
<option value="10" name="Margherita">Margherita ($10 each)</option>
<option value="12" name="Pepperoni">Pepperoni ($12 each)</option>
<option value="15" name="Supreme">Supreme ($15 each)</option>
</select>
</p>
<p>
<label for="pizza_quantity">Pizza Quantity</label>
<input type="text" name="pizza_quantity" value="0" id="pizza_quantity">
</p>
<p> <input type="button" value="Add Pizza" id="add_pizza"> </p>
<p> <input type="button" value="Calculate Total Cost" id="total_cost"> </p>
</form>
<p><ul id="ulList"></ul></p>
<div id="message"></div>
<script>
// Your code goes here
</script>
</body>
</html>
Trending now
This is a popular solution!
Step by step
Solved in 3 steps with 10 images
