395 lines
16 KiB
HTML
395 lines
16 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">
|
|
<TR>
|
|
<TH>Description</TH>
|
|
<TH>Base Cost</TH>
|
|
<TH>Adjustment Factor</TH>
|
|
<TH>Adjusted Cost</TH>
|
|
</TR>
|
|
<TR>
|
|
<!--
|
|
What do the variables stand for?
|
|
r1 = Row 1
|
|
s1 = Slider 1
|
|
t1 = Total 1
|
|
p1 = Percent 1
|
|
-->
|
|
<TD>Conditions of Contract and General Requirements</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><INPUT type='text' name='t1' id='t1' readonly></TD>
|
|
</TR>
|
|
<TR>
|
|
<TD>Civil</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><INPUT type='text' name='t2' id='t2' readonly></TD>
|
|
</TR>
|
|
<TR>
|
|
<TD>Concrete</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><INPUT type='text' name='t3' id='t3' readonly></TD>
|
|
</TR>
|
|
<TR>
|
|
<TD>Masonry</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><INPUT type='text' name='t4' id='t4' readonly></TD>
|
|
</TR>
|
|
<TR>
|
|
<TD>Metals</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><INPUT type='text' name='t5' id='t5' readonly></TD>
|
|
</TR>
|
|
<TR>
|
|
<TD>Woods and Plastics</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><INPUT type='text' name='t6' id='t6' readonly></TD>
|
|
</TR>
|
|
<TR>
|
|
<TD>Thermal and Moisture Protection</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><INPUT type='text' name='t7' id='t7' readonly></TD>
|
|
</TR>
|
|
<TR>
|
|
<TD>Doors and Windows</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><INPUT type='text' name='t8' id='t8' readonly></TD>
|
|
</TR>
|
|
<TR>
|
|
<TD>Finishes</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><INPUT type='text' name='t9' id='t9' readonly></TD>
|
|
</TR>
|
|
<TR>
|
|
<TD>Specialties</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><INPUT type='text' name='t10' id='t10' readonly></TD>
|
|
</TR>
|
|
<TR>
|
|
<TD>Equipment</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><INPUT type='text' name='t11' id='t11' readonly></TD>
|
|
</TR>
|
|
<TR>
|
|
<TD>Special Construction</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><INPUT type='text' name='t12' id='t12' readonly></TD>
|
|
</TR>
|
|
<TR>
|
|
<TD>Mechanical </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><INPUT type='text' name='t13' id='t13' readonly></TD>
|
|
</TR>
|
|
<TR>
|
|
<TD>Electrical</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><INPUT type='text' name='t14' id='t14' readonly></TD>
|
|
</TR>
|
|
<TR>
|
|
<TD style='float: right'>Total:</TD>
|
|
<TD><INPUT type='text' name="totalBox1" id="totalBox1" readonly></TD>
|
|
<TD style='float: right'>Total:</TD>
|
|
<TD><INPUT type='text' name="totalBox2" id="totalBox2" readonly></TD>
|
|
</TR>
|
|
</TABLE>
|
|
</DIV>
|
|
<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>
|
|
//Script to change the percent number of the span element
|
|
|
|
// Define the number of sliders and text elements you have
|
|
const numElements = 14;
|
|
|
|
// Iterate over the elements and create references to the corresponding HTML elements
|
|
for (let i = 1; i <= numElements; i++) {
|
|
const slider = document.getElementById('s' + i);
|
|
const input = document.getElementById('p' + i);
|
|
|
|
input.innerHTML = slider.value;
|
|
|
|
slider.addEventListener('input', () => {
|
|
input.innerHTML = slider.value;
|
|
});
|
|
}
|
|
</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');
|
|
|
|
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 = "$" + 511000.00.toFixed(2).toLocaleString("en-US");
|
|
adjustedCostInput.value = "$" + 511000.00.toFixed(2);
|
|
break;
|
|
case 2:
|
|
baseCostInput.value = "$" + 1197445.00.toFixed(2);
|
|
adjustedCostInput.value = "$" + 1197445.00.toFixed(2);
|
|
break;
|
|
case 3:
|
|
baseCostInput.value = "$" + 2883445.00.toFixed(2);
|
|
adjustedCostInput.value = "$" + 2883445.00.toFixed(2);
|
|
break;
|
|
case 4:
|
|
baseCostInput.value = "$" + 472500.00.toFixed(2);
|
|
adjustedCostInput.value = "$" + 472500.00.toFixed(2);
|
|
break;
|
|
case 5:
|
|
baseCostInput.value = "$" + 723200.00.toFixed(2);
|
|
adjustedCostInput.value = "$" + 723200.00.toFixed(2);
|
|
break;
|
|
case 6:
|
|
baseCostInput.value = "$" + 22500.00.toFixed(2);
|
|
adjustedCostInput.value = "$" + 22500.00.toFixed(2);
|
|
break;
|
|
case 7:
|
|
baseCostInput.value = "$" + 242500.00.toFixed(2);
|
|
adjustedCostInput.value = "$" + 242500.00.toFixed(2);
|
|
break;
|
|
case 8:
|
|
baseCostInput.value = "$" + 117000.00.toFixed(2);
|
|
adjustedCostInput.value = "$" + 117000.00.toFixed(2);
|
|
break;
|
|
case 9:
|
|
baseCostInput.value = "$" + 262500.00.toFixed(2);
|
|
adjustedCostInput.value = "$" + 262500.00.toFixed(2);
|
|
break;
|
|
case 10:
|
|
baseCostInput.value = "$" + 43800.00.toFixed(2);
|
|
adjustedCostInput.value = "$" + 43800.00.toFixed(2);
|
|
break;
|
|
case 11:
|
|
baseCostInput.value = "$" + 3035054.30.toFixed(2);
|
|
adjustedCostInput.value = "$" + 3035054.30.toFixed(2);
|
|
break;
|
|
case 12:
|
|
baseCostInput.value = "$" + 104450.00.toFixed(2);
|
|
adjustedCostInput.value = "$" + 104450;
|
|
break;
|
|
case 13:
|
|
baseCostInput.value = "$" + 262750.00.toFixed(2);
|
|
adjustedCostInput.value = "$" + 262750;
|
|
break;
|
|
case 14:
|
|
baseCostInput.value = "$" + 1518950.00.toFixed(2);
|
|
adjustedCostInput.value = "$" + 1518950.00;
|
|
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.toFixed(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;
|
|
});
|
|
// 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.toFixed(2);
|
|
}
|
|
|
|
// 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("$", ""));
|
|
// Add the value to the total
|
|
total2 += value2;
|
|
});
|
|
// 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.toFixed(2);
|
|
}
|
|
|
|
// 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);
|
|
});
|
|
</SCRIPT>
|
|
</BODY>
|
|
</DOCTYPE> |