Back to Projects
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 comprehensive 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.
Completed2 months (October 2024 - November 2024)2
Technologies
HTML5CSS3Vanilla JavaScriptjsPDFjsPDF AutoTableVercel
Project Overview
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.
Challenges
The main challenge was creating an educational tool that balances simplicity with comprehensive 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.
Solutions
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 comprehensive 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.
Key Features
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