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.
It’s written in JavaScript, Html and CSS and entirely runs in the browser.
Ā
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.
It’s written in JavaScript, Html and CSS and entirely runs in the browser.
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
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
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 + " ";
}
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, "rn");
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
Now that we have completed our JavaScript section,Ā Here is our updated output with JavaScript.Ā Hope 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.Ā Ā Ā
Thanks for reading!!!
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Ā
Check out more…..
