DEV Community

Alaa Mekibes
Alaa Mekibes

Posted on

I Built an IPv4 Subnet Calculator with Vanilla JS and OOP

#ipv4 #website #javascript #oop

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
*/
Enter fullscreen mode Exit fullscreen mode

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:

  1. Parse the input: split the CIDR string (198.51.100.7/18) into the IP octets and the prefix length.
  2. 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.
  3. Build the subnet mask: set the first n bits to 1 and the rest to 0. So /18 gives 255.255.192.0.
  4. Build the wildcard mask: it's just the reverse of the subnet mask, subtract each octet from 255. So 255.255.192.0 becomes 0.0.63.255.
  5. Get the network address: keep the network part of the IP, and set all host bits to 0.
  6. Get the broadcast address: keep the network part, but set all host bits to 1 instead.
  7. 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.x through 172.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.x through 239.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, and 198.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 🌐

Top comments (0)