In this Vue.js tutorial, we’ll create a new Vue.js powered application that is a little more ambitious than what we have covered so far. Here, we will build an Internet Protocol version 4 javascript subnet calculator. The subnet calculator accepts an IP address as well as a subnet mask. From these two inputs, the application dynamically calculates the Network Address, the First Host, the Last Host, the Broadcast Address, the Total Hosts, and more. Let’s check it out!
VueJS Subnet Calculator
How Does It Work?
The first thing we notice is that we are provided with a default IP address and subnet mask of 192.168.1.1. and 255.255.255.0. Both the IP address and subnet mask are provided in dotted decimal notation, as well as 32 bit binary numbers. This calculator helps us to convert decimal to binary, then calculate more information about our network. You might notice this particular IP adddress, as it is the default IP address of most Linksys small office home office routers. Your own home network probably uses an IP scheme similar to this. As we can see from the application, 192.168.1.1 is the first available host on the 192.168.1.0 network. There are 254 network hosts available, which means you could connect that many Internet Protocol devices to your local network. Most times this is a computer, such as a laptop computer or maybe an iPad. It may also be your smart TV or a smart thermostat. Each device *must* have a unique IP address on a given subnet. Here, our application tells you the IP addresses that are available to use. With 192.168.1.1. and 255.255.255.0 as the defaults, we can use any IP address between 192.168.1.1 and 192.168.1.254 on our network. Lastly, our application tells us what the broadcast address and wildcard mask are for our network.
4 Ways To Interact With The Application
1. Manually Type an IP address into a number input, then click your Tab key.
When you manually type an IP address into the application, everything updates dynamically. Watch all fields of the application update on the fly, powered by Vue.js.
2. Click on the up or down number selectors.
Each of the IP address input fields has up and down arrow number selectors. By clicking up or down in one of the fields, you can increment or decrement the number value by one. Just like the other ways to update the application, all of the associated calculations update in real time thanks to VueJS. Note as you click the up and down arrow, the binary value immediately below updates in real time. So Cool!
3. Click the binary bits of the IP Address.
Instead of manually typing an IP address, you can click on the bits of the IP address below the decimal format. Notice that when you hover over a particular bit, the value of the bit position is highlighted. So if we click on the first bit of the fourth byte, it turns this bit on, and it’s value of 128 is added to the total value of the decimal IP address. In this octet, the most significant bit is set with a value of 128 and the least significant bit is set with a value of 1. This gives us the total value of 129. Again, all other fields in the application will update automatically as you click, all via VueJS.
4. Click the bits of the Subnet Mask.
In order to update the subnet mask, we can click on the binary bits of the subnet mask. Here, we click the 25th bit on the subnet mask, and this turns that bit to 1 adding a value of 128. Notice that the subnet mask bit length updates automatically as well as the total number of network hosts available. With a subnet mask of 255.255.255.128, you will have access to 126 available IP addresses for your local area network. You’ll notice that the subnet mask decimal input fields are grayed out. You can only update the subnet mask by clicking on the actual bits of the binary mask. This is by design, since each byte of a subnet mask can only be the values of 128, 192, 224, 240, 248, 252, 254, and 255.
Why is this subnet calculator better than others available online?
Thanks to VueJS, anything you touch in this application updates immediately. The reactive rendering is super fast, and it is a joy to use. With other subnet calculators, you need to meticulously fill out all of the fields, then manually click an update button. Who needs that?!
Learn How to Convert Binary to Decimal and Vice Versa
With this example application, you can practice converting numbers from decimal to binary and binary to decimal very quickly. As we have seen, just enter some numbers in the fields, and watch the binary representation of those numbers update in real time below. You can also do it in reverse. That is to say, click on the various bits in the binary number, and watch the decimal equivalent update above.
Let’s see how to calculate these things manually so we can understand how the calculator is working. Imagine you have an IP address of 192.168.10.10 and a subnet mask of 255.255.255.0. You need to know what network this IP address is part of, the number of available hosts, the first and last hosts available to use, as well as the broadcast address. How would we do that?
Turn your decimal numbers into binary
In order to convert a decimal number to binary, first we must understand that an IPv4 address is a group of four 8 bit numbers – making it 32bits in total length. You can complete the conversion one byte at a time, with an understanding of how the most significant bit vs the least significant bit works. Each of the 8 bits carries with it a potential value. If the bit is a 1, then the value counts. If the bit is a zero, it does not. Here is an example of an 8 bit binary number with each of it’s bit positions labeled with it’s associated value. The most significant bit is on the left, and the least significant bit is on the right.
Let’s find out the binary value of 192, the first byte of our IP address. Here is how you do that. You always start with the most significant bit, then ask yourself: Does 128 fit into 192? Yes it does, so we need to set that bit.
This now gives us a decimal value of 128, but we want 192. Now, you must subtract 192 – 128, and that is 64. So we have a value of 64 that we must account for. Again we ask: does 64 go into 64? Yes it does, so we must also set this bit.
Success! We now have a decimal value of 192 because 128 + 64 = 192. Now we can see that if you have an 8 bit binary number with the first two bits set, then it’s equivalent decimal number is 192. So 192 in decimal is the same as 11000000 in binary.
The second byte of our IP address has a decimal value of 168, let’s figure out it’s binary value. First, does 128 go into 168? Yes it does so we must set that bit.
This gives us a value of 128, but we need 168. So we subtract 168 – 128 and arrive at 40. Ok, we have a value of 40 to account for. We ask, does 64 go into 40? No, it does not – so we do not set the second bit. We then move right again and ask, does 32 go into 40? Indeed it does, so we must set that bit.
Fantastic, we now have a value of 160 – however we need 168. You know the drill by now. Subtract 160 from 168 and observe that we still need to account for a value of 8. Does 16 go into 8? No it does not, so we do not set the 4th bit. Move right again, does 8 go into 8? In fact, yes. Let’s set that bit.
Success! Our second decimal value of 168 is now converted to binary in the form of 10101000.
Ok, so far we have converted both 192 and 168 to binary. Here is where we are so far: 192.168 = 1100000010101000. Our third octet of the IP address is 10. The same process applies. We start with the most significant bit, and try to get it to fit into the value we want. In this case we have a decimal 10. We know that 128, 64, 32, and 16 do not fit into 10 – so none of those bits need to get set. We arrive at bit 5 and notice that 8 does go into 10, so let’s set that bit.
Nice work, but now we subtract 8 from 10 and realize we still need to account for a value of 2. Move one space to the right and ask, does 4 go into 2? No it does not, so don’t set that bit. Move again, does 2 go into 2? Yes it does, so let’s set that bit.
Success! We now know that decimal 10 is 00001010 in binary. Now we are up to: 192.168.10 = 110000001010100000001010. We only have one more byte to account for and guess what. Today is your lucky day since the last byte is the same decimal value as the one we just converted, 10. Now all we need to do is add these final 8 bits of 00001010 to what we have converted so far and we arrive at 11000000101010000000101000001010. So great job! You just manually converted the decimal IP address of 192.168.10.10 to it’s binary representation of 11000000101010000000101000001010!
The Binary IP ANDED to the Binary Mask gives you all the answers.
You may be wondering why we just went through all that work to get our IP address into binary. The reason is so that we can take the binary IP and the binary mask, and AND them together. What does AND mean you say? Consider this AND truth table.
All it means to AND two binary numbers together is two compare their bit values at each position to arrive at a final value. In the diagram above we are anding together the top row and the middle row. The last row is the final anded value. So 0 and 0 = 0, 0 and 1 = 0, 1 and 0 = 0, and finally 1 and 1 = 1.
Calculate Network Address
To find the Network Address, all you need to do is AND the complete binary address with the complete binary subnet mask. Converting the subnet mask to binary is easier than converting the IP address because subnet masks are simply a string of bits set of a particular length. You may have heard of having a 24bit mask. This means your decimal equivalent is 255.255.255.0. We know this because if all bits are set in an 8 bit binary number, then the max value is 255. What if you have a 25bit mask? In that case it is 255.255.255.128. So back to the original question, what network does the IP address of 192.168.10.10 live on? Let’s AND the IP and Mask to find out.
The top row is the binary equivalent of 192.168.10.10 and the middle row is the equivalent of 255.255.255.0. The last row contains the result of anding them together. Great! That last row is the Network Address that 192.168.10.10 is a part of. We’ll need to convert it from binary to decimal to make it easier for us to read. So far we have been calculating from decimal to binary, but going from binary to decimal is pretty straight forward. All we need to do is break up the 32 bit binary address into groups of 8 and add up the value of each bit that is set.
Perfect! This means that 192.168.10.10 lives on the 192.168.10.0 network.
Calculate First Available Host IP
To calculate the first available host IP address you can use on this network, you must first determine how many host bits there are. This is very easy. The host bits are any bits that are set to 0 in the binary mask. So 255.255.255.0 is 11111111111111111111111100000000 in binary. Count how many zeroes there are. In this case we have 8 host bits. Now, all you need to do is take the Network Address in binary, and set the 32nd (or last) bit to 1.
Sweet! Our Network is 192.168.10.0, and our First Available Host is 192.168.10.1.
Calculate Last Available Host IP
To calculate the last available host IP, you simply take all the host bits of the Network Address and set them to 1. Then set the very last bit to 0.
Calculate Broadcast Address
To calculate the broadcast address of the network we are dealing with, all you have to do is take the Network Address we had calculated and set all of the host bits to 1. So we know that we have 8 host bits, so let’s set the last 8 bits of the Network Address to 1 to find our Broadcast Address.
Awesome! Given an IP address of 192.168.10.10 and a Subnet Mask of 255.255.255.0, we were able to calculate the Network address as 192.168.10.0, the First Host as 192.168.10.1, the Last Host as 192.168.10.254, and the Broadcast Address as 192.168.10.255.
Now, instead of having to do these manual calculations everytime, just make use of the awesome VueJS Powered CIDR Subnet Calculator and make things easy!
You can download the source code of this Vue.js Example Application if you’d like to check it out.
vue_html_template
vuejs_subnet_calculator
Vue.js Example Application Summary
In this tutorial we built a really cool subnet calculator. Specifically, this is a CIDR (Classless Inter-Domain Routing) subnet calculator. By using CIDR, organizations can make more flexible use of their available IP address space. Thanks to NAT or Network Address Translation and CIDR, IP version 4 will be in use for a long time to come.
