(Web Programming) Please help me find and fix the errors and/or missing codes be
ID: 667810 • Letter: #
Question
(Web Programming) Please help me find and fix the errors and/or missing codes below
"Product_order.html" code below:
<!DOCTYPE html>
<html lang="en">
<head>
<title>NA - NA</title>
<link href="style.css" rel="stylesheet" />
<script src="product_order.js" type="text/javascript"></script>
</head>
<meta charset="utf-8"/>
<body>
<h1>NA - NA</h1>
</form id="order_form">
<fieldset>
<legend>Buy a phone</legend>
<div class="tab">
<div class="tRow">
<div class="tCell"><label for="product">Product:</label></div>
<div class="tCell">
<select id="product">
<option>iPad</option>
<option>iPhone</option>
<option>Samsung Galaxy</option>
<option>Moto-X</option>
</select>
<span id="errl"></span>
</div>
</div><!-- END ROW -->
<div class="tRow">
<div class="tCell"><label for="quantity">Quantity:</label></div>
<div class="tCell">
<input type="number" id="quantity" />
<span id="err2"></span>
</div>
</div><!-- END ROW -->
<div class="tRow">
<div class="tCell"><label for="unit_price">Unit Price:</label></div>
<div class="tCell">
<input type="number" id="unit_price" />
<span id="err3"></span>
</div>
</div><!-- END ROW -->
<div class="tRow">
<div class="tCell"><label for="discount_rate">Discount Rate:
</label></div>
<div class="tCell">
<input type="number" id="discount_rate" />
<span id="err4"></span>
</div>
</div><!-- END ROW -->
<div class="tRow">
<div class="tCell"><label for="order_date">Order Date:</label></div>
<div class="tCell">
<input type="text" id="order_date" />
<span id="err5"></span>
</div>
</div><!-- END ROW -->
<div class="tRow">
<div class="tCell"><label for="first_name">First Name:</label></div>
<div class="tCell">
<input type="text" id="first_name" />
<span id="err6"></span>
</div>
</div><!-- END ROW -->
<div class="tRow">
<div class="tCell"><label for="last_name">Last Name:</label></div>
<div class="tCell">
<input type="text" id="last_name" />
<span id="err7"></span>
</div>
</div><!-- END ROW -->
<div class="tRow">
<div class="tCell"><label for="payment_type">Payment Type:</label></div>
<div class="tCell">
<select id="payment_type">
<option>Visa</option>
<option>MasterCard</option>
<option>American Express</option>
<option>Discover</option>
</select>
<span id="err8"></span>
</div>
</div><!-- END ROW -->
<div class="tRow">
<div class="tCell"><label for="card_number">Card Number:
</label></div>
<div class="tCell">
<input type="text" id="card_number" />
<span id="err9"></span>
</div>
</div><!-- END ROW -->
<div class="tRow">
<div class="tCell"><label for="security_code">Security Code:
</label></div>
<div class="tCell">
<input type="text" id="security_code" />
<span id="errl0"></span>
</div>
</div><!-- END ROW -->
<div class="tRow">
<div class="tCell"> </div>
<div class="tCell"><input type="button" id="order_button" value="Place Order" /></div>
</div><!-- END ROW -->
</div><!-- END TABLE -->
<br />
<div id="output"></div>
</fieldset>
</form>
</body>
</html>
"product_order.js" code below:
function calcTotal() {
for (i=1; i<=10; i++) {
var myErr = document.getElementById("err" + i);
myErr.innerHTML = "";
}
document.getElementById("output").innerHTML = "";
// PULL IN FORM FILEDS
var product = document.getElementById("product").value;
var quantity = document.getElementById("quantity").value;
var unit_price = document.getElementById("unit_price").value;
var order_date = document.getElementById("order_date").value;
var first_name = document.getElementById("first_name").value;
var last_name = document.getElementById("last_name").value;
var payment_type = document.getElementById("payment_type").value;
var card_number = document.getElementById("card_number").value;
var security_code = document.getElementById("security_code").value;
var discounted_rate = document.getElementById("discount_rate").value;
//DO YOU HAVE A FLAG
var valid = true;
if (product === "") {
valid = false;
document.getElementById("err1").innerHTML = "ERROR!!";
}
if (isNaN(quantity) || quantity < 1) {
valid = false;
document.getElementById("err2").innerHTML = "ERROR!!";
}
if (isNaN(unit_price) || unit_price <= 0) {
valid = false;
document.getElementById("err3").innerHTML = "ERROR!!";
}
if (isNaN(discount_rate) || discount_rate <= 0) {
valid = false;
document.getElementById("err4").innerHTML = "ERROR!!";
}
if (order_date === "" || order_date.length < 8 || order_date.length > 10) {
valid = false;
document.getElementById("err5").innerHTML = "ERROR!!";
}
if (first_name === "") {
valid = false;
document.getElementById("err6").innerHTML = "ERROR!!";
}
if (last_name === "") {
valid = false;
document.getElementById("err7").innerHTML = "ERROR!!";
}
if (payment_type === "") {
valid = false;
document.getElementById("err8").innerHTML = "ERROR!!";
}
if (isNaN(card_number) || card_number.length !== 16 ) {
valid = false;
document.getElementById("err9").innerHTML = "ERROR!!";
}
if (isNaN(security_code) || security_code.length !== 3 ) {
valid = false;
document.getElementById("err10").innerHTML = "ERROR!!";
}
if (valid) {
// ASSIGN OUTPUT
var discounted_amount = unit_price * (discounted_rate / 100);
var order_total = quantity * (unit_price - discounted_amount);
var myOut = "Thank you for ordering, " + first_name + " ";
myOut += last_name + ". Your order total is $" + order_total +".";
document.getElementById("output").innerHTML = myOut;
} else {
document.getElementById("output").innerHTML = "";
}
}
function init()
{
var order_button = document.getElementById("order_button");
order_button.onclick= calcTotal;
// Add Error Class To Span
for (i=1; i<=10; i++) {
var myErr = document.getElementById("err" + i);
myErr.className = "error";
}
}
window.onload = init;
"style.css" code below:
body { width: 90%; margin:0 auto; max-width:460px; }
.tab { display:table; width:100%; table-layout:fixed;}
.tRow { display:table-row; width: 100%; }
.tCell { display:table-cell; vertical-align;top; }
.tRow .tCell:nth-child(1) { width:35%; text-align:right; font-weight:bold }
.tRow .tCell:nth-child(2) { width:64%; padding-left:1%;}
.error { font-weight:bold; color:red; }
Explanation / Answer
<!DOCTYPE html>
<html lang="en">
<head>
<title>NA - NA</title>
<link href="style.css" rel="stylesheet" />
<script src="product_order.js" type="text/javascript"></script>
</head>
<meta charset="utf-8"/>
<body>
<h1>NA - NA</h1>
<form id="order_form">
<fieldset>
<legend>Buy a phone</legend>
<div class="tab">
<div class="tRow">
<div class="tCell"><label for="product">Product:</label></div>
<div class="tCell">
<select id="product">
<option>iPad</option>
<option>iPhone</option>
<option>Samsung Galaxy</option>
<option>Moto-X</option>
</select>
<span id="errl"></span>
</div>
</div><!-- END ROW -->
<div class="tRow">
<div class="tCell"><label for="quantity">Quantity:</label></div>
<div class="tCell">
<input type="number" id="quantity" />
<span id="err2"></span>
</div>
</div><!-- END ROW -->
<div class="tRow">
<div class="tCell"><label for="unit_price">Unit Price:</label></div>
<div class="tCell">
<input type="number" id="unit_price" />
<span id="err3"></span>
</div>
</div><!-- END ROW -->
<div class="tRow">
<div class="tCell"><label for="discount_rate">Discount Rate:
</label></div>
<div class="tCell">
<input type="number" id="discount_rate" />
<span id="err4"></span>
</div>
</div><!-- END ROW -->
<div class="tRow">
<div class="tCell"><label for="order_date">Order Date:</label></div>
<div class="tCell">
<input type="text" id="order_date" />
<span id="err5"></span>
</div>
</div><!-- END ROW -->
<div class="tRow">
<div class="tCell"><label for="first_name">First Name:</label></div>
<div class="tCell">
<input type="text" id="first_name" />
<span id="err6"></span>
</div>
</div><!-- END ROW -->
<div class="tRow">
<div class="tCell"><label for="last_name">Last Name:</label></div>
<div class="tCell">
<input type="text" id="last_name" />
<span id="err7"></span>
</div>
</div><!-- END ROW -->
<div class="tRow">
<div class="tCell"><label for="payment_type">Payment Type:</label></div>
<div class="tCell">
<select id="payment_type">
<option>Visa</option>
<option>MasterCard</option>
<option>American Express</option>
<option>Discover</option>
</select>
<span id="err8"></span>
</div>
</div><!-- END ROW -->
<div class="tRow">
<div class="tCell"><label for="card_number">Card Number:
</label></div>
<div class="tCell">
<input type="text" id="card_number" />
<span id="err9"></span>
</div>
</div><!-- END ROW -->
<div class="tRow">
<div class="tCell"><label for="security_code">Security Code:
</label></div>
<div class="tCell">
<input type="text" id="security_code" />
<span id="errl0"></span>
</div>
</div><!-- END ROW -->
<div class="tRow">
<div class="tCell"> </div>
<div class="tCell"><input type="button" id="order_button" value="Place Order" /></div>
</div><!-- END ROW -->
</div><!-- END TABLE -->
<br />
<div id="output"></div>
</fieldset>
</form>
</body>
</html>
"product_order.js" code below:
function calcTotal() {
for (i=1; i<=10; i++) {
var myErr = document.getElementById("err" + i);
myErr.innerHTML = "";
}
document.getElementById("output").innerHTML = "";
// PULL IN FORM FILEDS
var product = document.getElementById("product").value;
var quantity = document.getElementById("quantity").value;
var unit_price = document.getElementById("unit_price").value;
var order_date = document.getElementById("order_date").value;
var first_name = document.getElementById("first_name").value;
var last_name = document.getElementById("last_name").value;
var payment_type = document.getElementById("payment_type").value;
var card_number = document.getElementById("card_number").value;
var security_code = document.getElementById("security_code").value;
var discounted_rate = document.getElementById("discount_rate").value;
//DO YOU HAVE A FLAG
var valid = true;
if (product === "") {
valid = false;
document.getElementById("err1").innerHTML = "ERROR!!";
}
if (isNaN(quantity) || quantity < 1) {
valid = false;
document.getElementById("err2").innerHTML = "ERROR!!";
}
if (isNaN(unit_price) || unit_price <= 0) {
valid = false;
document.getElementById("err3").innerHTML = "ERROR!!";
}
if (isNaN(discount_rate) || discount_rate <= 0) {
valid = false;
document.getElementById("err4").innerHTML = "ERROR!!";
}
if (order_date === "" || order_date.length < 8 || order_date.length > 10) {
valid = false;
document.getElementById("err5").innerHTML = "ERROR!!";
}
if (first_name === "") {
valid = false;
document.getElementById("err6").innerHTML = "ERROR!!";
}
if (last_name === "") {
valid = false;
document.getElementById("err7").innerHTML = "ERROR!!";
}
if (payment_type === "") {
valid = false;
document.getElementById("err8").innerHTML = "ERROR!!";
}
if (isNaN(card_number) || card_number.length !== 16 ) {
valid = false;
document.getElementById("err9").innerHTML = "ERROR!!";
}
if (isNaN(security_code) || security_code.length !== 3 ) {
valid = false;
document.getElementById("err10").innerHTML = "ERROR!!";
}
if (valid) {
// ASSIGN OUTPUT
var discounted_amount = unit_price * (discounted_rate / 100);
var order_total = quantity * (unit_price - discounted_amount);
var myOut = "Thank you for ordering, " + first_name + " ";
myOut += last_name + ". Your order total is $" + order_total +".";
document.getElementById("output").innerHTML = myOut;
} else {
document.getElementById("output").innerHTML = "";
}
}
function init()
{
var order_button = document.getElementById("order_button");
order_button.onclick= calcTotal;
// Add Error Class To Span
for (i=1; i<=10; i++) {
var myErr = document.getElementById("err" + i);
myErr.className = "error";
}
}
window.onload = init;
"style.css" code below:
body { width: 90%; margin:0 auto; max-width:460px; }
.tab { display:table; width:100%; table-layout:fixed;}
.tRow { display:table-row; width: 100%; }
.tCell { display:table-cell; vertical-align;top; }
.tRow .tCell:nth-child(1) { width:35%; text-align:right; font-weight:bold }
.tRow .tCell:nth-child(2) { width:64%; padding-left:1%;}
.error { font-weight:bold; color:red; }
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.