C++ --- I need HTML code, CSS code and Javascript in the HTML code please! Thank
ID: 3936549 • Letter: C
Question
C++ --- I need HTML code, CSS code and Javascript in the HTML code please! Thank you!
You've been hired by Coffee Cups to write a web page that serves as a cash register database and stores sales for the business. Coffee Cups sells coffee of the following types and sizes:
l-light. b-blend. d-dark
s-small. $2.00. $2.50. $2.75
m-medium $2.80. $3.00. $3.20
l-large. $3.60. $3.85. $4.00
The sales will be stored in a two-dimensional array. The array should be defined with space for up to ten sales. Information stored for each sale includes:
Sale ID
Coffee type (single letter)
Coffee size (single letter)
Sale subtotal
Sale tax
Sale total
Therefore, you need a 10x6 array. The array should be declared script-level, outside any function, so that its information is retained while the web page is open. You do not need to code any array-resizing logic. Provide the following controls for the interface:
Sale ID (label and read-only text box) – shows the ID for the current sale. Use 1000 as the starting sale ID.
Coffee type (label and text box) – the type of coffee ordered. The only acceptable codes are l (light), b (blend), and d (dark). Print an alert message if any other code is entered.
Coffee size (label and text box) – the size of coffee ordered. The only acceptable codes are s (small), m (medium), and l (large). Print an alert message if any other code is entered.
A Totals button to perform the following:
ü Verify the coffee type entered.
ü Verify the coffee size entered.
ü Calculate and display the subtotal based on the coffee type and size.
ü Calculate and display the sales tax (subtotal * 0.06).
ü Calculate and display the total (subtotal + sales tax).
ü Store information about the sale in the sales array.
Subtotal (label and read-only text box) – the amount of the sale before sales tax.
Sales tax (label and read-only text box) – the sales tax.
Total (label and read-only text box) – the total cost of the sale.
A New button that starts a new sale with a unique Sale ID. Store the Sale ID in the sales array.
A Prev button that shows the previous sale. If pressed from the oldest sale, show the newest sale (wrap around).
A Next button that shows the next sale. If pressed from the newest sale, show the oldest sale (wrap around).
A Reset button to clear all information about the current sale, except the Sale ID
Sales count (label and read-only text box) – the current number of sales.
Also include these elements:
A page header with a title.
A page footer with the company name and an e-mail link.
Ensure that labels and text boxes are aligned in columns. Connect the web page to a .CSS style sheet containing specifications for each category of control used in the page (body, p, inputs, etc.). Place JavaScript in the HTML page.
Explanation / Answer
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Coffee Shop Reg</title>
<script type="text/javascript">
function showDiv() {
document.getElementById('resultsDiv').style.display = "block";
}
function resetForm() {
document.getElementById("coffeeForm").reset();
}
function validateFormFields(){
var x = document.forms["coffeeForm"]["coffeeType"].value;
if (x == "L" || x == "B" || x="D") {
alert("use L or B or D ");
return true;
}
var y = document.forms["coffeeForm"]["coffeeSize"].value;
if(y =="S" || y = "M" || y="L"){
alert("use S or M or L");
return true;
}
}
function newSale() {
saleNum = salesInfo.length ;
document.getElementById("coffeeForm").reset();
document.getElementById("saleID").value = 1000 + saleNum;
document.getElementById("salesCount").value = saleNum;
console.log(salesInfo);
}
function getSale(saleNumber) {
Object.keys(salesInfo[saleNum]).forEach(function (key) {
document.getElementById(key).value = salesInfo[saleNum][key];
});
}
function previousSale() {
if (saleNum > 0) {
saleNum--;
}
getSale(saleNum);
}
function nextSale() {
if (saleNum < salesInfo.length - 1) {
saleNum++;
}
getSale(saleNum);
}
function confirmForm() {
var coffeeType = document.getElementById('coffeeType').value.toUpperCase(),
coffeeSize = document.getElementById('coffeeSize').value.toUpperCase(),
saleID = document.getElementById('saleID').value;
if (!price[coffeeType]) {
alert("Error: Please enter a valid coffee type (L - Light, B - Blend, D - Dark)!");
return false;
}
if (!price[coffeeType][coffeeSize]) {
alert("Error: Please enter a valid coffee size (S - Small, M - Medium, L - Large).");
return false;
}
var subtotal = price[coffeeType][coffeeSize];
var salesTax = subtotal * 0.06;
var total = subtotal + salesTax;
salesInfo[saleNum] = salesInfo[saleNum] || {};
salesInfo[saleNum].saleID = saleID;
salesInfo[saleNum].coffeeType = coffeeType;
salesInfo[saleNum].coffeeSize = coffeeSize;
salesInfo[saleNum].subtotal = subtotal.toFixed(2);
salesInfo[saleNum].salesTax = salesTax.toFixed(2);
salesInfo[saleNum].total = total.toFixed(2);
getSale(saleNum);
return true;
}
var saleNum = 0,
price = {
L: { S: 2.00, M: 2.80, L: 3.60 },
B: { S: 2.50, M: 3.00, L: 3.85 },
D: { S: 2.75, M: 3.20, L: 4.00 }
},
salesInfo = []
</script>
</head>
<body>
<form id="coffeeForm">
<p>
<label>Sale ID: <input type="text" name="saleID" id="saleID"
value="1000" disabled></label><label>Sales Count: <input
type="text" name="salesCount" id="salesCount" value="0" disabled></label>
</p>
<p>
<label>Coffee Type (L - Light, B - Blend, D - Dark): <input
type="text" name="coffeeType" id="coffeeType" size="1"
required></label>
</p>
<p>
<label>Coffee Size (S - Small, M - Medium, L - Large): <input
type="text" name="coffeeSize" id="coffeeSize" size="1"
required></label>
</p>
<p>
<button class="button button1">Calculate</button>
</p>
<p>
<Table align="left">
<tr>
<td><label>Subtotal: </td>
<td><input type="text" name="subtotal" id="subtotal"
readonly></label></td>
</tr>
</p>
<p>
<tr>
<td><label>Sales Tax: </td>
<td><input type="text" name="salesTax" id="salesTax"
readonly></label></td>
</tr>
</p>
<p>
<tr>
<td><label>Total: </td>
<td><input type="text" name="total" id="total"
readonly></label></td>
</tr>
</p>
<p>
<tr>
<td colspan="4"><button
class="button button1">New Sale</button>
<button
class="button button1">PreviousSale</button>
<button class="button button1">
NextSale</button> <input type="reset" value="Reset" class="button button1"></td>
</tr>
</table>
</p>
</form>
</body>
</html>
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.