Random IP Generator | Random Ip Address Generator Javascript - Codewithrandom

Random IP Generator | Random Ip Address Generator Javascript - Codewithrandom

Random IP Generator | Random Ip Address Generator Javascript - Codewithrandom


Welcome🎉 to Code With Random blog. In this blog, we learn how we create the Random Ip Address Generator. We use HTML, Css, and javascript for this Random Ip Address Generator. I hope you enjoy our blog so let's start with a basic HTML structure for the Random Ip Address Generator.

HTML Code 

 <!DOCTYPE html>  
 <html>  
 <head>  
  <meta charset="UTF-8">  
  <meta name="viewport" content="width=device-width,initial-scale=1">  
  <meta name="description" content="Generate Random IP Adresses.">  
  <meta name="author" content="L34ND3V">  
  <meta name="theme-color" content="#2c86e0">  
  <title>Random IP Generator</title>  
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"  
   integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">  
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">  
  <link rel="stylesheet"  
   href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.2/gh-fork-ribbon.min.css">  
  <link rel="stylesheet" href="style.css" type="text/css">  
  <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="  
   crossorigin="anonymous"></script>  
  <script type="text/javascript" src="main.js"></script>  
 </head>  
 <body>  
  <div class="container">  
   <div class="row">  
    <div class="col-md-12">  
     <h1>Random IPv4 Generator</h1>  
    </div>  
   </div>  
   <div class="row" oninput="rangeSet()">  
    <div class="col-md-12">  
     <h4>Range</h4>  
     <div class="input-group">  
      <div class="input-group-prepend">  
       <span class="input-group-text">Start</span>  
      </div>  
      <input id="rangeStart1" class="form-control wheelable" type="number" value="0" min="0" max="255">  
      <input id="rangeStart2" class="form-control wheelable" type="number" value="0" min="0" max="255">  
      <input id="rangeStart3" class="form-control wheelable" type="number" value="0" min="0" max="255">  
      <input id="rangeStart4" class="form-control wheelable" type="number" value="0" min="0" max="255">  
     </div>  
    </div>  
   </div><br>  
   <div class="row" oninput="rangeSet()">  
    <div class="col-md-12">  
     <div class="input-group">  
      <div class="input-group-prepend">  
       <span class="input-group-text">End</span>  
      </div>  
      <input id="rangeEnd1" class="form-control wheelable" type="number" value="255" min="0" max="255">  
      <input id="rangeEnd2" class="form-control wheelable" type="number" value="255" min="0" max="255">  
      <input id="rangeEnd3" class="form-control wheelable" type="number" value="255" min="0" max="255">  
      <input id="rangeEnd4" class="form-control wheelable" type="number" value="255" min="0" max="255">  
     </div>  
    </div>  
   </div>  
   <br>  
   <div class="row">  
    <div class="col-md-12">  
     <h4>Amount</h4>  
     <div class="input-group">  
      <input id="ipAmount" class="form-control wheelable" type="number" value="1" min="1" max="256"  
       oninput="amountSet()">  
     </div>  
    </div>  
   </div>  
   <div class="row">  
    <div class="col-md-12">  
     <br>  
     <h4>Output</h4>  
     <div>  
      <button id="ipGenBtn" class="btn btn-outline-light" onclick="ipGen()">Generate</button>  
      <button id="copyBtn" class="btn btn-outline-light" onclick="autoCopy()">Copy</button>  
      <button id="copyBtn" class="btn btn-outline-light" onclick="downloadText()">Download</button><br>  
      <br>  
      <div class="alert-success" id="log">Page loaded successfuly</div>  
      <div class="row">  
       <div class="col-md-12">  
        <div class="input-group">  
         <textarea id="ipOut" class="form-control" rows="6"></textarea>  
        </div>  
       </div>  
      </div>  
     </div>  
    </div>  
   </div>  
  </div>  
 </body>  
 </html>  
There is all the HTML code for the Random Ip Address Generator. Now, you can see an output with CSS, then we write javascript for the Random Ip Address Generator.
output
Random IP Generator | Random Ip Address Generator Javascript - Codewithrandom

CSS code

 @import url('https://fonts.googleapis.com/css?family=Kodchasan&display=swap');  
 ::-moz-selection {  
    color: #ffffff;  
    background: #000000;  
 }  
  ::selection {  
    color: #ffffff;  
    background: #000000;  
 }  
  input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {  
    -webkit-appearance: none;  
    margin: 0;  
 }  
  input:focus, select:focus, textarea:focus, button:focus {  
    outline: none !important;  
    box-shadow: none !important;  
 }  
  body {  
   font-family: 'Kodchasan';  
    text-align: center;  
    color: #ffffff;  
    background-color: #2c86e0;  
 }  
  #ipOut {  
    margin-bottom: 20px;  
    border-top-left-radius: 0px;  
    border-top-right-radius: 0px;  
    border-bottom-left-radius: 0.25rem;  
    border-bottom-right-radius: 0.25rem;  
  }  
  #log {  
    border-top-left-radius: 0.25rem;  
    border-top-right-radius: 0.25rem;  
    border-bottom-left-radius: 0px;  
    border-bottom-right-radius: 0px;  
  }  
  @media only screen and (max-width: 680px) {  
   .github-fork-ribbon {  
    display: none;  
   }  
  }  
  @media only screen and (max-width: 465px) {  
   h1 {  
    font-size: 1.7em;  
   }  
  }  
Css Updated output
Random IP Generator | Random Ip Address Generator Javascript - CodewithrandomRandom IP Generator | Random Ip Address Generator Javascript - Codewithrandom

Javascript code 

 var rangeStart1 = 0;  
 var rangeStart2 = 0;  
 var rangeStart3 = 0;  
 var rangeStart4 = 0;  
 var rangeEnd1 = 255;  
 var rangeEnd2 = 255;  
 var rangeEnd3 = 255;  
 var rangeEnd4 = 255;  
 var ipAmount = 1;  
 function alertBox(type, text) {  
      if (type === true) {  
           document.getElementById('log').innerHTML = text;  
           document.getElementById('log').className = "alert-success";  
      } else if (type === false) {  
           document.getElementById('log').innerHTML = text;  
           document.getElementById('log').className = "alert-danger";  
      }  
 }  
 function rangeSet() {  
      rangeStart1 = document.getElementById('rangeStart1').value;  
      rangeStart2 = document.getElementById('rangeStart2').value;  
      rangeStart3 = document.getElementById('rangeStart3').value;  
      rangeStart4 = document.getElementById('rangeStart4').value;  
      rangeEnd1 = document.getElementById('rangeEnd1').value;  
      rangeEnd2 = document.getElementById('rangeEnd2').value;  
      rangeEnd3 = document.getElementById('rangeEnd3').value;  
      rangeEnd4 = document.getElementById('rangeEnd4').value;  
 }  
 function amountSet() {  
      ipAmount = document.getElementById('ipAmount').value;  
 }  
 function ipGen() {  
      if (ipAmount > 256) return(alertBox(false, "You cannot generate more than 256 IP's at a time"));  
      document.getElementById('ipOut').innerHTML = '';  
      for (var i = 0; i < ipAmount; i++) {  
           var out1 = Math.floor(Math.random() * (parseFloat(rangeEnd1) - parseFloat(rangeStart1) + 1)) + parseFloat(rangeStart1);  
           var out2 = Math.floor(Math.random() * (parseFloat(rangeEnd2) - parseFloat(rangeStart2) + 1)) + parseFloat(rangeStart2);  
           var out3 = Math.floor(Math.random() * (parseFloat(rangeEnd3) - parseFloat(rangeStart3) + 1)) + parseFloat(rangeStart3);  
           var out4 = Math.floor(Math.random() * (parseFloat(rangeEnd4) - parseFloat(rangeStart4) + 1)) + parseFloat(rangeStart4);  
           document.getElementById('ipOut').innerHTML += out1 + "." + out2 + "." + out3 + "." + out4 + "&#10;";  
      }  
      alertBox(true, ipAmount + " IP's generated successfuly");  
 }  
 function autoCopy() {  
      var text = document.getElementById("ipOut");  
      text.select();  
      document.execCommand("copy");  
      alertBox(true, ipAmount + " IP's copied to clipboard")  
 }  
 function downloadText() {  
      var text = document.getElementById("ipOut").value;  
      if (!text) return(alertBox(false, "There are no generated IP's to download"));  
  text = text.replace(/\n/g, "\r\n");  
  var blob = new Blob([text], { type: "text/plain"});  
  var anchor = document.createElement("a");  
  anchor.download = `${ipAmount}-IP-list.txt`;  
  anchor.href = window.URL.createObjectURL(blob);  
  anchor.target ="_blank";  
  anchor.style.display = "none";  
  document.body.appendChild(anchor);  
  anchor.click();  
  document.body.removeChild(anchor);  
      alertBox(true, ipAmount + " IP's downloaded successfuly")  
 }  
 var EventUtil = {  
      addHandler: function (element, type, handler) {  
           if (element.addEventListener) {  
                element.addEventListener(type, handler, false);  
           } else if (element.attachEvent) {  
                element.attachEvent("on" + type, handler);  
           } else {  
                element["on" + type] = handler;  
           }  
      },  
      removeHandler: function (element, type, handler) {  
           if (element.removeEventListener) {  
                element.removeEventListener(type, handler, false);  
           } else if (element.detachEvent) {  
                element.detachEvent("on" + type, handler);  
           } else {  
                element["on" + type] = null;  
           }  
      },  
      getEvent: function (event) {  
           return event ? event : window.event;  
      },  
      getTarget: function (event) {  
           return event.target || event.srcElement;  
      },  
      getWheelDelta: function (event) {  
           if (event.wheelDelta) {  
                return event.wheelDelta;  
           } else {  
                return -event.detail * 40;  
           }  
      },  
      preventDefault: function (event) {  
           if (event.preventDefault) {  
                event.preventDefault();  
           } else {  
                event.returnValue = false;  
           }  
      }  
 };  
 function onWheel(event) {  
      event = EventUtil.getEvent(event);  
      var curElem = EventUtil.getTarget(event);  
      var curVal = parseInt(curElem.value);  
      var delta = EventUtil.getWheelDelta(event);  
      if (delta > 0) {  
           curElem.value = curVal + 1;  
           rangeSet();  
           amountSet();  
      } else {  
           curElem.value = curVal - 1;  
           rangeSet();  
           amountSet();  
      }  
      if (curElem.value > 255) {  
           curElem.value = 255;  
      } else if (curElem.value < 0) {  
           curElem.value = 0;  
      }  
      EventUtil.preventDefault(event);  
 }  
 $(function () {  
      $(".wheelable").hover(function () {  
                EventUtil.addHandler(document, 'mousewheel', onWheel);  
                EventUtil.addHandler(document, 'DOMMouseScroll', onWheel);  
           },  
           function () {  
                EventUtil.removeHandler(document, 'mousewheel', onWheel);  
                EventUtil.removeHandler(document, 'DOMMouseScroll', onWheel);  
           });  
 });  
Final output
Random IP Generator | Random Ip Address Generator Javascript - Codewithrandom

Now that we have completed our javascript section,  Here is our updated output with javascriptHope you like the Random Ip Address Generator. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕!

In this post, we learn how to create Random Ip Address Generator using simple HTML & CSS, and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning. 

Written by - Code With Random/Anki 

Post a Comment

Previous Post Next Post