557 lines
22 KiB
HTML
557 lines
22 KiB
HTML
<DOCTYPE HTML>
|
|
<HEAD>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="styles.css">
|
|
<link rel="icon" type="image/png" href="assets/favicon-48x48.png" sizes="48x48" />
|
|
<link rel="icon" type="image/png" href="assets/favicon-32x32.png" sizes="32x32" />
|
|
<link rel="icon" type="image/png" href="assets/favicon-16x16.png" sizes="16x16" />
|
|
<title>MPE Cost Calculator</title>
|
|
</HEAD>
|
|
<BODY>
|
|
<HEADER>
|
|
<img src="assets/mpe-logo.png" class="logo">
|
|
</HEADER>
|
|
<DIV class="textured-background">
|
|
<DIV style="padding: 40px; display: flex; width: 70%;">
|
|
<DIV style="width: 50%;">
|
|
<h1 style="color: #2c6230;">Cost Calculator</h1>
|
|
<p style="padding: 20px; text-align: left">Welcome to the MPE cost calculator! We understand that every project has a budget, which is why we've developed this tool to help you estimate your project costs and see where you can cut costs without sacrificing quality.
|
|
<br></br>
|
|
Our cost calculator takes into account various aspects of your project, including materials, labor, and equipment costs. By providing accurate estimates for each of these components, we can help you make informed decisions about your project budget.
|
|
<br></br>
|
|
Our calculator is designed to be user-friendly and intuitive, allowing you to easily adjust project parameters and see how they impact your overall costs. With real-time feedback on cost changes, you can quickly explore different options and find the best solution for your project needs.
|
|
<br></br>
|
|
We're committed to providing our customers with the best possible value for their investment, and our cost calculator is just one of the ways we deliver on that promise. Try it out today and see how our engineering company can help you achieve your project goals while staying within your budget.</p>
|
|
</DIV>
|
|
<img style="width: 50%; height: auto; border-radius: 10px;" src=https://cdn.shortpixel.ai/spai2/q_glossy+w_765+to_auto+ret_img/https://designeverest.com/lounge/assets/uploads/images/co_brand_1/article/original/2020/structural-calculation-1580403270.jpg">
|
|
</DIV>
|
|
</DIV>
|
|
<DIV class="main-content">
|
|
<TABLE id='myTable' class="myTable" cellpadding="2" >
|
|
<TR>
|
|
<TH>Division</TH>
|
|
<TH>Description</TH>
|
|
<TH></TH>
|
|
<TH>Base Cost</TH>
|
|
<TH>Adjustment Factor</TH>
|
|
<TH></TH>
|
|
<TH>Adjusted Cost</TH>
|
|
<TH>Percent</TH>
|
|
</TR>
|
|
<!--
|
|
What do the variables stand for?
|
|
r1 = Row 1
|
|
s1 = Slider 1
|
|
t1 = Total 1
|
|
p1 = Percent 1
|
|
d1 = Difference 1
|
|
ptotal = Percent Total
|
|
-->
|
|
<TR>
|
|
<TD>0 & 1</TD>
|
|
<TD>Conditions of Contract and General Requirements</TD>
|
|
<TD class="dollar-sign">$</TD>
|
|
<TD><INPUT type='text' name="r1" id="r1"></TD>
|
|
<TD>
|
|
<INPUT type='range' min='50' max='200' value='100' name='s1' id='s1'>
|
|
<SPAN id="p1" class="percent-color"></SPAN>
|
|
</TD>
|
|
<TD class="dollar-sign">$</TD>
|
|
<TD><INPUT type='text' name='t1' id='t1' readonly></TD>
|
|
<TD><SPAN id="d1" class="percent-color"></SPAN></TD>
|
|
</TR>
|
|
<TR>
|
|
<TD>2</TD>
|
|
<TD>Civil</TD>
|
|
<TD class="dollar-sign">$</TD>
|
|
<TD><INPUT type='text' name="r2" id="r2"></TD>
|
|
<TD>
|
|
<INPUT type='range' min='50' max='200' value='100' name='s2' id='s2'>
|
|
<SPAN id="p2" class="percent-color"></SPAN>
|
|
</TD>
|
|
<TD class="dollar-sign">$</TD>
|
|
<TD><INPUT type='text' name='t2' id='t2' readonly></TD>
|
|
<TD><SPAN id="d2" class="percent-color"></SPAN></TD>
|
|
</TR>
|
|
<TR>
|
|
<TD>3</TD>
|
|
<TD>Concrete</TD>
|
|
<TD class="dollar-sign">$</TD>
|
|
<TD><INPUT type='text' name="r3" id="r3"></TD>
|
|
<TD>
|
|
<INPUT type='range' min='50' max='200' value='100' name='s3' id='s3'>
|
|
<SPAN id="p3" class="percent-color"></SPAN>
|
|
</TD>
|
|
<TD class="dollar-sign">$</TD>
|
|
<TD><INPUT type='text' name='t3' id='t3' readonly></TD>
|
|
<TD><SPAN id="d3" class="percent-color"></SPAN></TD>
|
|
</TR>
|
|
<TR>
|
|
<TD>4</TD>
|
|
<TD>Masonry</TD>
|
|
<TD class="dollar-sign">$</TD>
|
|
<TD><INPUT type='text' name="r4" id="r4"></TD>
|
|
<TD>
|
|
<INPUT type='range' min='50' max='200' value='100' name='s4' id='s4'>
|
|
<SPAN id="p4" class="percent-color"></SPAN>
|
|
</TD>
|
|
<TD class="dollar-sign">$</TD>
|
|
<TD><INPUT type='text' name='t4' id='t4' readonly></TD>
|
|
<TD><SPAN id="d4" class="percent-color"></SPAN></TD>
|
|
</TR>
|
|
<TR>
|
|
<TD>5</TD>
|
|
<TD>Metals</TD>
|
|
<TD class="dollar-sign">$</TD>
|
|
<TD><INPUT type='text' name="r5" id="r5"></TD>
|
|
<TD>
|
|
<INPUT type='range' min='50' max='200' value='100' name='s5' id='s5'>
|
|
<SPAN id="p5" class="percent-color"></SPAN>
|
|
</TD>
|
|
<TD class="dollar-sign">$</TD>
|
|
<TD><INPUT type='text' name='t5' id='t5' readonly></TD>
|
|
<TD><SPAN id="d5" class="percent-color"></SPAN></TD>
|
|
</TR>
|
|
<TR>
|
|
<TD>6</TD>
|
|
<TD>Woods and Plastics</TD>
|
|
<TD class="dollar-sign">$</TD>
|
|
<TD><INPUT type='text' name="r6" id="r6"></TD>
|
|
<TD>
|
|
<INPUT type='range' min='50' max='200' value='100' name='s6' id='s6'>
|
|
<SPAN id="p6" class="percent-color"></SPAN>
|
|
</TD>
|
|
<TD class="dollar-sign">$</TD>
|
|
<TD><INPUT type='text' name='t6' id='t6' readonly></TD>
|
|
<TD><SPAN id="d6" class="percent-color"></SPAN></TD>
|
|
</TR>
|
|
<TR>
|
|
<TD>7</TD>
|
|
<TD>Thermal and Moisture Protection</TD>
|
|
<TD class="dollar-sign">$</TD>
|
|
<TD><INPUT type='text' name="r7" id="r7"></TD>
|
|
<TD>
|
|
<INPUT type='range' min='50' max='200' value='100' name='s7' id='s7'>
|
|
<SPAN id="p7" class="percent-color"></SPAN>
|
|
</TD>
|
|
<TD class="dollar-sign">$</TD>
|
|
<TD><INPUT type='text' name='t7' id='t7' readonly></TD>
|
|
<TD><SPAN id="d7" class="percent-color"></SPAN></TD>
|
|
</TR>
|
|
<TR>
|
|
<TD>8</TD>
|
|
<TD>Doors and Windows</TD>
|
|
<TD class="dollar-sign">$</TD>
|
|
<TD><INPUT type='text' name="r8" id="r8"></TD>
|
|
<TD>
|
|
<INPUT type='range' min='50' max='200' value='100' name='s8' id='s8'>
|
|
<SPAN id="p8" class="percent-color"></SPAN>
|
|
</TD>
|
|
<TD class="dollar-sign">$</TD>
|
|
<TD><INPUT type='text' name='t8' id='t8' readonly></TD>
|
|
<TD><SPAN id="d8" class="percent-color"></SPAN></TD>
|
|
</TR>
|
|
<TR>
|
|
<TD>9</TD>
|
|
<TD>Finishes</TD>
|
|
<TD class="dollar-sign">$</TD>
|
|
<TD><INPUT type='text' name="r9" id="r9"></TD>
|
|
<TD>
|
|
<INPUT type='range' min='50' max='200' value='100' name='s9' id='s9'>
|
|
<SPAN id="p9" class="percent-color"></SPAN>
|
|
</TD>
|
|
<TD class="dollar-sign">$</TD>
|
|
<TD><INPUT type='text' name='t9' id='t9' readonly></TD>
|
|
<TD><SPAN id="d9" class="percent-color"></SPAN></TD>
|
|
</TR>
|
|
<TR>
|
|
<TD>10</TD>
|
|
<TD>Specialties</TD>
|
|
<TD class="dollar-sign">$</TD>
|
|
<TD><INPUT type='text' name="r10" id="r10"></TD>
|
|
<TD>
|
|
<INPUT type='range' min='50' max='200' value='100' name='s10' id='s10'>
|
|
<SPAN id="p10" class="percent-color"></SPAN>
|
|
</TD>
|
|
<TD class="dollar-sign">$</TD>
|
|
<TD><INPUT type='text' name='t10' id='t10' readonly></TD>
|
|
<TD><SPAN id="d10" class="percent-color"></SPAN></TD>
|
|
</TR>
|
|
<TR>
|
|
<TD>11</TD>
|
|
<TD>Equipment</TD>
|
|
<TD class="dollar-sign">$</TD>
|
|
<TD><INPUT type='text' name="r11" id="r11"></TD>
|
|
<TD>
|
|
<INPUT type='range' min='50' max='200' value='100' name='s11' id='s11'>
|
|
<SPAN id="p11" class="percent-color"></SPAN>
|
|
</TD>
|
|
<TD class="dollar-sign">$</TD>
|
|
<TD><INPUT type='text' name='t11' id='t11' readonly></TD>
|
|
<TD><SPAN id="d11" class="percent-color"></SPAN></TD>
|
|
</TR>
|
|
<TR>
|
|
<TD>13</TD>
|
|
<TD>Special Construction</TD>
|
|
<TD class="dollar-sign">$</TD>
|
|
<TD><INPUT type='text' name="r12" id="r12"></TD>
|
|
<TD>
|
|
<INPUT type='range' min='50' max='200' value='100' name='s12' id='s12'>
|
|
<SPAN id="p12" class="percent-color"></SPAN>
|
|
</TD>
|
|
<TD class="dollar-sign">$</TD>
|
|
<TD><INPUT type='text' name='t12' id='t12' readonly></TD>
|
|
<TD><SPAN id="d12" class="percent-color"></SPAN></TD>
|
|
</TR>
|
|
<TR>
|
|
<TD>15</TD>
|
|
<TD>Mechanical </TD>
|
|
<TD class="dollar-sign">$</TD>
|
|
<TD><INPUT type='text' name="r13" id="r13"></TD>
|
|
<TD>
|
|
<INPUT type='range' min='50' max='200' value='100' name='s13' id='s13'>
|
|
<SPAN id="p13" class="percent-color"></SPAN>
|
|
</TD>
|
|
<TD class="dollar-sign">$</TD>
|
|
<TD><INPUT type='text' name='t13' id='t13' readonly></TD>
|
|
<TD><SPAN id="d13" class="percent-color"></SPAN></TD>
|
|
</TR>
|
|
<TR>
|
|
<TD>16</TD>
|
|
<TD>Electrical</TD>
|
|
<TD class="dollar-sign">$</TD>
|
|
<TD><INPUT type='text' name="r14" id="r14"></TD>
|
|
<TD>
|
|
<INPUT type='range' min='50' max='200' value='100' name='s14' id='s14'>
|
|
<SPAN id="p14" class="percent-color"></SPAN>
|
|
</TD>
|
|
<TD class="dollar-sign">$</TD>
|
|
<TD><INPUT type='text' name='t14' id='t14' readonly></TD>
|
|
<TD><SPAN id="d14" class="percent-color"></SPAN></TD>
|
|
</TR>
|
|
<TR>
|
|
<TD></TD>
|
|
<TD></TD>
|
|
<TD style='float: right'>Total:</TD>
|
|
<TD><INPUT style="color: rgb(1, 91, 165); font-weight: 700;" type='text' name="totalBox1" id="totalBox1" readonly></TD>
|
|
<TD></TD>
|
|
<TD style='float: right'>Total:</TD>
|
|
<TD><INPUT style="color: rgb(1, 91, 165); font-weight: 700;" type='text' name="totalBox2" id="totalBox2" readonly></TD>
|
|
<TD><SPAN id="ptotal" class="percent-color"></SPAN></TD>
|
|
</TR>
|
|
</TABLE>
|
|
</DIV>
|
|
<!--<INPUT type="button" value="Reset" id="refreshButton">-->
|
|
<FOOTER>
|
|
<div style="display: flex; flex-direction: row;">
|
|
<img src="assets/mpe-logo-standard.png" class="footer-logo">
|
|
<p>© Copyright 2023 MPE Engineering Ltd. All rights reserved.</p>
|
|
</div>
|
|
</FOOTER>
|
|
|
|
<SCRIPT>
|
|
//JS for restting the page
|
|
// Get the current scroll position
|
|
const scrollPos = window.scrollY;
|
|
|
|
// Add event listener to the button
|
|
const refreshButton = document.getElementById('refreshButton');
|
|
refreshButton.addEventListener('click', () => {
|
|
// Save the current scroll position to sessionStorage
|
|
sessionStorage.setItem('scrollPos', scrollPos);
|
|
|
|
// Refresh the page
|
|
location.reload();
|
|
});
|
|
|
|
// Restore the scroll position on page load
|
|
window.onload = () => {
|
|
const scrollPos = sessionStorage.getItem('scrollPos');
|
|
if (scrollPos) {
|
|
window.scrollTo(0, scrollPos);
|
|
sessionStorage.removeItem('scrollPos');
|
|
}
|
|
};
|
|
</SCRIPT>
|
|
|
|
<SCRIPT>
|
|
// Define the number of sliders and text elements you have
|
|
const numElements = 14;
|
|
|
|
// Initialize the total value to 0
|
|
let totalp = 0;
|
|
|
|
for (let i = 1; i <= numElements; i++) {
|
|
const slider = document.getElementById('s' + i);
|
|
const input = document.getElementById('p' + i);
|
|
const percent2 = document.getElementById('d' + i);
|
|
|
|
input.innerHTML = slider.value;
|
|
percent2.innerHTML = '0%';
|
|
|
|
slider.addEventListener('input', () => {
|
|
input.innerHTML = slider.value;
|
|
percent2.innerHTML = slider.value < 100 ? '-' + (100 - slider.value) + "%": '+' + (slider.value - 100) + "%";
|
|
});
|
|
}
|
|
</SCRIPT>
|
|
|
|
<SCRIPT>
|
|
//Script to show the total percentage
|
|
// Get references to the input boxes and ptotal span
|
|
const inputBox1 = document.getElementById('totalBox1');
|
|
const inputBox2 = document.getElementById('totalBox2');
|
|
const ptotal = document.getElementById('ptotal');
|
|
|
|
// Calculate the initial percentage difference and update ptotal
|
|
let diffPercent = getDiffPercent(parseTotal(inputBox1.value), parseTotal(inputBox2.value));
|
|
ptotal.innerHTML = '0%';
|
|
|
|
// Add event listeners to the input boxes to update ptotal
|
|
inputBox1.addEventListener('input', () => {
|
|
diffPercent = getDiffPercent(parseTotal(inputBox1.value), parseTotal(inputBox2.value));
|
|
ptotal.innerHTML = (diffPercent >= 0 ? '-' : '+') + Math.abs(diffPercent).toFixed(2) + '%';
|
|
});
|
|
|
|
inputBox2.addEventListener('input', () => {
|
|
diffPercent = getDiffPercent(parseTotal(inputBox1.value), parseTotal(inputBox2.value));
|
|
ptotal.innerHTML = (diffPercent >= 0 ? '-' : '+') + Math.abs(diffPercent).toFixed(2) + '%';
|
|
});
|
|
|
|
// Add event listeners to sliders to update ptotal
|
|
for (let i = 1; i <= 14; i++) {
|
|
const slider = document.getElementById('s' + i);
|
|
slider.addEventListener('input', () => {
|
|
diffPercent = getDiffPercent(parseTotal(inputBox1.value), parseTotal(inputBox2.value));
|
|
ptotal.innerHTML = (diffPercent >= 0 ? '-' : '+') + Math.abs(diffPercent).toFixed(2) + '%';
|
|
});
|
|
}
|
|
|
|
// Helper function to calculate the percentage difference between two values
|
|
function getDiffPercent(val1, val2) {
|
|
const diff = val1 - val2;
|
|
return diff / ((val1 + val2) / 2) * 100;
|
|
}
|
|
|
|
// Helper function to parse a string representing a dollar amount and return a numeric value
|
|
function parseTotal(str) {
|
|
return parseFloat(str.replace(/[^0-9.-]+/g,""));
|
|
}
|
|
</SCRIPT>
|
|
|
|
<SCRIPT>
|
|
//Script that controls the adjusted cost when the slider is moved based on the text in the Base Cost
|
|
|
|
// Define the number of rows in the table
|
|
const numRows = 14;
|
|
|
|
// Create empty arrays to hold references to the base cost input, slider, adjusted cost input, and percent display elements
|
|
const baseCostInputs = [];
|
|
const sliders = [];
|
|
const adjustedCostInputs = [];
|
|
const percentDisplays = [];
|
|
|
|
// Create references to the elements by iterating from 1 to numRows
|
|
for (let i = 1; i <= numRows; i++) {
|
|
const baseCostInput = document.getElementById('r' + i);
|
|
const slider = document.getElementById('s' + i);
|
|
const adjustedCostInput = document.getElementById('t' + i);
|
|
const percentDisplay = document.getElementById('p' + i);
|
|
const totalBox1 = document.getElementById('totalBox1');
|
|
const percent2 = document.getElementById('d' + i);
|
|
|
|
baseCostInputs.push(baseCostInput);
|
|
sliders.push(slider);
|
|
adjustedCostInputs.push(adjustedCostInput);
|
|
percentDisplays.push(percentDisplay);
|
|
|
|
// Set the initial values of the inputs and percent display for the current row
|
|
switch(i){
|
|
case 1:
|
|
baseCostInput.value = 1200000.00.toFixed(2).toLocaleString("en-US");
|
|
adjustedCostInput.value = "1,200,000.00";
|
|
percent2.innerHTML = 0;
|
|
break;
|
|
case 2:
|
|
baseCostInput.value = 8100000.00.toFixed(2);
|
|
adjustedCostInput.value = "8,100,000.00";
|
|
percent2.innerHTML = 0;
|
|
break;
|
|
case 3:
|
|
baseCostInput.value = 2100000.00.toFixed(2);
|
|
adjustedCostInput.value = "2,100,000.00";
|
|
percent2.innerHTML = 0;
|
|
break;
|
|
case 4:
|
|
baseCostInput.value = 200000.00.toFixed(2);
|
|
adjustedCostInput.value = "200,000.00";
|
|
percent2.innerHTML = 0;
|
|
break;
|
|
case 5:
|
|
baseCostInput.value = 100000.00.toFixed(2);
|
|
adjustedCostInput.value = "100,000.00";
|
|
percent2.innerHTML = 0;
|
|
break;
|
|
case 6:
|
|
baseCostInput.value = 100000.00.toFixed(2);
|
|
adjustedCostInput.value = "100,000.00";
|
|
percent2.innerHTML = 0;
|
|
break;
|
|
case 7:
|
|
baseCostInput.value = 200000.00.toFixed(2);
|
|
adjustedCostInput.value = "200,000.00";
|
|
percent2.innerHTML = 0;
|
|
break;
|
|
case 8:
|
|
baseCostInput.value = 100000.00.toFixed(2);
|
|
adjustedCostInput.value = "100,000.00";
|
|
percent2.innerHTML = 0;
|
|
break;
|
|
case 9:
|
|
baseCostInput.value = 100000.00.toFixed(2);
|
|
adjustedCostInput.value = "100,000.00";
|
|
percent2.innerHTML = 0;
|
|
break;
|
|
case 10:
|
|
baseCostInput.value = 100000.00.toFixed(2);
|
|
adjustedCostInput.value = "100,000.00";
|
|
percent2.innerHTML = 0;
|
|
break;
|
|
case 11:
|
|
baseCostInput.value = 600000.00.toFixed(2);
|
|
adjustedCostInput.value = "600,000.00";
|
|
percent2.innerHTML = 0;
|
|
break;
|
|
case 12:
|
|
baseCostInput.value = 300000.00.toFixed(2);
|
|
adjustedCostInput.value = "300,000.00";
|
|
percent2.innerHTML = 0;
|
|
break;
|
|
case 13:
|
|
baseCostInput.value = 1000000.00.toFixed(2);
|
|
adjustedCostInput.value = "1,000,000.00";
|
|
percent2.innerHTML = 0;
|
|
break;
|
|
case 14:
|
|
baseCostInput.value = 800000.00.toFixed(2);
|
|
adjustedCostInput.value = "800,000.00";
|
|
percent2.innerHTML = 0;
|
|
break;
|
|
default:
|
|
baseCostInput.value = 0;
|
|
adjustedCostInput.value = 0;
|
|
}
|
|
percentDisplay.innerHTML = slider.value + '%';
|
|
|
|
// Add an event listener to the slider element for the current row
|
|
slider.addEventListener('input', () => {
|
|
// Calculate the adjusted cost based on the slider value and base cost input for the current row
|
|
const percent = slider.value / 100;
|
|
const baseCost = parseFloat(baseCostInput.value.replace('$',''));
|
|
const adjustedCost = baseCost * percent;
|
|
|
|
// Update the adjusted cost and percent display inputs for the current row
|
|
adjustedCostInput.value = adjustedCost.toLocaleString('en-US', {minimumFractionDigits: 2});
|
|
percentDisplay.innerHTML = slider.value + '%';
|
|
});
|
|
|
|
// Add an event listener to the base cost input element for the current row
|
|
baseCostInput.addEventListener('input', () => {
|
|
// Calculate the adjusted cost based on the slider value and base cost input for the current row
|
|
const percent = slider.value / 100;
|
|
const baseCost = parseFloat(baseCostInput.value);
|
|
const adjustedCost = baseCost * percent;
|
|
|
|
// Update the adjusted cost input with the new value for the current row
|
|
adjustedCostInput.value = adjustedCost.toFixed(2);
|
|
});
|
|
}
|
|
</SCRIPT>
|
|
|
|
<SCRIPT>
|
|
//Script to tally up all of the totals
|
|
// get all the cells in the column
|
|
// Get all input elements with IDs r1 through r14
|
|
const inputs = document.querySelectorAll("#r1, #r2, #r3, #r4, #r5, #r6, #r7, #r8, #r9, #r10, #r11, #r12, #r13, #r14");
|
|
|
|
// Initialize a variable to hold the total
|
|
let total = 0;
|
|
|
|
// Define a function to update the total
|
|
function updateTotal() {
|
|
// Reset the total to zero
|
|
total = 0;
|
|
// Loop through each input element and add its value to the total
|
|
inputs.forEach(input => {
|
|
// Remove the dollar sign from the value and convert it to a number
|
|
let value = Number(input.value.replace("$", ""));
|
|
// Add the value to the total
|
|
total += value;
|
|
});
|
|
total = total.toLocaleString('en-US', {minimumFractionDigits: 2})
|
|
// Output the updated total to the console
|
|
//console.log(total);
|
|
// Display the updated total in the input box with ID "totalBox1"
|
|
document.querySelector('#totalBox1').value = '$' + total;
|
|
}
|
|
|
|
// Call the updateTotal function initially to calculate the total based on the initial values of the input fields
|
|
updateTotal();
|
|
|
|
// Loop through each input element and add an event listener that calls the updateTotal function whenever its value changes
|
|
inputs.forEach(input => {
|
|
input.addEventListener("input", updateTotal);
|
|
});
|
|
</SCRIPT>
|
|
|
|
<SCRIPT>
|
|
//Script to tally up all of the totals
|
|
// get all the cells in the column
|
|
// Get all input elements with IDs r1 through r14
|
|
const inputs2 = document.querySelectorAll("#t1, #t2, #t3, #t4, #t5, #t6, #t7, #t8, #t9, #t10, #t11, #t12, #t13, #t14");
|
|
const sliders2 = document.querySelectorAll("#s1, #s2, #s3, #s4, #s5, #s6, #s7, #s8, #s9, #s10, #s11, #s12, #s13, #s14");
|
|
|
|
// Initialize a variable to hold the total
|
|
let total2 = 0;
|
|
|
|
// Define a function to update the total
|
|
function updateTotal() {
|
|
// Reset the total to zero
|
|
total2 = 0;
|
|
// Loop through each input element and add its value to the total
|
|
inputs2.forEach(input => {
|
|
// Remove the dollar sign from the value and convert it to a number
|
|
let value2 = Number(input.value.replace("$", "").replace(",", "").replace(",", ""));
|
|
// Add the value to the total
|
|
total2 += value2;
|
|
});
|
|
|
|
total2 = total2.toLocaleString('en-US', {minimumFractionDigits: 2})
|
|
// Output the updated total to the console
|
|
//console.log(total2)
|
|
|
|
// Display the updated total in the input box with ID "totalBox2"
|
|
document.querySelector('#totalBox2').value = '$' + total2;
|
|
}
|
|
|
|
// Call the updateTotal function initially to calculate the total based on the initial values of the input fields
|
|
updateTotal();
|
|
|
|
// Loop through each input element and add an event listener that calls the updateTotal function whenever its value changes
|
|
inputs2.forEach(input => {
|
|
input.addEventListener("input", updateTotal);
|
|
});
|
|
|
|
// Loop through each slider element and add an event listener that calls the updateTotal function whenever its value changes
|
|
sliders2.forEach(slider => {
|
|
slider.addEventListener("input", updateTotal);
|
|
});
|
|
|
|
inputs.forEach(input => {
|
|
input.addEventListener("input", updateTotal);
|
|
});
|
|
</SCRIPT>
|
|
</BODY>
|
|
</DOCTYPE> |