Programming, tutorials, mechatronics, operating systems, and other tech stuff

How to make IP Address Calculator using HTML & Javascript

37 comments
Step 1

[code lang="html"]<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>[/code]

 

Step 2

[code lang="html"] <title>IP Calculator</title>[/code]

Step 3

[code lang="html"] <h1>IP Address calculator</h1>[/code]

Step 4

[code lang="html"] IP Address
<input type='text' class='addr' id='q1'> .
<input type='text' class='addr' id='q2'> .
<input type='text' class='addr' id='q3'> .
<input type='text' class='addr' id='q4'> /
<input type='text' class='addr' id='cidr'>
<button>Calculate</button>[/code]

 

Step 5

[code lang="html"] <style>
body {
font-family:monospace;
font-size:16px;
}
.addr {
width:30px;
}
</style>[/code]

 

Step 6

[code lang="html"] <hr>
<div class='result'>
<span class=label>IP Address :</span>
<span class=value id=resIP></span>
</div>
<div class='result'>
<span class=label>Subnet mask :</span>
<span class=value id=resMask></span>
</div>
<div class='result'>
<span class=label>Net Address :</span>
<span class=value id=resNet></span>
</div>
<div class='result'>
<span class=label>Broadcast Address :</span>
<span class=value id=resBC></span>
</div>
<div class='result'>
<span class=label>Standard Class :</span>
<span class=value id=resClass></span>
</div>
<div class='result'>
<span class=label>Range :</span>
<span class=value id=resRange></span>
</div>
<div class='result'>
<span class=label>IP Binary :</span>
<span class=value id=resBinIP></span>
</div>
<div class='result'>
<span class=label>Mask Binary :</span>
<span class=value id=resBinMask></span>
</div>
<div class='result'>
<span class=label>Net Address Binary :</span>
<span class=value id=resBinNet></span>
</div>
<div class='result'>
<span class=label>BC Address Binary :</span>
<span class=value id=resBinBC></span>
</div>[/code]

 

Step 7

[code lang="css"].result {
border-bottom: 1px solid #6a6ade;
border-right: 1px solid #6a6ade;
}
.result .label {
display:inline-block;
width:200px;
background:#aaf;
}[/code]

Step 8

[code lang="html"] <script type='text/javascript'>
function calculate(){
alert("calculate button pressed");
}
</script>[/code]

Step 9

[code lang="html"] <button onclick='calculate();'>Calculate</button>[/code]

Step 10

[code lang="javascript"]//get values from input box
var q1=document.getElementById('q1').value;
var q2=document.getElementById('q2').value;
var q3=document.getElementById('q3').value;
var q4=document.getElementById('q4').value;
var cidr=document.getElementById('cidr').value;

//validate input value
if(
(q1>=0 && q1<=255) &&
(q2>=0 && q2<=255) &&
(q3>=0 && q3<=255) &&
(q4>=0 && q4<=255) &&
(cidr>=0 && cidr<=32)
){
//display IP address
document.getElementById('resIP').innerHTML=q1 + "." + q2 + "." + q3 + "." + q4;

//get IP Address binaries
var ipBin={};
ipBin[1]=String("00000000"+parseInt(q1,10).toString(2)).slice(-8);
ipBin[2]=String("00000000"+parseInt(q2,10).toString(2)).slice(-8);
ipBin[3]=String("00000000"+parseInt(q3,10).toString(2)).slice(-8);
ipBin[4]=String("00000000"+parseInt(q4,10).toString(2)).slice(-8);

//decide standart class
var standartClass="";
if(q1<=126) {
standartClass="A";
}else if (q1==127) {
standartClass="loopback IP"
}else if (q1>=128 && q1<=191) {
standartClass="B";
}else if (q1>=192 && q1<=223) {
standartClass="C";
}else if (q1>=224 && q1<=239) {
standartClass="D (Multicast Address)";
}else if (q1>=240 && q1<=225) {
standartClass="E (Experimental)";
}else {
standartClass="Out of range";
}

//netmask
var mask=cidr;
var importantBlock=Math.ceil(mask/8);
var importantBlockBinary=ipBin[importantBlock];
var maskBinaryBlockCount=mask%8;
if(maskBinaryBlockCount==0)importantBlock++;
var maskBinaryBlock="";
var maskBlock="";
for(var i=1;i<=8;i++){
if(maskBinaryBlockCount>=i){
maskBinaryBlock+="1";
}else{
maskBinaryBlock+="0";
}
}
//convert binary mask block to decimal
maskBlock=parseInt(maskBinaryBlock,2);

//net & broadcast addr
var netBlockBinary="";
var bcBlockBinary="";
for(var i=1;i<=8;i++){
if(maskBinaryBlock.substr(i-1,1)=="1"){
netBlockBinary+=importantBlockBinary.substr(i-1,1);
bcBlockBinary+=importantBlockBinary.substr(i-1,1);
}else{
netBlockBinary+="0";
bcBlockBinary+="1";
}
}

//put everything together, create a string container variables
var mask="";
var maskBinary="";
var net="";
var bc="";
var netBinary="";
var bcBinary="";
var rangeA="";
var rangeB="";
//loop to put whole strings block together
for(var i=1;i<=4;i++){
if(importantBlock>i) {
//blocks before the important block.
mask+="255";
maskBinary+="11111111";
netBinary+=ipBin[i];
bcBinary+=ipBin[i];
net+=parseInt(ipBin[i],2);
bc+=parseInt(ipBin[i],2);
rangeA+=parseInt(ipBin[i],2);
rangeB+=parseInt(ipBin[i],2);
}else if (importantBlock==i) {
//the important block.
mask+=maskBlock;
maskBinary+=maskBinaryBlock;
netBinary+=netBlockBinary;
bcBinary+=bcBlockBinary;
net+=parseInt(netBlockBinary,2);
bc+=parseInt(bcBlockBinary,2);
rangeA+=(parseInt(netBlockBinary,2)+1);
rangeB+=(parseInt(bcBlockBinary,2)-1);
}else {
//block after the important block.
mask+=0;
maskBinary+="00000000";
netBinary+="00000000";
bcBinary+="11111111";
net+="0";
bc+="255";
rangeA+=0;
rangeB+=255;
}
//add . separator except the last block
if(i<4){
mask+=".";
maskBinary+=".";
netBinary+=".";
bcBinary+=".";
net+=".";
bc+=".";
rangeA+=".";
rangeB+=".";
}
}
//write the results to the page.
document.getElementById('resMask').innerHTML=mask;
document.getElementById('resNet').innerHTML=net;
document.getElementById('resBC').innerHTML=bc;
document.getElementById('resRange').innerHTML=rangeA + " - " + rangeB;
document.getElementById('resBinIP').innerHTML=ipBin[1]+"."+ipBin[2]+"."+ipBin[3]+"."+ipBin[4];
document.getElementById('resBinMask').innerHTML=maskBinary;
document.getElementById('resBinNet').innerHTML=netBinary;
document.getElementById('resBinBC').innerHTML=bcBinary;
document.getElementById('resClass').innerHTML=standartClass;
}else{
alert("invalid value");
}
[/code]

Instruction video



Another version.


As requested by one of my subscriber. I made some customization which allows the calculator to guess subnet id using provided possible hosts number.

[code lang="html"]<!DOCTYPE html>
<html>
<head>
<title>IP Calculator</title>
<style>
body {
font-family:monospace;
font-size:16px;
}
.addr {
width:30px;
}
.result {
border-bottom: 1px solid #6a6ade;
border-right: 1px solid #6a6ade;
}
.result .label {
display:inline-block;
width:200px;
background:#aaf;
}
</style>
</head>
<body>
<h1>IP Address calculator</h1>
IP Address
<input type='text' class='addr' id='q1'> .
<input type='text' class='addr' id='q2'> .
<input type='text' class='addr' id='q3'> .
<input type='text' class='addr' id='q4'>
<br>
# of host
<input type='text' class='addr' id='hostNum'><br>
# of subnet
<input type='text' class='addr' id='subnetNum'>
<br>
Note:
<br>
Netmask will be automatically guessed using #of host first
<br>
# of subnet isn't really used here as the netmask is already guessed from # of host
<br>
<button onclick='calculate();'>Calculate</button>
<hr>
<div class='result'>
<span class=label>IP Address :</span>
<span class=value id=resIP></span>
</div>
<div class='result'>
<span class=label>Subnet mask :</span>
<span class=value id=resMask></span>
</div>
<div class='result'>
<span class=label>Subnet Id (CIDR) :</span>
<span class=value id=resSubnetId></span>
</div>
<div class='result'>
<span class=label>Net Address :</span>
<span class=value id=resNet></span>
</div>
<div class='result'>
<span class=label>Broadcast Address :</span>
<span class=value id=resBC></span>
</div>
<div class='result'>
<span class=label>Standard Class :</span>
<span class=value id=resClass></span>
</div>
<div class='result'>
<span class=label>Important Block :</span>
<span class=value id=resImportantBlock></span>
</div>
<div class='result'>
<span class=label>Range :</span>
<span class=value id=resRange></span>
</div>
<div class='result'>
<span class=label>IP Binary :</span>
<span class=value id=resBinIP></span>
</div>
<div class='result'>
<span class=label>Mask Binary :</span>
<span class=value id=resBinMask></span>
</div>
<div class='result'>
<span class=label>Net Address Binary :</span>
<span class=value id=resBinNet></span>
</div>
<div class='result'>
<span class=label>BC Address Binary :</span>
<span class=value id=resBinBC></span>
</div>
<div class='result'>
<span class=label>Max # of Subnet :</span>
<span class=value id=resMaxNet></span>
</div>
<div class='result'>
<span class=label>Max # of Host :</span>
<span class=value id=resMaxHost></span>
</div>
<div style=font-size:11px;><a href="http://asudahlah.com">By. Gemul Cybermujahidz</a></div>
</body>
<script type='text/javascript'>
function calculate(){
//get values from input box
var q1=document.getElementById('q1').value;
var q2=document.getElementById('q2').value;
var q3=document.getElementById('q3').value;
var q4=document.getElementById('q4').value;
//var cidr=document.getElementById('cidr').value;
var netNum=document.getElementById('subnetNum').value;
var hostNum=document.getElementById('hostNum').value;

//guessing netmask by # of host
var hostNumDbg=0;
for(var i=32;i>=0;i--){
if(hostNum >= Math.pow(2,i)){
//hostNumDbg=Math.pow(2,i+1);
hostNumDbg=32-(i+1);
break;
}
}
var cidr=hostNumDbg;


//validate input value
if(
(q1>=0 && q1<=255) &&
(q2>=0 && q2<=255) &&
(q3>=0 && q3<=255) &&
(q4>=0 && q4<=255) &&
(cidr>=0 && cidr<=32)
){
//display IP address
document.getElementById('resIP').innerHTML=q1 + "." + q2 + "." + q3 + "." + q4;

//get IP Address binaries
var ipBin={};
ipBin[1]=String("00000000"+parseInt(q1,10).toString(2)).slice(-8);
ipBin[2]=String("00000000"+parseInt(q2,10).toString(2)).slice(-8);
ipBin[3]=String("00000000"+parseInt(q3,10).toString(2)).slice(-8);
ipBin[4]=String("00000000"+parseInt(q4,10).toString(2)).slice(-8);

//decide standart class

var standartClass="";
if(q1<=126) {
standartClass="A";
}else if (q1==127) {
standartClass="loopback IP"
}else if (q1>=128 && q1<=191) {
standartClass="B";
}else if (q1>=192 && q1<=223) {
standartClass="C";
}else if (q1>=224 && q1<=239) {
standartClass="D (Multicast Address)";
}else if (q1>=240 && q1<=225) {
standartClass="E (Experimental)";
}else {
standartClass="Out of range";
}

//netmask
var mask=cidr;
var importantBlock=Math.ceil(mask/8);
var importantBlockBinary=ipBin[importantBlock];
var maskBinaryBlockCount=mask%8;
if(maskBinaryBlockCount==0)importantBlock++;
var maskBinaryBlock="";
var maskBlock="";
for(var i=1;i<=8;i++){
if(maskBinaryBlockCount>=i){
maskBinaryBlock+="1";
}else{
maskBinaryBlock+="0";
}
}
//convert binary mask block to decimal
maskBlock=parseInt(maskBinaryBlock,2);

//net & broadcast addr
var netBlockBinary="";
var bcBlockBinary="";
for(var i=1;i<=8;i++){
if(maskBinaryBlock.substr(i-1,1)=="1"){
netBlockBinary+=importantBlockBinary.substr(i-1,1);
bcBlockBinary+=importantBlockBinary.substr(i-1,1);
}else{
netBlockBinary+="0";
bcBlockBinary+="1";
}
}

//put everything together, create a string container variables
var mask="";
var maskBinary="";
var net="";
var bc="";
var netBinary="";
var bcBinary="";
var rangeA="";
var rangeB="";
//loop to put whole strings block together
for(var i=1;i<=4;i++){
if(importantBlock>i) {
//blocks before the important block.
mask+="255";
maskBinary+="11111111";
netBinary+=ipBin[i];
bcBinary+=ipBin[i];
net+=parseInt(ipBin[i],2);
bc+=parseInt(ipBin[i],2);
rangeA+=parseInt(ipBin[i],2);
rangeB+=parseInt(ipBin[i],2);
}else if (importantBlock==i) {
//the important block.
mask+=maskBlock;
maskBinary+=maskBinaryBlock;
netBinary+=netBlockBinary;
bcBinary+=bcBlockBinary;
net+=parseInt(netBlockBinary,2);
bc+=parseInt(bcBlockBinary,2);
rangeA+=(parseInt(netBlockBinary,2)+1);
rangeB+=(parseInt(bcBlockBinary,2)-1);
}else {
//block after the important block.
mask+=0;
maskBinary+="00000000";
netBinary+="00000000";
bcBinary+="11111111";
net+="0";
bc+="255";
rangeA+=0;
rangeB+=255;
}
//add . separator except the last block
if(i<4){
mask+=".";
maskBinary+=".";
netBinary+=".";
bcBinary+=".";
net+=".";
bc+=".";
rangeA+=".";
rangeB+=".";
}
}

//additional : count maximum host, maximum net and current subnets
var binaryHost="";
for(var i=(31-cidr);i>=0;i--){
binaryHost=binaryHost+"1";
}
var maxHost=parseInt(binaryHost,2);
var binarySubnet="";
for(var i=cidr;i>=0;i--){
binarySubnet=binarySubnet+"1";
}
var maxSubnet=parseInt(binarySubnet,2);
var binaryCurrentSubnetBlock="";
for(var i=maskBinaryBlockCount;i>=0;i--){
binaryCurrentSubnetBlock=binaryCurrentSubnetBlock+"1";
}
var maxCurrentSubnetBlock=parseInt(binaryCurrentSubnetBlock,2);

//write the results to the page.
document.getElementById('resMask').innerHTML=mask;
document.getElementById('resNet').innerHTML=net;
document.getElementById('resBC').innerHTML=bc;
document.getElementById('resRange').innerHTML=rangeA + " - " + rangeB;
document.getElementById('resBinIP').innerHTML=ipBin[1]+"."+ipBin[2]+"."+ipBin[3]+"."+ipBin[4];
document.getElementById('resBinMask').innerHTML=maskBinary;
document.getElementById('resBinNet').innerHTML=netBinary;
document.getElementById('resBinBC').innerHTML=bcBinary;
document.getElementById('resClass').innerHTML=standartClass;
document.getElementById('resSubnetId').innerHTML=cidr;
document.getElementById('resMaxHost').innerHTML=maxHost+" possible host(s) in current subnet";
document.getElementById('resMaxNet').innerHTML=maxSubnet+" of total possible subnet, "+maxCurrentSubnetBlock+" possible subnet in current block";
document.getElementById('resImportantBlock').innerHTML=importantBlock;
}else{
alert("invalid value");
}

}
</script>
</html>
[/code]

37 comments :

  1. hi there. I'd like to add first host & last host on that IP calculator, but I didn't know the syntax would be. I had tried make new variable (last & first host) with same format of your syntax above, but none of my syntax was correct.
    Do you have the solution for that?
    thx. BTW, nice tutorial!

    ReplyDelete
  2. Texas mortgage is indeed a very good site for every sort of calculation regarding taxes. Thank you for coming up with this great idea. texas mortgage

    ReplyDelete
  3. Pretty blog, so many ideas in a single site, thanks for the informative article, keep updating more article.
    Software testing course in chennai

    ReplyDelete
  4. This comment has been removed by the author.

    ReplyDelete
  5. Promptly drawn by writer's specific strategy for creating.
    192-168-01

    ReplyDelete
  6. But how can that be? Do professional people not get into financial trouble? Is it only the low paid and poor academic achievers who become bankrupt or found guilty of fraud? What is going on?mortgage advisor manchester

    ReplyDelete
  7. I’m going to read this. I’ll be sure to come back. thanks for sharing. and also This article gives the light in which we can observe the reality. this is very nice one and gives indepth information. thanks for this nice article... 192.168.0.1

    ReplyDelete
  8. https://www.prcboard.com/2019/10/list-of-allowed-calculator-ce-board-exams.html?showComment=1581773438753#c305125089196112541

    ReplyDelete
  9. This is my first time i visit here. I found so many entertaining stuff in your blog, especially its discussion. From the tons of comments on your articles, I guess I am not the only one having all the leisure here! Keep up the good work. I have been meaning to write something like this on my website and you have given me an idea. online antiderivative calculator

    ReplyDelete
  10. I love this info presented and possesses given me some type of resolve forpersistance to succeed i really enjoy seeing, so sustain the excellent work. web design in new york

    ReplyDelete
  11. I was suggested this website by my cousin. I’m not sure whether this post is written by him as no one else know such detailed about my trouble. You’re wonderful! Thanks! web design manhattan

    ReplyDelete
  12. This comment has been removed by the author.

    ReplyDelete
  13. Thank you for your site post. Jones and I are actually saving to get a new publication on this issue and your post has made all of us to save our own money. Your notions really clarified all our questions. In fact, more than what we had thought of prior to when we stumbled on your wonderful blog. We no longer nurture doubts as well as a troubled mind because you have actually attended to our own needs in this post. Thanks branding sf

    ReplyDelete
  14. Right humans speeches must seat as well as memorialize around the groom and bride. Beginer sound system around rowdy locations should always not forget currently the glowing leadership of a speaking, which is one’s boat. best man speeches brother ux design agency san francisco

    ReplyDelete
  15. very good post, i surely enjoy this fabulous website, persist in it website design la

    ReplyDelete
  16. Your blog is amazing dude” i love to visit it everyday. very nice layout and content ,     la web design

    ReplyDelete
  17. This web site may be a walk-through you discover the data you wished about it and didn’t know who ought to. Glimpse here, and you’ll definitely discover it. website design la

    ReplyDelete
  18. Yay google is my king helped me to find this great website ! . top web design companies

    ReplyDelete
  19. Very nice post. I just stumbled upon your weblog and wished to say that I have truly enjoyed surfing around your blog posts. In any case I’ll be subscribing to your feed and I hope you write again soon! website design

    ReplyDelete
  20. I’m really impressed with your writing skills as well as with the layout on your blog. Is this a paid theme or did you customize it yourself? Either way keep up the excellent quality writing, it is rare to see a great blog like this one these days.. converting websites

    ReplyDelete
  21. Convenience: - Online logical number crunchers are ideal for doing various kinds of confounded capacities. inch to cm

    ReplyDelete
  22. Nice article, I really appreciate it.
    If you don’t want to pay money for an official Baseball Score Sheet Printable that comes with the record, create your own or download one from Printable Things. When choosing or preparing your scorecard, fill in as much detail as you wish. You are able to choose from a variety of forms on the website. Find a template, which will satisfy your needs the best.

    ReplyDelete
  23. This comment has been removed by the author.

    ReplyDelete
  24. You can restore your iphone, ipad, or ipod touch from a backup on mac using the finder starting in macos catalina. Or else visit matrix calculator and they will help you find a solution.

    ReplyDelete
  25. This article is very nice, thank you for sharing with us.
    A rent/landlord verification form is used to verifying the tenant’s reliability. Visit the website of Printable Things to download the Sample Rental Verification Letter Pdf at freed from cost. A landlord who is going to give their home for renting then he would want proof that the applicant is ready both financially and socially to rent the house.

    ReplyDelete
  26. Also, in maximum of those devices you may get to peer assist or guide capabilities as a way to help you in calculation functions have to you get stressed with them or now no longer positive which buttons are for use for calculations.trigonometry calculator

    ReplyDelete
  27. Historical events are documented in a chronological order that can be determined using dates. You can preserve past and present occurrences in printable calendars for years using date and time, which can be used as proof in the future. Make your own printable calendar 2022 January for the month of January, complete with holidays and events in printable calendar 2021.

    ReplyDelete
  28. This article explains what addresses a company may use and which ones are legally required.ip tracker best

    ReplyDelete
  29. Simultaneously, they likewise can utilize an assortment of open source structures to lessen how much time and exertion needed for building JavaScript applications.https://twitchviral.com/

    ReplyDelete
  30. An IP address is a numeric identifier alloted to each machine on an IP organization. It assigns the particular area of a gadget on the organization.https://onohosting.com/

    ReplyDelete
  31. https://dynamichealthstaff.com/nursing-jobs-in-canada-for-indian-nurses Bohnanza is not a new game. It's been originally published in 1997 and throughout the years dozens of expansions have been keeping up the interest in it. Let's find out what makes this game special!

    ReplyDelete
  32. https://www.buyyoutubesubscribers.in/2021/10/30/does-youtube-pay-views/ If you're one of the unfortunate computer users to experience slow YouTube videos, then there are a number of possible causes that will be preventing your system from being able to run smoothly. These problems will include everything from the "Web Browser" of your computer not functioning correctly, to having some sort of issue with the settings of your PC that it will be using to run. This tutorial is going to show you the best way to improve the speed of YouTube videos on your system.

    ReplyDelete
  33. https://hostinglelo.in For a website to engage in SEO, it means that: 1. The company is considering to fund an internet marketing campaign, but probably unsure of what to do and how to do it; 2. The company has the option to hire a staff to do the SEO work (monthly salaries, health care, taxes, insurance included) or outsource the project to an SEO company who does the work for them, pay them for the services alone, and step out once the project is done.

    ReplyDelete
  34. https://www.visualaidscentre.com/lasik-eye-surgery-in-delhi/ Free Online games are becoming hugely popular these days. With a fast Internet connection, you can actually enter into the amazing world of games to get the unlimited pleasure. Online games have become a huge significant part of the gaming industry building huge revenue. Online gaming portals have become a major source for the profit of the companies.

    ReplyDelete
  35. https://onohosting.com This article teaches the reader about the life and times of one of the worlds favorite pastimes known as board games. This overview teaches you how important the development of board games was to earlier mankind.

    ReplyDelete