Added button to switch main dimensions

Author: TerribleCoding

pages/elliptic-bar.html

@@ -69,6 +69,8 @@ <h3 class="back">Back to index</h3>
                     <td class="unit">N/mm<sup>2</sup></td>
                 </tr>
             </table>
+            
+            <button class="switch" onclick="switchDim()">Switch dimensions</button>
         </div>
 
         <div class="results">

pages/elliptic-bar.js

@@ -24,4 +24,12 @@ function Resistance() {
     return PI * A * pow(B, 2) / 32;
 }
 
-function ResistanceB() { }
+function ResistanceB() { }
+
+function switchDim() {
+    let A = floatElseZero(dim.A.elt.value);
+    let B = floatElseZero(dim.B.elt.value);
+    dim.A.elt.value = B;
+    dim.B.elt.value = A;
+    updateResults();
+}

pages/hollow-elliptic-bar.html

@@ -75,6 +75,8 @@ <h3 class="back">Back to index</h3>
                     <td class="unit">N/mm<sup>2</sup></td>
                 </tr>
             </table>
+            
+            <button class="switch" onclick="switchDim()">Switch dimensions</button>
         </div>
 
         <div class="results">

pages/hollow-elliptic-bar.js

@@ -29,4 +29,12 @@ function Resistance() {
     return 2 * I / B;
 }
 
-function ResistanceB() { }
+function ResistanceB() { }
+
+function switchDim() {
+    let A = floatElseZero(dim.A.elt.value);
+    let B = floatElseZero(dim.B.elt.value);
+    dim.A.elt.value = B;
+    dim.B.elt.value = A;
+    updateResults();
+}

pages/hollow-rectangle-bar.html

@@ -81,6 +81,8 @@ <h3 class="back">Back to index</h3>
                     <td class="unit">N/mm<sup>2</sup></td>
                 </tr>
             </table>
+
+            <button class="switch" onclick="switchDim()">Switch dimensions</button>
         </div>
 
         <div class="results">

pages/hollow-rectangle-bar.js

@@ -44,4 +44,12 @@ function Resistance() {
     return (outer - inner) / (6 * h);
 }
 
-function ResistanceB() { }
+function ResistanceB() { }
+
+function switchDim() {
+    let b = floatElseZero(dim.B.elt.value);
+    let h = floatElseZero(dim.H.elt.value);
+    dim.B.elt.value = h;
+    dim.H.elt.value = b;
+    updateResults();
+}

pages/rectangle-bar.html

@@ -75,6 +75,8 @@ <h3 class="back">Back to index</h3>
                     <td class="unit">N/mm<sup>2</sup></td>
                 </tr>
             </table>
+
+            <button class="switch" onclick="switchDim()">Switch dimensions</button>
         </div>
 
         <div class="results">

pages/rectangle-bar.js

@@ -30,4 +30,12 @@ function Resistance() {
     return I / h * 2;
 }
 
-function ResistanceB() { }
+function ResistanceB() { }
+
+function switchDim() {
+    let b = floatElseZero(dim.B.elt.value);
+    let h = floatElseZero(dim.H.elt.value);
+    dim.B.elt.value = h;
+    dim.H.elt.value = b;
+    updateResults();
+}

style.css

@@ -139,6 +139,24 @@ img.back {
     height: 240px;
 }
 
+.switch {
+    background-color: var(--color-4);
+    color: var(--color-1);
+    border: solid 2px var(--color-1);
+    padding: 4px;
+    margin-top: 8px;
+    margin-left: 36px;
+    margin-right: 400px;
+    border-radius: 2px;
+    cursor: pointer;
+    transition: 0.3s;
+}
+
+.switch:hover {
+    background-color: var(--color-1);
+    color: var(--color-4);
+}
+
 .drawing {
     width: 80%;
     min-width: 300px;