diff options
| -rw-r--r-- | index.js | 6 | ||||
| -rw-r--r-- | style.scss | 9 |
2 files changed, 8 insertions, 7 deletions
@@ -8,8 +8,8 @@ class IPAddress extends React.Component { constructor(props) { super(props) this.state = { - octets: [10, 88, 135, 24], - cidr: 32, + octets: [10, 88, 135, 144], + cidr: 28, } } @@ -54,7 +54,7 @@ class IPAddress extends React.Component { <li className="octet"> <ol> {[...Array(8)].map((x, bit) => - <li className="bit">{(this.state.octets[octet] & (1 << (7-bit))) >> (7-bit)}</li> + <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> @@ -59,10 +59,11 @@ body { border: 1px black solid; } } - &:nth-child(1) ol li.bit { background-color: lighten($color_a, $octet_lighten); } - &:nth-child(2) ol li.bit { background-color: lighten($color_b, $octet_lighten); } - &:nth-child(3) ol li.bit { background-color: lighten($color_c, $octet_lighten); } - &:nth-child(4) ol li.bit { background-color: lighten($color_d, $octet_lighten); } + &:nth-child(1) ol li.bit.unmasked { background-color: lighten($color_a, $octet_lighten); } + &: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); } } } } |