SubnetCalc - Educational Subnet Calculator
Built an educational subnet calculator that combines functionality with pedagogy. The application provides subnet calculations with detailed explanations of the methods used, including binary visualizations. Users can input IP addresses and subnet masks in either decimal (255.255.255.0) or CIDR (/24) notation and receive subnet information including subnet address, usable IP ranges, broadcast address, and host count. Features a modern, responsive design with dark mode support and PDF export capabilities.
Context
SubnetCalc is a lightweight, fully client-side web application that makes subnet calculations transparent and understandable. The application calculates subnet address, first and last usable IP addresses, broadcast address, next subnet, and number of available hosts. Each result card includes hover-activated detailed explanations showing binary representations and calculation methods, helping users understand the 'how' and 'why' behind each calculation. The tool supports both decimal notation and CIDR format, includes robust input validation, and features a modern purple gradient design with smooth animations. Version 1.1 adds dark mode with localStorage persistence and PDF export functionality using jsPDF library. The application requires no installation or backend - it works entirely in the browser and can function offline once loaded.
The problem
The main challenge was creating an educational tool that balances simplicity with learning. Making subnet calculations understandable required visualizing binary operations and logical AND/OR operations in an accessible way. Implementing support for both CIDR and decimal notation formats required careful input validation and conversion logic. Ensuring the application remained lightweight and fully client-side while adding features like dark mode persistence and PDF generation. Creating a responsive design that works seamlessly across all devices while maintaining readability of technical networking information. Providing detailed explanations without overwhelming users or cluttering the interface.
Architecture & decisions
Implemented a pure vanilla JavaScript solution with no framework dependencies, keeping the application lightweight and fast. Created an intuitive hover-based explanation system that reveals binary visualizations and calculation methods on demand. Built a flexible input parser that handles both CIDR (/24) and decimal (255.255.255.0) mask formats with validation. Used CSS custom properties for theme switching, enabling smooth transitions between light and dark modes with localStorage persistence. Integrated jsPDF and jsPDF AutoTable libraries for professional PDF export with formatted tables and styling. Designed a card-based layout with smooth animations and transitions for an engaging user experience. Applied responsive design principles with Flexbox and Grid to ensure usability across all screen sizes.
What it does
- Subnet Address Calculation
- Usable IP Range Detection
- Broadcast Address Calculation
- Host Count Calculation
- CIDR Notation Support
- Decimal Mask Support
- Binary Visualization\
- Educational Explanations
- Dark Mode
- PDF Export
- Responsive Design
- Input Validation
- Offline Capable