From a658f5defccaecca17dfabf31b9b063b20d385e8 Mon Sep 17 00:00:00 2001 From: dmcdowell Date: Tue, 27 Jun 2023 08:25:12 -0600 Subject: [PATCH] New iteration. V2!! --- htdocs/index.html | 220 +++++++++++++++++------- htdocs/styles.css | 11 +- v1/index.html | 419 ++++++++++++++++++++++++++++++++++++++++++++++ v1/styles.css | 104 ++++++++++++ 4 files changed, 694 insertions(+), 60 deletions(-) create mode 100644 v1/index.html create mode 100644 v1/styles.css diff --git a/htdocs/index.html b/htdocs/index.html index 37a9312..3cd4563 100644 --- a/htdocs/index.html +++ b/htdocs/index.html @@ -29,152 +29,240 @@
- +
+ + + + - + + + + + - + + + + - + + + + - + + + + - + + + + - + + + + - + + + + - + + + + - + + + + - + + + + - + + + + - + + + + - + + + + - + + + + + @@ -196,11 +284,13 @@ const numElements = 14; 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; slider.addEventListener('input', () => { input.innerHTML = slider.value; + percent2.innerHTML = slider.value < 100 ? '-' + (100 - slider.value) + "%": '+' + (slider.value - 100) + "%"; }); } @@ -224,6 +314,7 @@ for (let i = 1; i <= numRows; 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); @@ -233,63 +324,77 @@ for (let i = 1; i <= numRows; i++) { // 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); + baseCostInput.value = 511000.00.toFixed(2).toLocaleString("en-US"); + adjustedCostInput.value = "511,000.00"; + percent2.innerHTML = 0; break; case 2: - baseCostInput.value = "$" + 1197445.00.toFixed(2); - adjustedCostInput.value = "$" + 1197445.00.toFixed(2); + baseCostInput.value = 1197445.00.toFixed(2); + adjustedCostInput.value = "1,197,445.00"; + percent2.innerHTML = 0; break; case 3: - baseCostInput.value = "$" + 2883445.00.toFixed(2); - adjustedCostInput.value = "$" + 2883445.00.toFixed(2); + baseCostInput.value = 2883445.00.toFixed(2); + adjustedCostInput.value = "2,883,445.00"; + percent2.innerHTML = 0; break; case 4: - baseCostInput.value = "$" + 472500.00.toFixed(2); - adjustedCostInput.value = "$" + 472500.00.toFixed(2); + baseCostInput.value = 472500.00.toFixed(2); + adjustedCostInput.value = "472,500.00"; + percent2.innerHTML = 0; break; case 5: - baseCostInput.value = "$" + 723200.00.toFixed(2); - adjustedCostInput.value = "$" + 723200.00.toFixed(2); + baseCostInput.value = 723200.00.toFixed(2); + adjustedCostInput.value = "723,200.00"; + percent2.innerHTML = 0; break; case 6: - baseCostInput.value = "$" + 22500.00.toFixed(2); - adjustedCostInput.value = "$" + 22500.00.toFixed(2); + baseCostInput.value = 22500.00.toFixed(2); + adjustedCostInput.value = "22,500.00"; + percent2.innerHTML = 0; break; case 7: - baseCostInput.value = "$" + 242500.00.toFixed(2); - adjustedCostInput.value = "$" + 242500.00.toFixed(2); + baseCostInput.value = 242500.00.toFixed(2); + adjustedCostInput.value = "242,500.00"; + percent2.innerHTML = 0; break; case 8: - baseCostInput.value = "$" + 117000.00.toFixed(2); - adjustedCostInput.value = "$" + 117000.00.toFixed(2); + baseCostInput.value = 117000.00.toFixed(2); + adjustedCostInput.value = "117,000.00"; + percent2.innerHTML = 0; break; case 9: - baseCostInput.value = "$" + 262500.00.toFixed(2); - adjustedCostInput.value = "$" + 262500.00.toFixed(2); + baseCostInput.value = 262500.00.toFixed(2); + adjustedCostInput.value = "262,500.00"; + percent2.innerHTML = 0; break; case 10: - baseCostInput.value = "$" + 43800.00.toFixed(2); - adjustedCostInput.value = "$" + 43800.00.toFixed(2); + baseCostInput.value = 43800.00.toFixed(2); + adjustedCostInput.value = "43,800.00"; + percent2.innerHTML = 0; break; case 11: - baseCostInput.value = "$" + 3035054.30.toFixed(2); - adjustedCostInput.value = "$" + 3035054.30.toFixed(2); + baseCostInput.value = 3035054.30.toFixed(2); + adjustedCostInput.value = "303,5054.30"; + percent2.innerHTML = 0; break; case 12: - baseCostInput.value = "$" + 104450.00.toFixed(2); - adjustedCostInput.value = "$" + 104450; + baseCostInput.value = 104450.00.toFixed(2); + adjustedCostInput.value = "104,450.00"; + percent2.innerHTML = 0; break; case 13: - baseCostInput.value = "$" + 262750.00.toFixed(2); - adjustedCostInput.value = "$" + 262750; + baseCostInput.value = 262750.00.toFixed(2); + adjustedCostInput.value = "262,750.00"; + percent2.innerHTML = 0; break; case 14: - baseCostInput.value = "$" + 1518950.00.toFixed(2); - adjustedCostInput.value = "$" + 1518950.00; + baseCostInput.value = 1518950.00.toFixed(2); + adjustedCostInput.value = "1,518,950.00"; + percent2.innerHTML = 0; break; default: - baseCostInput.value = "$" + 0; + baseCostInput.value = 0; adjustedCostInput.value = 0; } percentDisplay.innerHTML = slider.value + '%'; @@ -302,7 +407,7 @@ for (let i = 1; i <= numRows; i++) { const adjustedCost = baseCost * percent; // Update the adjusted cost and percent display inputs for the current row - adjustedCostInput.value = "$" + adjustedCost.toFixed(2); + adjustedCostInput.value = adjustedCost.toLocaleString('en-US', {minimumFractionDigits: 2}); percentDisplay.innerHTML = slider.value + '%'; }); @@ -339,10 +444,11 @@ function updateTotal() { // 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.toFixed(2); + document.querySelector('#totalBox1').value = '$' + total; } // Call the updateTotal function initially to calculate the total based on the initial values of the input fields @@ -371,15 +477,17 @@ function updateTotal() { // 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("$", "")); + 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.toLocaleString('en-US')) + //console.log(total2) // Display the updated total in the input box with ID "totalBox2" - document.querySelector('#totalBox2').value = '$' + total2.toFixed(2); + document.querySelector('#totalBox2').value = '$' + total2; } // Call the updateTotal function initially to calculate the total based on the initial values of the input fields diff --git a/htdocs/styles.css b/htdocs/styles.css index 6f38b9e..75d37bf 100644 --- a/htdocs/styles.css +++ b/htdocs/styles.css @@ -10,6 +10,8 @@ header { } th { color: #2c6230; + text-align: left; + } tr { border-bottom: 1px solid black; @@ -17,9 +19,6 @@ tr { tr:last-child { border-bottom: none; } -td { - padding: 2px; -} footer{ width: 100%; display: flex; @@ -31,7 +30,7 @@ footer{ margin-top: 40px; } table{ - font-size: 30px; + font-size: 25px; border-collapse: collapse; } input[type="text"] { @@ -103,3 +102,7 @@ input[type="range"] { background-size: cover; margin-bottom: 20px; } +.dollar-sign { + text-align: right; + width: 10px; +} \ No newline at end of file diff --git a/v1/index.html b/v1/index.html new file mode 100644 index 0000000..1035647 --- /dev/null +++ b/v1/index.html @@ -0,0 +1,419 @@ + + + + + + + + + + MPE Cost Calculator + + +
+ +
+
+
+
+

Cost Calculator

+

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. +

+ 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. +

+ 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. +

+ 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.

+
+ +
+
+
+
Division Description Base Cost Adjustment Factor Adjusted Cost
0 & 1 Conditions of Contract and General Requirements$ $ - +
2 Civil$ $ + + +
3 Concrete$ $ + + +
4 Masonry$ $ + + +
5 Metals$ $ + + +
6 Woods and Plastics$ $ + + +
7 Thermal and Moisture Protection$ $ + + +
8 Doors and Windows$ $ + + +
9 Finishes$ $ + + +
10 Specialties$ $ + + +
11 Equipment$ $ + + +
13 Special Construction$ $ + + +
15 Mechanical $ $ + + +
16 Electrical$ $ + + +
Total: Total:
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DivisionDescriptionBase CostAdjustment FactorAdjusted Cost
0 & 1Conditions of Contract and General Requirements + + + + + +
2Civil + + +
3Concrete + + +
4Masonry + + +
5Metals + + +
6Woods and Plastics + + +
7Thermal and Moisture Protection + + +
8Doors and Windows + + +
9Finishes + + +
10Specialties + + +
11Equipment + + +
12Special Construction + + +
13Mechanical + + +
14Electrical + + +
Total:Total:
+
+ + + + + + + + + + \ No newline at end of file diff --git a/v1/styles.css b/v1/styles.css new file mode 100644 index 0000000..458d815 --- /dev/null +++ b/v1/styles.css @@ -0,0 +1,104 @@ +body, html{ + margin: 0; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; +} +header { + width: 100%; + height: 130px; + background-color: rgb(255, 255, 255); + +} +th { + color: #2c6230; + text-align: left; + +} +tr { + border-bottom: 1px solid black; +} +tr:last-child { + border-bottom: none; +} +footer{ + width: 100%; + display: flex; + flex-direction: row; + text-align: center; + justify-content: center; + height: 60px; + background-color: rgb(255, 255, 255); + margin-top: 40px; +} +table{ + font-size: 25px; + border-collapse: collapse; +} +input[type="text"] { + padding: 5px; + width: 70%; + font-size: 25px; + box-sizing: border-box; +} +input[type="range"] { + -webkit-appearance: none; + background-color: #79a3f1; + outline: none; + opacity: 0.7; + -webkit-transition: opacity 0.2s; + transition: opacity 0.2s; + border-radius: 20px; + width: 60%; +} + + input[type="range"]::-webkit-slider-thumb { + -webkit-appearance: none; + appearance: none; + width: 20px; + height: 20px; + background-color: #0359fa; + cursor: pointer; + border-radius: 50%; + border: 2px solid #0359fa; +} + + input[type="range"]::-moz-range-thumb { + width: 20px; + height: 20px; + background-color: white; + cursor: pointer; + border-radius: 100%; + border: 2px solid rgb(0, 0, 0); +} +.main-content { + display: flex; + justify-content: center; +} +.logo { + width: 470px; + height: auto; + margin-top: 1.5%; + margin-left: 18%; +} +.footer-logo{ + width: 100px; + height: 40px; + margin-right: 10px; + margin-top:10px; +} +.percent-color{ + font-weight:bold; color:rgb(1, 91, 165); +} +.textured-background{ + display: flex; + justify-content: center; + text-align: center; + width: 100%; + height: auto; + background-color: #dadada; + background-image: url(https://www.mpe.ca/wp-content/uploads/2019/04/gray-dotted-background.png); + background-repeat: no-repeat; + background-position: center center; + background-attachment: scroll; + background-size: cover; + margin-bottom: 20px; +}