How to make IP Address Calculator using HTML & Javascript
English
,
html
,
HTML amp; CSS
,
Javascript
,
pll_570da3233349a
,
Programming
,
script
,
tutorial
,
video tutorial
36 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]
Subscribe to:
Post Comments
(
Atom
)
thank u blogger
ReplyDeletehi 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.
ReplyDeleteDo you have the solution for that?
thx. BTW, nice tutorial!
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
ReplyDeletePretty blog, so many ideas in a single site, thanks for the informative article, keep updating more article.
ReplyDeleteSoftware testing course in chennai
This comment has been removed by the author.
ReplyDeletePromptly drawn by writer's specific strategy for creating.
ReplyDelete192-168-01
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
ReplyDeleteI’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
ReplyDeletehttps://www.prcboard.com/2019/10/list-of-allowed-calculator-ce-board-exams.html?showComment=1581773438753#c305125089196112541
ReplyDeleteThis 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
ReplyDeleteI 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
ReplyDeleteI 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
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteThank 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
ReplyDeleteRight 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
ReplyDeletevery good post, i surely enjoy this fabulous website, persist in it website design la
ReplyDeleteYour blog is amazing dude” i love to visit it everyday. very nice layout and content , la web design
ReplyDeleteThis 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
ReplyDeleteYay google is my king helped me to find this great website ! . top web design companies
ReplyDeleteVery 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
ReplyDeleteI’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
ReplyDeleteConvenience: - Online logical number crunchers are ideal for doing various kinds of confounded capacities. inch to cm
ReplyDeleteAmazing article, Really useful information to all, Keep sharing more useful updates.
ReplyDeletedata science skills
latest new technologies
ccna job opportunities
courses with guaranteed jobs
cyber security interview questions pdf
java interview questions and answers for freshers
Nice article, I really appreciate it.
ReplyDeleteIf 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.
This comment has been removed by the author.
ReplyDeleteYou 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.
ReplyDeleteThis article is very nice, thank you for sharing with us.
ReplyDeleteA 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.
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
ReplyDeleteHistorical 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.
ReplyDeleteThis article explains what addresses a company may use and which ones are legally required.ip tracker best
ReplyDeleteAn 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/
ReplyDeletehttps://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!
ReplyDeletehttps://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.
ReplyDeletehttps://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.
ReplyDeletehttps://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.
ReplyDeletehttps://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