Add netmask calculation

2 files changed, 24 insertions, 3 deletions

diff --git a/index.js b/index.js
index 43f477a..720639a 100644
--- a/index.js
+++ b/index.js
@@ -34,9 +34,22 @@ class IPAddress extends React.Component {
     }
   }
 
-  render() {
-    var pretty = this.state.octets.join('.') + '/' + this.state.cidr
+  getPretty = () => {
+    return this.state.octets.join('.') + '/' + this.state.cidr
+  }
 
+  getNetmask = () => {
+    if (this.state.cidr == 0) {
+      return '0.0.0.0'
+    }
+    else {
+      return [...Array(4)].map((x, octet) =>
+        ((((0xFFFFFFFF << (32 - this.state.cidr)) >>> 0) >>> (3-octet)*8) & 0xFF)
+      ).join('.')
+    }
+  }
+
+  render() {
     return <div className="ip-address">
       <div className="address">
         {[...Array(4)].map((x, octet) =>
@@ -61,6 +74,11 @@ class IPAddress extends React.Component {
           )}
         </ol>
       </div>
+
+      <div className="details">
+        <span className="netmask">Netmask: {this.getNetmask()}</span>
+      </div>
+
     </div>
   }
 }
diff --git a/style.scss b/style.scss
index 1db93d8..db3ff5f 100644
--- a/style.scss
+++ b/style.scss
@@ -63,7 +63,10 @@ body {
           &:nth-child(2) ol li.bit.unmasked { background-color: lighten($color_b, $octet_lighten); }
           &:nth-child(3) ol li.bit.unmasked { background-color: lighten($color_c, $octet_lighten); }
           &:nth-child(4) ol li.bit.unmasked { background-color: lighten($color_d, $octet_lighten); }
-          ol li.bit.masked { background-color: lighten($color_e, $octet_lighten); }
+          ol li.bit.masked {
+            background-color: lighten($color_e, $octet_lighten);
+            color: lighten($color_e, 22%);
+          }
         }
       }
     }