/* === GRID SYSTEM (A–E columns) === A = 300px B = 110px C = 110px D = 110px E = 110px Gaps = 20px Total = 820px */ .row { width: 820px; height: 50px; margin-left: 70px; display: flex; align-items: center; justify-content: flex-start; margin-bottom: 12px; } /* Column A: label */ .colA { width: 300px; font-size: 23px; display: flex; align-items: center; height: 40px; } /* Columns B–D: blue input cells */ .cell { width: 110px; height: 40px; background-color: #007BFF; border-radius: 6px; border: none; color: white; font-size: 23px; text-align: center; margin-left: 20px; outline: none; } /* Column E: empty for these rows */ .colE { width: 110px; margin-left: 20px; } /* Remove spinner arrows */ input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* ============================================================ JS FOR ROWS 2–4 (Miles per Year, MPG, Cost per Gallon) Reads and stores all 9 inputs for Vehicles 1–3 ============================================================ */ function readInputs() { /* === ROW 2: Total Miles per Year (whole numbers) === */ let v1_miles = Number(document.getElementById("r2cB_v1_miles").value) || 0; let v2_miles = Number(document.getElementById("r2cC_v2_miles").value) || 0; let v3_miles = Number(document.getElementById("r2cD_v3_miles").value) || 0; /* === ROW 3: Miles per Gallon (MPG) — decimals allowed === */ let v1_mpg = Number(document.getElementById("r3cB_v1_mpg").value) || 0; let v2_mpg = Number(document.getElementById("r3cC_v2_mpg").value) || 0; let v3_mpg = Number(document.getElementById("r3cD_v3_mpg").value) || 0; /* === ROW 4: Cost per Gallon — decimals allowed === */ let v1_price = Number(document.getElementById("r4cB_v1_price").value) || 0; let v2_price = Number(document.getElementById("r4cC_v2_price").value) || 0; let v3_price = Number(document.getElementById("r4cD_v3_price").value) || 0; /* === Return an object so other functions can use the data === */ return { v1_miles, v2_miles, v3_miles, v1_mpg, v2_mpg, v3_mpg, v1_price, v2_price, v3_price }; } /* ============================================================ AUTO‑UPDATE: Recalculate whenever the user types ============================================================ */ function attachListeners() { const ids = [ "r2cB_v1_miles", "r2cC_v2_miles", "r2cD_v3_miles", "r3cB_v1_mpg", "r3cC_v2_mpg", "r3cD_v3_mpg", "r4cB_v1_price", "r4cC_v2_price", "r4cD_v3_price" ]; ids.forEach(id => { document.getElementById(id).addEventListener("input", () => { const data = readInputs(); console.log("Updated vehicle data:", data); // Later: call calculateTotals(data) }); }); } /* === Initialize listeners when page loads === */ window.onload = attachListeners;
Miles per Gallon (MPG)
Total Miles per Year
Cost per Gallon