Subnet — IPv4 & IPv6 Subnet Calculator

A professional, fully-featured subnet calculator with a warm brown & beige design theme. Supports both IPv4 (32-bit) and IPv6 (128-bit) address families in a clean, responsive interface built with pure HTML, CSS, and JavaScript — no frameworks, no dependencies.

Features

Design & Interface

• Brown & Beige Color Theme — warm, rich tones with Playfair Display serif headings and Source Code Pro monospace output
• Fully Responsive — works perfectly on desktop, tablet, and mobile
• Smooth Animations — card reveals, slide-in transitions, and hover effects
• Click-to-Copy — click any result value to instantly copy it to your clipboard
• Copy Toast Notification — subtle feedback confirmation when a value is copied
• Calculation Counter — tracks how many calculations you have run, saved via localStorage

IPv4 Calculator

• Enter any valid IPv4 address with CIDR notation (0–32)
• Interactive slider + number input, both stay in sync
• Results include:
  • Network address
  • Broadcast address
  • Subnet mask (dotted decimal)
  • Wildcard mask
  • First and last usable host addresses
  • Total address count and usable host count
  • Host utilization progress bar
  • Full binary representation of IP and mask
  • IP class (A / B / C / D / E)
  • Network type (Private, Public, Loopback, Link-Local, etc.)
  • CIDR notation and host bit count

IPv6 Calculator

• Accepts full or compressed IPv6 addresses (e.g. 2001:db8::1)
• Prefix length slider from 0 to 128
• Results include:
  • Expanded (full 128-bit) address
  • Network prefix
  • Prefix mask
  • First and last addresses in the subnet
  • Total address count (human-readable for large values)
  • Binary representation (first 64 bits and last 64 bits)
  • Address type classification (Global Unicast, Link-Local, Multicast, Loopback, etc.)
  • Scope (Global, Link, Site, Interface, etc.)
  • CIDR notation and host bit count

Getting Started

Run Locally

1. Download or clone all four files into the same folder:

   index.html
   styles.css
   script.js
   README.md
   

2. Open index.html in any modern browser
3. No build step, no server, no dependencies needed

Deploy to GitHub Pages

1. Create a new GitHub repository (e.g. subnet-calculator)
2. Upload all three files (index.html, styles.css, script.js)
3. Go to Settings → Pages
4. Set source to main branch, root folder
5. Your site will be live at https://your-username.github.io/subnet-calculator/

How to Use

IPv4

1. Click the IPv4 tab (active by default)
2. Type an IPv4 address into the IP field (e.g. 192.168.1.0)
3. Drag the CIDR slider or type a prefix length (0–32)
4. Click Calculate Network or press Enter
5. Results appear in four cards below

IPv6

1. Click the IPv6 tab
2. Type a valid IPv6 address (e.g. 2001:db8:: or fe80::1)
3. Set the prefix length using the slider or number field (0–128)
4. Click Calculate Network or press Enter
5. Results appear in four cards below

Tip: Click on any result value to copy it to your clipboard.

Example Inputs

IPv4 Examples

IPv6 Examples

File Structure

subnet-calculator/
├── index.html    ← Full page structure, both IPv4 and IPv6 panels
├── styles.css    ← Brown & beige theme, layout, responsive styles
├── script.js     ← All calculation logic for IPv4 and IPv6
└── README.md     ← This file

Technology Stack

• HTML5 — semantic markup, accessible form elements
• CSS3 — custom properties, CSS Grid, Flexbox, keyframe animations
• JavaScript (ES6+) — pure vanilla JS, no libraries or frameworks
• Google Fonts — Playfair Display, Source Code Pro, Lato
• localStorage — persists calculation counter across sessions
• Clipboard API — click-to-copy on all result values

Customization

Change Accent Color

Open styles.css and edit the root variables:

:root {
  --brown-700: #5c3317;  /* button background */
  --brown-600: #7a4520;  /* hover state */
  --amber:     #c97d2a;  /* progress bar */
}

Browser Support

The Clipboard API (used for click-to-copy) requires either a secure context (HTTPS) or localhost. Everything else works on plain HTTP as well.

Troubleshooting

Copy not working?
The Clipboard API needs HTTPS or localhost. If you open the file directly via file://, copy may not work in some browsers. Serve it locally with a simple HTTP server or deploy to GitHub Pages.

Slider and number input out of sync?
Both inputs call syncV4() or syncV6() on every change, so they should always stay in sync. If you notice a discrepancy, refresh the page.

IPv6 address not recognized?
Make sure you are using valid colon-hex notation. Compressed forms like ::1, fe80::, and 2001:db8::abcd are all supported. Mixed IPv4/IPv6 notation (e.g. ::ffff:192.168.1.1) is recognized as IPv4-Mapped.

Planned Additions

• VLSM (Variable Length Subnet Masking) tool
• Subnet split / divide calculator
• Calculation history panel
• Export results to PDF or CSV
• IPv6 address type reference guide
• Offline support via Service Worker

Author

[Sukaina Seerat]

• Cisco NetAcad Network Basics Certified
• GitHub: [https://github.com/bugfixbabe]
• LinkedIn: [Your LinkedIn URL]

License

Open source — free to use, modify, and share for personal and commercial projects.