Added tables for common values

suspha · Sep 23, 2016 · 761e6ad · 761e6ad
1 parent 7e474c4
commit 761e6ad
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 5 deletions.
diff --git a/css/app.css b/css/app.css
@@ -75,6 +75,10 @@ code.light {
   color: #999;
 }
 
+.hidden {
+  display: none;
+}
+
 div.right {
   float: right;
 }
@@ -105,10 +109,26 @@ div.explain p {
   white-space: nowrap;
 }
 
-div.explain h2 {
+div.explain h2, div.table h2 {
   font-size: 100%;
 }
 
+div.table {
+  margin-top: 2em;
+}
+
+div.table table {
+  width: 100%;
+}
+
+table td {
+  text-align: left;
+}
+
+table th {
+  text-align: left;
+}
+
 div.image {
   padding-top: 1em;
 }
diff --git a/index.html b/index.html
@@ -29,7 +29,7 @@ <h1>Earth Curvature Calculator</h1>
           </label>
 
           <span class="unit">
-            <select id="unit" name="unit">
+            <select id="unit" name="unit" onchange="toggleNumbers()">
               <option value="km">
                 Kilometers
               </option>
@@ -47,6 +47,37 @@ <h1>Earth Curvature Calculator</h1>
         <div class="result"></div>
       </div>
 
+      <div class="table">
+
+        <table id="meters">
+          <tr><th>Distance</th><th>Curvature</th></tr>
+          <tr><td>1 km</td><td>0.00008 km = 0.08 meters</td></tr>
+          <tr><td>2 km</td><td>0.00031 km = 0.31 meters</td></tr>
+          <tr><td>5 km</td><td>0.00196 km = 1.96 meters</td></tr>
+          <tr><td>10 km</td><td>0.00785 km = 7.85 meters</td></tr>
+          <tr><td>20 km</td><td>0.03139 km = 31.39 meters</td></tr>
+          <tr><td>50 km</td><td>0.19620 km = 196.20 meters</td></tr>
+          <tr><td>100 km</td><td>0.78479 km = 784.79 meters</td></tr>
+          <tr><td>200 km</td><td>3.13897 km = 3138.97 meters</td></tr>
+          <tr><td>500 km</td><td>19.6101 km = 19610.09 meters</td></tr>
+          <tr><td>1000 km</td><td>78.3196 km = 78319.62 meters</td></tr>
+        </table>
+
+        <table id="miles" class="hidden">
+          <tr><th>Distance</th><th>Curvature</th></tr>
+          <tr><td>1 mile</td><td>0.00013 miles = 0.67 feet</td></tr>
+          <tr><td>2 miles</td><td>0.00051 miles = 2.67 feet</td></tr>
+          <tr><td>5 miles</td><td>0.00316 miles = 16.67 feet</td></tr>
+          <tr><td>10 miles</td><td>0.01263 miles = 66.69 feet</td></tr>
+          <tr><td>20 miles</td><td>0.05052 miles = 266.75 feet</td></tr>
+          <tr><td>50 miles</td><td>0.31575 miles = 1667.17 feet</td></tr>
+          <tr><td>100 miles</td><td>1.26296 miles = 6668.41 feet</td></tr>
+          <tr><td>200 miles</td><td>5.05102 miles = 26669.37 feet</td></tr>
+          <tr><td>500 miles</td><td>31.5336 miles = 166497.53 feet</td></tr>
+          <tr><td>1000 miles</td><td>125.632 miles = 663337.65 feet</td></tr>
+        </table>
+      </div>
+
       <div class="explain">
         <h2>Explanation:</h2>
         <div class="formula">
@@ -58,8 +89,8 @@ <h2>Explanation:</h2>
             We wish to find the height <code class="light">(h)</code> which is the drop in curvature over the distance <code class="light">(d)</code>
           </p>
           <p>
-            Using the circumference we find that 1 kilometer has the angle<br><code>360&deg; / 40030 km = 0.009&deg;</code>. The angle <code class="light">(a)</code> is then <code>a = 0.009 * distance (d)</code>
-          <p>
+            Using the circumference we find that 1 kilometer has the angle<br><code>360&deg; / 40030 km = 0.009&deg;</code>. The angle <code class="light">(a)</code> is then <code>a = 0.009&deg; * distance (d)</code>
+          </p>
           <p>
             The derived formula <code>h = r * (1 - cos a)</code> is accurate for any distance <code class="light">(d)</code>
           </p>
@@ -79,12 +110,24 @@ <h2>Explanation:</h2>
     </div>
 
     <script>
-
       var distance = document.querySelector("#distance")
         , unit = document.querySelector("#unit")
         , result = document.querySelector(".result")
+        , meters = document.querySelector("#meters")
+        , miles = document.querySelector("#miles")
         , d, r, c, g, e, a, h, m, n, debug = true;
 
+      function toggleNumbers() {
+        // Show numbers table
+        if(unit.value == 'miles') {
+          meters.className = 'hidden';
+          miles.className = '';
+        } else {
+          miles.className = 'hidden';
+          meters.className = '';
+        }
+      }
+
       function calc (){
         d = distance.value;