2023-06-26 13:36:17 -06:00
< 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" >
2023-06-26 14:01:42 -06:00
< link rel = "stylesheet" href = "styles.css" >
2023-06-26 13:36:17 -06:00
< 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 >
2023-06-26 14:22:43 -06:00
< img src = "assets/mpe-logo.png" class = "logo" >
2023-06-26 13:36:17 -06:00
< / 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 >
2023-06-26 15:04:19 -06:00
< TD > < INPUT style = "color: rgb(1, 91, 165); font-weight: 700;" type = 'text' name = "totalBox1" id = "totalBox1" readonly > < / TD >
2023-06-26 13:36:17 -06:00
< TD style = 'float: right' > Total:< / TD >
2023-06-26 15:04:19 -06:00
< TD > < INPUT style = "color: rgb(1, 91, 165); font-weight: 700;" type = 'text' name = "totalBox2" id = "totalBox2" readonly > < / TD >
2023-06-26 13:36:17 -06:00
< / TR >
< / TABLE >
< / DIV >
< FOOTER >
< div style = "display: flex; flex-direction: row;" >
2023-06-26 14:22:43 -06:00
< img src = "assets/mpe-logo-standard.png" class = "footer-logo" >
2023-06-26 13:36:17 -06:00
< 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
2023-06-26 14:31:58 -06:00
// 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");
2023-06-26 13:36:17 -06:00
2023-06-26 14:31:58 -06:00
// Initialize a variable to hold the total
let total = 0;
2023-06-26 13:36:17 -06:00
2023-06-26 14:55:01 -06:00
// 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
2023-06-26 14:31:58 -06:00
inputs.forEach(input => {
2023-06-26 14:55:01 -06:00
input.addEventListener("input", updateTotal);
2023-06-26 13:36:17 -06:00
});
2023-06-26 14:55:01 -06:00
< / 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;
2023-06-26 13:36:17 -06:00
2023-06-26 14:55:01 -06:00
// 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);
}
2023-06-26 14:31:58 -06:00
2023-06-26 14:55:01 -06:00
// 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);
});
2023-06-26 13:36:17 -06:00
< / SCRIPT >
< / BODY >
< / DOCTYPE >
