Refactor and modernize code base (#5)

Fixes #3 -

* Updated all the dependencies to latest version

* Config files updated

* Moved the files to src directory

* Updated README file

* Configured package.json and README.md for production build

* Added gh-pages package

* Added production details in README.md

* Removed unnecessary script tag from index.html

* Change the fonts to ubuntu

1 files changed, 114 insertions, 0 deletions

diff --git a/src/index.js b/src/index.js
new file mode 100644
index 0000000..c1c6825
--- /dev/null
+++ b/src/index.js
@@ -0,0 +1,114 @@
+import './style.scss';
+
+import { Netmask } from 'netmask';
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+
+class IPAddress extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      octets: [10, 88, 135, 144],
+      cidr: 28
+    };
+    this.handleChange = this.handleChange.bind(this);
+  }
+
+  handleChange(event) {
+    var octets = this.state.octets;
+    var val = +event.target.value.replace(/[^0-9]/g, '');
+    var octet = event.target.attributes['data-octet'].value;
+    if (octet == 'cidr') {
+      if (val <= 32) {
+        this.setState({
+          cidr: val
+        });
+      }
+    } else {
+      if (val <= 255) {
+        octets[+octet] = val;
+        this.setState({
+          octets: octets
+        });
+      }
+    }
+  }
+
+  getPretty() {
+    return this.state.octets.join('.') + '/' + this.state.cidr;
+  }
+
+  render() {
+    var details = new Netmask(this.getPretty());
+
+    return (
+      <div className="ip-address">
+        <div className="address">
+          {[...Array(4)].map((x, octet) => (
+            <span className="octet">
+              <input
+                className="octet"
+                type="text"
+                data-octet={octet}
+                onChange={this.handleChange}
+                value={this.state.octets[octet]}
+              />
+              <span className="dot">{octet == '3' ? '/' : '.'}</span>
+            </span>
+          ))}
+          <input
+            className="cidr"
+            type="text"
+            data-octet="cidr"
+            onChange={this.handleChange}
+            value={this.state.cidr}
+          />
+        </div>
+
+        <div className="bits">
+          <ol>
+            {[...Array(4)].map((x, octet) => (
+              <li className="octet">
+                <ol>
+                  {[...Array(8)].map((x, bit) => (
+                    <li
+                      className={
+                        octet * 8 + bit > this.state.cidr - 1
+                          ? 'bit masked'
+                          : 'bit unmasked'
+                      }
+                    >
+                      {(this.state.octets[octet] & (1 << (7 - bit))) >>
+                        (7 - bit)}
+                    </li>
+                  ))}
+                </ol>
+              </li>
+            ))}
+          </ol>
+        </div>
+
+        <div className="details">
+          <span className="netmask">
+            <span className="value">{details.mask}</span>
+            <span className="label">Netmask</span>
+          </span>
+          <span className="first">
+            <span className="value">{details.first}</span>
+            <span className="label">First IP</span>
+          </span>
+          <span className="last">
+            <span className="value">{details.last}</span>
+            <span className="label">Last IP</span>
+          </span>
+          <span className="count">
+            <span className="value">{details.size.toLocaleString()}</span>
+            <span className="label">Count</span>
+          </span>
+        </div>
+      </div>
+    );
+  }
+}
+
+ReactDOM.render(<IPAddress />, document.getElementById('app'));