diff options
| -rw-r--r-- | README.md | 7 | ||||
| -rw-r--r-- | index.js | 10 | ||||
| -rw-r--r-- | style.scss | 22 |
3 files changed, 34 insertions, 5 deletions
@@ -1,3 +1,10 @@ # cidr.xyz Web-based CIDR / netmask / IP address visualizer + +## Dev + +```bash +$ npm install +$ webpack-dev-server --progress --colors +``` @@ -36,19 +36,19 @@ class IPAddress extends React.Component { render() { var pretty = this.state.octets.join('.') + '/' + this.state.cidr - return <form> + return <form class="ip-address"> {[...Array(4)].map((x, octet) => - <input type="text" data-octet={octet} onChange={this.handleChange} value={this.state.octets[octet]}/> + <input class="octet" 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}/> + <input class="cidr" type="text" data-octet="cidr" onChange={this.handleChange} value={this.state.cidr}/> <h2>Result: {pretty}</h2> <ol> {[...Array(4)].map((x, octet) => - <li> + <li class="octet"> <ol> {[...Array(8)].map((x, bit) => - <li>{(this.state.octets[octet] & (1 << (7-bit))) >> (7-bit)}</li> + <li class="bit">{(this.state.octets[octet] & (1 << (7-bit))) >> (7-bit)}</li> )} </ol> </li> @@ -1,12 +1,34 @@ @import 'bourbon'; body { + background: #eee; font-family: $lucida-grande; + + header { + margin-bottom: 30px; + } + + form { + input { + width: 3em; + text-align: center; + border: 0px; + background: transparent; + } + } + ol { display: inline; li { display: inline; } } + + footer { + margin-top: 50px; + text-align: center; + font-size: 0.7em; + } + } |
