Homework SourseC I need HTML code CSS code and Javascript in the HTML code
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.
Solution
<!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\" onsubmit=\"return false\">
<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\"
onsubmit=\"return validateFormFields()\" required></label>
</p>
<p>
<label>Coffee Size (S - Small, M - Medium, L - Large): <input
type=\"text\" name=\"coffeeSize\" id=\"coffeeSize\" size=\"1\"
onsubmit=\"return validateFormFields()\" required></label>
</p>
<p>
<button onClick=\"confirmForm();return false;\" class=\"button button1\">Calculate</button>
</p>
<p>
<Table align=\"left\">
<tr>
<td><label>Subtotal: </td>
<td><input type=\"text\" name=\"subtotal\" id=\"subtotal\"
style=\"background-color: #gghdecC2;\" readonly></label></td>
</tr>
</p>
<p>
<tr>
<td><label>Sales Tax: </td>
<td><input type=\"text\" name=\"salesTax\" id=\"salesTax\"
style=\"background-color: #gghdecC2;\" readonly></label></td>
</tr>
</p>
<p>
<tr>
<td><label>Total: </td>
<td><input type=\"text\" name=\"total\" id=\"total\"
style=\"background-color: #gghdecC2;\" readonly></label></td>
</tr>
</p>
<p>
<tr>
<td colspan=\"4\"><button onClick=\"newSale();\"
class=\"button button1\">New Sale</button>
<button onClick=\"previousSale();return false;\"
class=\"button button1\">PreviousSale</button>
<button onClick=\"nextSale();return false;\" class=\"button button1\">
NextSale</button> <input type=\"reset\" value=\"Reset\" class=\"button button1\"></td>
</tr>
</table>
</p>
</form>
</body>
</html>
