90 lines
3.5 KiB
HTML
90 lines
3.5 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<!--
|
||
|
|
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
|
||
|
|
Click nbfs://nbhost/SystemFileSystem/Templates/ClientSide/html.html to edit this template
|
||
|
|
-->
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Problem 4</title>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
</head>
|
||
|
|
<style>
|
||
|
|
table, th, td {
|
||
|
|
border: 1px solid;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<body>
|
||
|
|
<div id="tableDiv"></div>
|
||
|
|
<!div><!input type="button" onclick="tableBuilder()" value="Build table"><!/div>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
const formatter = new Intl.NumberFormat('en-US', {
|
||
|
|
style: 'currency',
|
||
|
|
currency: 'USD',
|
||
|
|
});
|
||
|
|
let itemPrices = [];
|
||
|
|
let multipliers = [1, 1, 1, 1, 1, 1, 1, 1];
|
||
|
|
let ids = ["notebookVal", "penVal", "mechanicalPencilVal", "refilPackVal", "laptopCaseVal", "cellphoneCaseVal", "threeRingBinderVal", "threeHolePaperRefilVal"];
|
||
|
|
tableBuilder();
|
||
|
|
function getTotal() {
|
||
|
|
let total = 0;
|
||
|
|
for (let i = 0; i < itemPrices.length; ++i) {
|
||
|
|
total += itemPrices[i];
|
||
|
|
}
|
||
|
|
return total;
|
||
|
|
}
|
||
|
|
function updateMultiplier(id) {
|
||
|
|
let basePrices = [5.95, 4.95, 2.95, 0.98, 29.99, 18.99, 6.95, 2.00];
|
||
|
|
let multValue;
|
||
|
|
// Set item values to base prices on page load.
|
||
|
|
if (id == undefined) {
|
||
|
|
multValue = -1; // This prevents the function from crashing when the page loads.
|
||
|
|
for (let i = 0; i < basePrices.length; ++i) {
|
||
|
|
itemPrices[i] = (basePrices[i]);
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
multValue = document.getElementById(id).value;
|
||
|
|
}
|
||
|
|
// Determine index to update
|
||
|
|
for (let i = 0; i < ids.length; ++i) {
|
||
|
|
if (id == ids[i]) {
|
||
|
|
var idIndex = i;
|
||
|
|
multipliers[i] = multValue;
|
||
|
|
console.log("idIndex:", idIndex);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// Set itemPrices;
|
||
|
|
//itemPrices = []; //Clear array
|
||
|
|
for (let i = 0; i < basePrices.length; ++i) {
|
||
|
|
if (idIndex == i) {
|
||
|
|
itemPrices[i] = (basePrices[i] * multValue);
|
||
|
|
} else {
|
||
|
|
//
|
||
|
|
}
|
||
|
|
}
|
||
|
|
tableBuilder();
|
||
|
|
console.log(id + ": ", itemPrices[idIndex]);
|
||
|
|
}
|
||
|
|
function tableBuilder() {
|
||
|
|
let itemNames = ["Notebook", "Pen", "Mechanical Pencil", "Lead refil pack", "Laptop case", "Cellphone case", "3-ring binder", "3-hole paper refil"];
|
||
|
|
let tableString = "";
|
||
|
|
tableString = "<table>" + "<tr>" + " <th>Item Name</th>" + " <th>Quantity</th>" + " <th>Price</th>" + " </tr>";
|
||
|
|
|
||
|
|
for (let i = 0; i < itemNames.length; ++i) {
|
||
|
|
tableString += "<tr>";
|
||
|
|
tableString += "<td>" + itemNames[i] + "</td>";
|
||
|
|
tableString += "<td>" + "<input type='number' min='0'" + "id='" + ids[i] + "' onChange='updateMultiplier(this.id);'" + "value='" + multipliers[i] + "' >" + "</td>";
|
||
|
|
tableString += "<td>" + formatter.format(itemPrices[i]) + "</td>";
|
||
|
|
tableString += "</tr>";
|
||
|
|
}
|
||
|
|
tableString += "</table>";
|
||
|
|
tableString += "<p> Total: " + formatter.format(getTotal()) + "</p>";
|
||
|
|
document.getElementById("tableDiv").innerHTML = tableString;
|
||
|
|
}
|
||
|
|
updateMultiplier();
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</html>
|