IPv4 Subnet Calculator and Network Visualizer

Subnetting is pure binary arithmetic, yet most students practice it with online calculators that show only the final answer and hide the method. In a viva, "what is the broadcast address?" is easy; "show me how you got it" is where candidates stumble. The gap is a tool that exposes every intermediate result — the mask, the wildcard, the AND/OR logic, the network-vs-host bit split — while still giving correct answers fast. SubnetIQ fills that gap as a single-file web app: type an IPv4 address and prefix, and it returns the network address, broadcast address, usable range, host count, address class and private/public classification, alongside a color-coded binary view. A subnet splitter divides any network into 2–32 equal subnets with full per-subnet tables, and a reference view documents common CIDR blocks. Because all computation is client-side JavaScript, it works offline in any lab browser.

1. The dotted-decimal input is parsed and validated octet by octet; the selected prefix length (1–32) is read from the dropdown.
2. The subnet mask is derived by left-shifting 32 ones by (32 − prefix) bits, using 32-bit integer arithmetic in JavaScript.
3. The network address is computed as IP AND mask; the broadcast address as network OR (inverted mask).
4. Usable hosts are counted as 2^(32−prefix) − 2 (with /31 and /32 handled as special cases), and the first/last usable addresses are derived from the network and broadcast.
5. The 32-bit binary string is rendered with per-bit spans, coloring the first "prefix" bits as network and the rest as host.
6. The splitter takes a base network and subnet count, computes the new prefix, and enumerates each subnet's network, broadcast and usable range in a table.

Tech stack:

• HTML5, CSS3 (single-file app, no frameworks)
• Vanilla JavaScript (bitwise subnet engine)
• URL-hash view routing (calculator / splitter / reference)
• No backend, no dependencies — runs offline

• [Live subnet calculator] Enter any IPv4 address and CIDR prefix (1–32); network, broadcast, first/last usable host, wildcard mask and usable-host count update as you type, with input validation.
• [Binary network/host breakdown] The full 32-bit address rendered bit-by-bit with network bits in blue and host bits in amber, so the masking logic is visible, not hidden.
• [Address classification] Automatic class A–E detection plus private (RFC 1918) vs public flagging, with special ranges (loopback, link-local, multicast) documented in the reference view.
• [Subnet splitter] Split any network into 2, 4, 8, 16 or 32 equal subnets; the tool borrows the minimum host bits and lists every subnet's network, broadcast and usable range.
• [CIDR quick-reference table] Common prefixes with mask, wildcard, usable hosts and typical use, generated from the same engine as the calculator so the two can never disagree.
• [Usable-range visualizer] A range bar showing where the usable host range sits between the network and broadcast addresses.
• [Zero-setup delivery] One HTML file, no frameworks, no build step, no server — runs from a pen drive in any modern browser.

• Complete single-file web app (calculator, splitter, reference views)
• Documented JavaScript subnet engine (bitwise functions explained line by line)
• Project report PDF (background, binary subnetting theory, methodology, screenshots)
• PPT presentation for final review
• Viva Q&A preparation document (masking, AND/OR logic, CIDR, VLSM concepts)
• User guide for running and demonstrating the app