JSFiddle - React, Tailwind, and code Playground

by tjmcdevitt

HTML

<script src="http://cloud.github.com/downloads/digitalBush/jquery.maskedinput/jquery.maskedinput-1.3.min.js"></script>
<div class="form-group" id="NewIpRangeRow">
            <label>
              Start IP Address
            </label>
            <div class="input-group">
                <input class="form-control" id="txtstartIpAddr"  style="width 100 !important;"></input>
            </div>
            <label>
              End IP Address
            </label>
            <div class="input-group">
              <input class="form-control" id="txtendIpAddr" style="width 100 !important;"></input>
          
          
            </div>
            <br >
            <button class="k-button" id="button-validate">Validate</button>
            <br >
            <label class="success" id="validate">
            </label>
</div>

CSS

input {
    font-family: Courier
}

.success {background-color: #04AA6D;} 

.label {
  color: white;
  padding: 8px;
  font-family: Arial;
}

JavaScript

$('#button-validate').on('click', function() {
        	 let startIpAddr = $("#txtstartIpAddr").val();
           var startIpAddrToLong = parseInt(IpAddressToLong(startIpAddr));
           
           let endIpAddr = $("#txtendIpAddr").val();
           var endIpAddrToLong = parseInt(IpAddressToLong(endIpAddr));
           
           console.log(endIpAddrToLong);
           console.log(startIpAddrToLong);
           
           if (endIpAddrToLong >  startIpAddrToLong) {
           		console.log('success');
    				}
           
        });
        
        function IpAddressToLong(ip){
  				return ip.split('.').map((octet, index, array) => {
      		return parseInt(octet) * Math.pow(256, (array.length - index - 1));
    			}).reduce((prev, curr) => {
      		return prev + curr;
  			});
}