From 81e4681012fdec9e4a116c2ffab40ae600bc4e79 Mon Sep 17 00:00:00 2001
From: Yuval Adam <yuval@y3xz.com>
Date: Wed, 9 Dec 2015 01:42:57 +0200
Subject: Add octet bit rendering and styles

---
 index.js  | 19 +++++++++++++++----
 style.css | 10 +++++++++-
 2 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/index.js b/index.js
index e9935dc..143a805 100644
--- a/index.js
+++ b/index.js
@@ -37,12 +37,23 @@ class IPAddress extends React.Component {
   render() {
     var pretty = this.state.octets.join('.') + '/' + this.state.cidr
     return <form>
-      <input type="text" data-octet="0" onChange={this.handleChange} value={this.state.octets[0]}/>.
-      <input type="text" data-octet="1" onChange={this.handleChange} value={this.state.octets[1]}/>.
-      <input type="text" data-octet="2" onChange={this.handleChange} value={this.state.octets[2]}/>.
-      <input type="text" data-octet="3" onChange={this.handleChange} value={this.state.octets[3]}/>/
+      {[...Array(4)].map((x, octet) =>
+        <input type="text" data-octet={octet} onChange={this.handleChange} value={this.state.octets[octet]}/>
+      )}
       <input type="text" data-octet="cidr" onChange={this.handleChange} value={this.state.cidr}/>
       <h2>Result: {pretty}</h2>
+
+      <ol>
+        {[...Array(4)].map((x, octet) =>
+          <li>
+            <ol>
+              {[...Array(8)].map((x, bit) =>
+                <li>{(this.state.octets[octet] & (1 << (7-bit))) >> (7-bit)}</li>
+              )}
+            </ol>
+          </li>
+        )}
+      </ol>
     </form>
   }
 }
diff --git a/style.css b/style.css
index c0f1b2d..630282b 100644
--- a/style.css
+++ b/style.css
@@ -1,3 +1,11 @@
 body {
     background: #eee;
-}
\ No newline at end of file
+}
+
+ol {
+    display: inline;
+}
+
+ol li {
+    display: inline;
+}
-- 
cgit v1.3.1