Pizza Order
var total = parseFloat(0);
var pizza_type = "";
var add_specials = "";
var add_extras = "";
$(document).ready(function () {
$("#submit").click(function () {
total = 0;
pizza_type = "";
add_specials = "";
add_extras = "";
total += parseFloat($('input:radio[name=pizza_type]:checked').val().split(" ")[0]);
pizza_type = $('input:radio[name=pizza_type]:checked').val().split(" ")[1];
total += parseFloat($('input:radio[name=specials]:checked').val().split(" ")[0]);
add_specials = $('input:radio[name=specials]:checked').val().split(" ")[1]
if ($("#extra_cheese").prop("checked")) {
total += 1.5;
add_extras+= "cheese, "
}
if ($("#extra_pepperoni").prop("checked")) {
total += 1.5;
add_extras += "pepperoni, "
}
if ($("#extra_mushrooms").prop("checked")) {
total += 1.5;
add_extras += "mushrooms, "
}
if ($("#extra_bacon").prop("checked")) {
total += 1.5;
add_extras += "bacon, "
}
if ($("#extra_olives").prop("checked")) {
total += 1.5;
add_extras += "olives, "
}
$("#receipt").html("<br/>" + $("#name").val() + "<br/>" + $("#address").val() + "<br/>" + $("#phone").val() + "<br/>"
+ "Pizza type: " + pizza_type + "<br/>" + "Specials: " + add_specials + "<br/>" + "Extras: " + add_extras + "<br/>");
$("#total_cost").html(total);
});
});
-------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<title>assignment final</title>
<script src="jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="javascript.js"></script>
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" media="all">
<link rel="stylesheet" href="css/styles.css" type="text/css" media="all">
</head>
<body>
<div class="title">
<h1>Pizza Order</h1>
<hr />
</div>
<form name="pizza_order">
<b>Choose pizza size</b><br />
<input type="radio" name="pizza_type" value="8 small" checked />small $8<br />
<input type="radio" name="pizza_type" value="10 medium" />medium $10<br />
<input type="radio" name="pizza_type" value="15 large" />large $15<br />
<input type="radio" name="pizza_type" value="18 extra_large" />extra large $18<br />
<br />
<b>Add specials</b><br />
<input type="radio" name="specials" value="0 none" checked />none<br />
<input type="radio" name="specials" value="3 super_cheesy" />super cheesy $3<br />
<input type="radio" name="specials" value="5 extra_meaty" />extra meaty $5<br />
<input type="radio" name="specials" value="2 really_veggy" />really veggy $2<br />
<br />
<b>Add extras</b><br />
<input type="checkbox" id="extra_cheese" />extra cheese $1.5<br />
<input type="checkbox" id="extra_pepperoni" />extra pepperoni $1.5<br />
<input type="checkbox" id="extra_mushrooms" />extra mushrooms $1.5<br />
<input type="checkbox" id="extra_bacon" />extra bacon $1.5<br />
<input type="checkbox" id="extra_olives" />extra olives $1.5<br />
<br />
<table>
<tr>
<td>name</td>
<td><input type="text" id="name"/></td>
</tr>
<tr>
<td>address</td>
<td><input type="text" id="address"/></td>
</tr>
<tr>
<td>phone number</td>
<td><input type="text" id="phone"/></td>
</tr>
</table>
<br />
<input type="button" value="place order" id="submit" /><br />
<br />
<b>Receipt : </b><span id="receipt"></span>
<b>total: $</b> <span id="total_cost"></span>
</form>
</body>
</html>
No comments:
Post a Comment