updated total percentage
This commit is contained in:
parent
50d0765820
commit
86692abe02
@ -38,6 +38,7 @@
|
||||
<TH>Adjustment Factor</TH>
|
||||
<TH></TH>
|
||||
<TH>Adjusted Cost</TH>
|
||||
<TH>Percent</TH>
|
||||
</TR>
|
||||
<!--
|
||||
What do the variables stand for?
|
||||
@ -46,6 +47,7 @@
|
||||
t1 = Total 1
|
||||
p1 = Percent 1
|
||||
d1 = Difference 1
|
||||
ptotal = Percent Total
|
||||
-->
|
||||
<TR>
|
||||
<TD>0 & 1</TD>
|
||||
@ -57,10 +59,8 @@
|
||||
<SPAN id="p1" class="percent-color"></SPAN>
|
||||
</TD>
|
||||
<TD class="dollar-sign">$</TD>
|
||||
<TD>
|
||||
<INPUT type='text' name='t1' id='t1' readonly>
|
||||
<SPAN id="d1" class="percent-color"></SPAN>
|
||||
</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>
|
||||
@ -72,10 +72,8 @@
|
||||
<SPAN id="p2" class="percent-color"></SPAN>
|
||||
</TD>
|
||||
<TD class="dollar-sign">$</TD>
|
||||
<TD>
|
||||
<INPUT type='text' name='t2' id='t2' readonly>
|
||||
<SPAN id="d2" class="percent-color"></SPAN>
|
||||
</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>
|
||||
@ -87,10 +85,8 @@
|
||||
<SPAN id="p3" class="percent-color"></SPAN>
|
||||
</TD>
|
||||
<TD class="dollar-sign">$</TD>
|
||||
<TD>
|
||||
<INPUT type='text' name='t3' id='t3' readonly>
|
||||
<SPAN id="d3" class="percent-color"></SPAN>
|
||||
</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>
|
||||
@ -102,10 +98,8 @@
|
||||
<SPAN id="p4" class="percent-color"></SPAN>
|
||||
</TD>
|
||||
<TD class="dollar-sign">$</TD>
|
||||
<TD>
|
||||
<INPUT type='text' name='t4' id='t4' readonly>
|
||||
<SPAN id="d4" class="percent-color"></SPAN>
|
||||
</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>
|
||||
@ -117,10 +111,8 @@
|
||||
<SPAN id="p5" class="percent-color"></SPAN>
|
||||
</TD>
|
||||
<TD class="dollar-sign">$</TD>
|
||||
<TD>
|
||||
<INPUT type='text' name='t5' id='t5' readonly>
|
||||
<SPAN id="d5" class="percent-color"></SPAN>
|
||||
</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>
|
||||
@ -132,10 +124,8 @@
|
||||
<SPAN id="p6" class="percent-color"></SPAN>
|
||||
</TD>
|
||||
<TD class="dollar-sign">$</TD>
|
||||
<TD>
|
||||
<INPUT type='text' name='t6' id='t6' readonly>
|
||||
<SPAN id="d6" class="percent-color"></SPAN>
|
||||
</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>
|
||||
@ -147,10 +137,8 @@
|
||||
<SPAN id="p7" class="percent-color"></SPAN>
|
||||
</TD>
|
||||
<TD class="dollar-sign">$</TD>
|
||||
<TD>
|
||||
<INPUT type='text' name='t7' id='t7' readonly>
|
||||
<SPAN id="d7" class="percent-color"></SPAN>
|
||||
</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>
|
||||
@ -162,10 +150,8 @@
|
||||
<SPAN id="p8" class="percent-color"></SPAN>
|
||||
</TD>
|
||||
<TD class="dollar-sign">$</TD>
|
||||
<TD>
|
||||
<INPUT type='text' name='t8' id='t8' readonly>
|
||||
<SPAN id="d8" class="percent-color"></SPAN>
|
||||
</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>
|
||||
@ -177,10 +163,8 @@
|
||||
<SPAN id="p9" class="percent-color"></SPAN>
|
||||
</TD>
|
||||
<TD class="dollar-sign">$</TD>
|
||||
<TD>
|
||||
<INPUT type='text' name='t9' id='t9' readonly>
|
||||
<SPAN id="d9" class="percent-color"></SPAN>
|
||||
</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>
|
||||
@ -192,10 +176,8 @@
|
||||
<SPAN id="p10" class="percent-color"></SPAN>
|
||||
</TD>
|
||||
<TD class="dollar-sign">$</TD>
|
||||
<TD>
|
||||
<INPUT type='text' name='t10' id='t10' readonly>
|
||||
<SPAN id="d10" class="percent-color"></SPAN>
|
||||
</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>
|
||||
@ -207,10 +189,8 @@
|
||||
<SPAN id="p11" class="percent-color"></SPAN>
|
||||
</TD>
|
||||
<TD class="dollar-sign">$</TD>
|
||||
<TD>
|
||||
<INPUT type='text' name='t11' id='t11' readonly>
|
||||
<SPAN id="d11" class="percent-color"></SPAN>
|
||||
</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>
|
||||
@ -222,10 +202,8 @@
|
||||
<SPAN id="p12" class="percent-color"></SPAN>
|
||||
</TD>
|
||||
<TD class="dollar-sign">$</TD>
|
||||
<TD>
|
||||
<INPUT type='text' name='t12' id='t12' readonly>
|
||||
<SPAN id="d12" class="percent-color"></SPAN>
|
||||
</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>
|
||||
@ -237,10 +215,8 @@
|
||||
<SPAN id="p13" class="percent-color"></SPAN>
|
||||
</TD>
|
||||
<TD class="dollar-sign">$</TD>
|
||||
<TD>
|
||||
<INPUT type='text' name='t13' id='t13' readonly>
|
||||
<SPAN id="d13" class="percent-color"></SPAN>
|
||||
</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>
|
||||
@ -252,10 +228,8 @@
|
||||
<SPAN id="p14" class="percent-color"></SPAN>
|
||||
</TD>
|
||||
<TD class="dollar-sign">$</TD>
|
||||
<TD>
|
||||
<INPUT type='text' name='t14' id='t14' readonly>
|
||||
<SPAN id="d14" class="percent-color"></SPAN>
|
||||
</TD>
|
||||
<TD><INPUT type='text' name='t14' id='t14' readonly></TD>
|
||||
<TD><SPAN id="d14" class="percent-color"></SPAN></TD>
|
||||
</TR>
|
||||
<TR>
|
||||
<TD></TD>
|
||||
@ -265,28 +239,57 @@
|
||||
<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>
|
||||
//Script to change the percent number of the span element
|
||||
|
||||
<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;
|
||||
|
||||
// Iterate over the elements and create references to the corresponding HTML elements
|
||||
// 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;
|
||||
@ -295,6 +298,49 @@ for (let i = 1; i <= numElements; i++) {
|
||||
}
|
||||
</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
|
||||
|
||||
@ -324,73 +370,73 @@ 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 = "511,000.00";
|
||||
baseCostInput.value = 1200000.00.toFixed(2).toLocaleString("en-US");
|
||||
adjustedCostInput.value = "1,200,000.00";
|
||||
percent2.innerHTML = 0;
|
||||
break;
|
||||
case 2:
|
||||
baseCostInput.value = 1197445.00.toFixed(2);
|
||||
adjustedCostInput.value = "1,197,445.00";
|
||||
baseCostInput.value = 8100000.00.toFixed(2);
|
||||
adjustedCostInput.value = "8,100,000.00";
|
||||
percent2.innerHTML = 0;
|
||||
break;
|
||||
case 3:
|
||||
baseCostInput.value = 2883445.00.toFixed(2);
|
||||
adjustedCostInput.value = "2,883,445.00";
|
||||
baseCostInput.value = 2100000.00.toFixed(2);
|
||||
adjustedCostInput.value = "2,100,000.00";
|
||||
percent2.innerHTML = 0;
|
||||
break;
|
||||
case 4:
|
||||
baseCostInput.value = 472500.00.toFixed(2);
|
||||
adjustedCostInput.value = "472,500.00";
|
||||
baseCostInput.value = 200000.00.toFixed(2);
|
||||
adjustedCostInput.value = "200,000.00";
|
||||
percent2.innerHTML = 0;
|
||||
break;
|
||||
case 5:
|
||||
baseCostInput.value = 723200.00.toFixed(2);
|
||||
adjustedCostInput.value = "723,200.00";
|
||||
baseCostInput.value = 100000.00.toFixed(2);
|
||||
adjustedCostInput.value = "100,000.00";
|
||||
percent2.innerHTML = 0;
|
||||
break;
|
||||
case 6:
|
||||
baseCostInput.value = 22500.00.toFixed(2);
|
||||
adjustedCostInput.value = "22,500.00";
|
||||
baseCostInput.value = 100000.00.toFixed(2);
|
||||
adjustedCostInput.value = "100,000.00";
|
||||
percent2.innerHTML = 0;
|
||||
break;
|
||||
case 7:
|
||||
baseCostInput.value = 242500.00.toFixed(2);
|
||||
adjustedCostInput.value = "242,500.00";
|
||||
baseCostInput.value = 200000.00.toFixed(2);
|
||||
adjustedCostInput.value = "200,000.00";
|
||||
percent2.innerHTML = 0;
|
||||
break;
|
||||
case 8:
|
||||
baseCostInput.value = 117000.00.toFixed(2);
|
||||
adjustedCostInput.value = "117,000.00";
|
||||
baseCostInput.value = 100000.00.toFixed(2);
|
||||
adjustedCostInput.value = "100,000.00";
|
||||
percent2.innerHTML = 0;
|
||||
break;
|
||||
case 9:
|
||||
baseCostInput.value = 262500.00.toFixed(2);
|
||||
adjustedCostInput.value = "262,500.00";
|
||||
baseCostInput.value = 100000.00.toFixed(2);
|
||||
adjustedCostInput.value = "100,000.00";
|
||||
percent2.innerHTML = 0;
|
||||
break;
|
||||
case 10:
|
||||
baseCostInput.value = 43800.00.toFixed(2);
|
||||
adjustedCostInput.value = "43,800.00";
|
||||
baseCostInput.value = 100000.00.toFixed(2);
|
||||
adjustedCostInput.value = "100,000.00";
|
||||
percent2.innerHTML = 0;
|
||||
break;
|
||||
case 11:
|
||||
baseCostInput.value = 3035054.30.toFixed(2);
|
||||
adjustedCostInput.value = "303,5054.30";
|
||||
baseCostInput.value = 600000.00.toFixed(2);
|
||||
adjustedCostInput.value = "600,000.00";
|
||||
percent2.innerHTML = 0;
|
||||
break;
|
||||
case 12:
|
||||
baseCostInput.value = 104450.00.toFixed(2);
|
||||
adjustedCostInput.value = "104,450.00";
|
||||
baseCostInput.value = 300000.00.toFixed(2);
|
||||
adjustedCostInput.value = "300,000.00";
|
||||
percent2.innerHTML = 0;
|
||||
break;
|
||||
case 13:
|
||||
baseCostInput.value = 262750.00.toFixed(2);
|
||||
adjustedCostInput.value = "262,750.00";
|
||||
baseCostInput.value = 1000000.00.toFixed(2);
|
||||
adjustedCostInput.value = "1,000,000.00";
|
||||
percent2.innerHTML = 0;
|
||||
break;
|
||||
case 14:
|
||||
baseCostInput.value = 1518950.00.toFixed(2);
|
||||
adjustedCostInput.value = "1,518,950.00";
|
||||
baseCostInput.value = 800000.00.toFixed(2);
|
||||
adjustedCostInput.value = "800,000.00";
|
||||
percent2.innerHTML = 0;
|
||||
break;
|
||||
default:
|
||||
|
||||
@ -35,7 +35,7 @@ table{
|
||||
}
|
||||
input[type="text"] {
|
||||
padding: 5px;
|
||||
width: 70%;
|
||||
width: 90%;
|
||||
font-size: 25px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user