CostCalculator/htdocs/index.html

557 lines
23 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; max-width: 700px;" 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>