updated total percentage

htdocs/index.html

@@ -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>
+                <TD><INPUT type='text' name='t1' id='t1' readonly></TD>
-                    <INPUT type='text' name='t1' id='t1' readonly>
+                <TD><SPAN id="d1" class="percent-color"></SPAN></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>
+                <TD><INPUT type='text' name='t2' id='t2' readonly></TD>
-                    <INPUT type='text' name='t2' id='t2' readonly>
+                <TD><SPAN id="d2" class="percent-color"></SPAN></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>
+                <TD><INPUT type='text' name='t3' id='t3' readonly></TD>
-                    <INPUT type='text' name='t3' id='t3' readonly>
+                <TD><SPAN id="d3" class="percent-color"></SPAN></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>
+                <TD><INPUT type='text' name='t4' id='t4' readonly></TD>
-                    <INPUT type='text' name='t4' id='t4' readonly>
+                <TD><SPAN id="d4" class="percent-color"></SPAN></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>
+                <TD><INPUT type='text' name='t5' id='t5' readonly></TD>
-                    <INPUT type='text' name='t5' id='t5' readonly>
+                <TD><SPAN id="d5" class="percent-color"></SPAN></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>
+                <TD><INPUT type='text' name='t6' id='t6' readonly></TD>
-                    <INPUT type='text' name='t6' id='t6' readonly>
+                <TD><SPAN id="d6" class="percent-color"></SPAN></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>
+                <TD><INPUT type='text' name='t7' id='t7' readonly></TD>
-                    <INPUT type='text' name='t7' id='t7' readonly>
+                <TD><SPAN id="d7" class="percent-color"></SPAN></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>
+                <TD><INPUT type='text' name='t8' id='t8' readonly></TD>
-                    <INPUT type='text' name='t8' id='t8' readonly>
+                <TD><SPAN id="d8" class="percent-color"></SPAN></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>
+                <TD><INPUT type='text' name='t9' id='t9' readonly></TD>
-                    <INPUT type='text' name='t9' id='t9' readonly>
+                    <TD><SPAN id="d9" class="percent-color"></SPAN></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>
+                <TD><INPUT type='text' name='t10' id='t10' readonly></TD>
-                    <INPUT type='text' name='t10' id='t10' readonly>
+                <TD><SPAN id="d10" class="percent-color"></SPAN></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>
+                <TD><INPUT type='text' name='t11' id='t11' readonly></TD>
-                    <INPUT type='text' name='t11' id='t11' readonly>
+                <TD><SPAN id="d11" class="percent-color"></SPAN></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>
+                <TD><INPUT type='text' name='t12' id='t12' readonly></TD>
-                    <INPUT type='text' name='t12' id='t12' readonly>
+                <TD><SPAN id="d12" class="percent-color"></SPAN></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>
+                <TD><INPUT type='text' name='t13' id='t13' readonly></TD>
-                    <INPUT type='text' name='t13' id='t13' readonly>
+                <TD><SPAN id="d13" class="percent-color"></SPAN></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>
+                <TD><INPUT type='text' name='t14' id='t14' readonly></TD>
-                    <INPUT type='text' name='t14' id='t14' readonly>
+                <TD><SPAN id="d14" class="percent-color"></SPAN></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");
+        baseCostInput.value = 1200000.00.toFixed(2).toLocaleString("en-US");
-        adjustedCostInput.value = "511,000.00";
+        adjustedCostInput.value = "1,200,000.00";
         percent2.innerHTML = 0;
         break;
     case 2:
-        baseCostInput.value = 1197445.00.toFixed(2);
+        baseCostInput.value = 8100000.00.toFixed(2);
-        adjustedCostInput.value = "1,197,445.00";
+        adjustedCostInput.value = "8,100,000.00";
         percent2.innerHTML = 0;
         break;
     case 3:
-        baseCostInput.value = 2883445.00.toFixed(2);
+        baseCostInput.value = 2100000.00.toFixed(2);
-        adjustedCostInput.value = "2,883,445.00";
+        adjustedCostInput.value = "2,100,000.00";
         percent2.innerHTML = 0;
         break;
     case 4:
-        baseCostInput.value = 472500.00.toFixed(2);
+        baseCostInput.value = 200000.00.toFixed(2);
-        adjustedCostInput.value = "472,500.00";
+        adjustedCostInput.value = "200,000.00";
         percent2.innerHTML = 0;
         break;
     case 5:
-        baseCostInput.value = 723200.00.toFixed(2);
+        baseCostInput.value = 100000.00.toFixed(2);
-        adjustedCostInput.value = "723,200.00";
+        adjustedCostInput.value = "100,000.00";
         percent2.innerHTML = 0;
         break;
     case 6:
-        baseCostInput.value = 22500.00.toFixed(2);
+        baseCostInput.value = 100000.00.toFixed(2);
-        adjustedCostInput.value = "22,500.00";
+        adjustedCostInput.value = "100,000.00";
         percent2.innerHTML = 0;
         break;
     case 7:
-        baseCostInput.value = 242500.00.toFixed(2);
+        baseCostInput.value = 200000.00.toFixed(2);
-        adjustedCostInput.value = "242,500.00";
+        adjustedCostInput.value = "200,000.00";
         percent2.innerHTML = 0;
         break;
     case 8:
-        baseCostInput.value = 117000.00.toFixed(2);
+        baseCostInput.value = 100000.00.toFixed(2);
-        adjustedCostInput.value = "117,000.00";
+        adjustedCostInput.value = "100,000.00";
         percent2.innerHTML = 0;
         break;
     case 9:
-        baseCostInput.value = 262500.00.toFixed(2);
+        baseCostInput.value = 100000.00.toFixed(2);
-        adjustedCostInput.value = "262,500.00";
+        adjustedCostInput.value = "100,000.00";
         percent2.innerHTML = 0;
         break;
     case 10:
-        baseCostInput.value = 43800.00.toFixed(2);
+        baseCostInput.value = 100000.00.toFixed(2);
-        adjustedCostInput.value = "43,800.00";
+        adjustedCostInput.value = "100,000.00";
         percent2.innerHTML = 0;
         break;
     case 11:
-        baseCostInput.value = 3035054.30.toFixed(2);
+        baseCostInput.value = 600000.00.toFixed(2);
-        adjustedCostInput.value = "303,5054.30";
+        adjustedCostInput.value = "600,000.00";
         percent2.innerHTML = 0;
         break;
     case 12:
-        baseCostInput.value = 104450.00.toFixed(2);
+        baseCostInput.value = 300000.00.toFixed(2);
-        adjustedCostInput.value = "104,450.00";
+        adjustedCostInput.value = "300,000.00";
         percent2.innerHTML = 0;
         break;
     case 13:
-        baseCostInput.value = 262750.00.toFixed(2);
+        baseCostInput.value = 1000000.00.toFixed(2);
-        adjustedCostInput.value = "262,750.00";
+        adjustedCostInput.value = "1,000,000.00";
         percent2.innerHTML = 0;
         break;
     case 14:
-        baseCostInput.value = 1518950.00.toFixed(2);
+        baseCostInput.value = 800000.00.toFixed(2);
-        adjustedCostInput.value = "1,518,950.00";
+        adjustedCostInput.value = "800,000.00";
         percent2.innerHTML = 0;
         break;    
     default:

htdocs/styles.css

@@ -35,7 +35,7 @@ table{
 }
 input[type="text"] {
     padding: 5px;
-    width: 70%;
+    width: 90%;
     font-size: 25px;
     box-sizing: border-box;
 }