Subnetting is one of those networking topics that sounds simple until you actually have to calculate a network address, broadcast address, and usable host range by hand. So I built a tool to do it for me, and along the way used it to practice Object-Oriented Programming in plain JavaScript: the IPv4 Subnet Calculator.
No frameworks, no libraries. Just HTML, CSS, and JavaScript classes, running entirely in the browser.
What it does
You give it an IP address in CIDR notation, something like 198.51.100.7/18, and it gives you back:
- Network address
- Broadcast address
- Subnet mask
- Wildcard mask
- First and last usable host
- Total usable hosts
- Both decimal and binary formats
- The IP address type (private, public, loopback, and so on)
You can also export the result as a PDF if you need to save or share it.
Why OOP for a calculator?
Instead of writing one big function that does everything, I structured the logic around classes:
class IpAddress {} // Base class for IP address operations
class NetworkComponents extends IpAddress {}
/*
- Handles common network components
- Calculates network address
- Handles subnet mask operations
- Calculates wildcard mask
- Calculates broadcast address
- Determines first/last usable hosts
*/
IpAddress handles the basics, parsing the IP, converting between decimal and binary. NetworkComponents extends it and adds all the subnetting logic on top. This kept things organized: if I needed to fix how the broadcast address was calculated, I knew exactly where to look, without touching the parsing code.
How the actual calculation works
Here's the logic, explained simply, step by step:
-
Parse the input: split the CIDR string (
198.51.100.7/18) into the IP octets and the prefix length. - Convert to binary: turn the IP into its binary form. The first n bits (based on the prefix) are the network part, the rest are the host part.
-
Build the subnet mask: set the first n bits to
1and the rest to0. So/18gives255.255.192.0. -
Build the wildcard mask: it's just the reverse of the subnet mask, subtract each octet from
255. So255.255.192.0becomes0.0.63.255. -
Get the network address: keep the network part of the IP, and set all host bits to
0. -
Get the broadcast address: keep the network part, but set all host bits to
1instead. -
Count the hosts:
2^(number of host bits) - 2. The minus 2 accounts for the network and broadcast addresses, which can't be assigned to devices.
Detecting the IP address type
One feature I added on top of basic subnetting is a whichType() method that classifies the IP itself, not just the subnet. It checks the address against the standard ranges in order:
-
Private:
10.x.x.x,172.16.x.xthrough172.31.x.x,192.168.x.x -
Loopback:
127.x.x.x, used for testing on your own machine -
Link-local:
169.254.x.x, used when a device can't get an IP automatically -
Multicast:
224.x.x.xthrough239.x.x.x, used for group communication like streaming -
Broadcast:
255.255.255.255 -
Reserved: a handful of special ranges set aside for documentation, testing, or future use, like
0.x.x.x,192.0.2.x, and198.51.100.x -
Public: if none of the above match, it's a normal internet-facing address, like
8.8.8.8
What I learned
- How subnetting actually works at the bit level, instead of just plugging numbers into an online calculator
- How to structure a small project with real class inheritance in vanilla JS, without reaching for a framework
- How to convert between decimal and binary and manipulate bits directly in JavaScript
- How networking concepts like private ranges, loopback, and multicast map to real address rules
- How to add a simple PDF export using nothing but the browser's own print dialog
Try it yourself
If you're learning subnetting, I'd honestly recommend building your own calculator instead of just using one. Working through the binary conversion, the mask logic, and the address classification by hand is what actually made the concepts stick for me.
Check out the code here: github.com/alaa-mekibes/IPv4-calculator 🌐
