.subnet-calculator-container {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
max-width: 800px;
margin: 20px auto;
padding: 25px;
border: 1px solid #e0e0e0;
border-radius: 10px;
background-color: #fdfdfd;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.subnet-calculator-container h2 {
color: #2c3e50;
text-align: center;
margin-bottom: 25px;
font-size: 1.8em;
border-bottom: 2px solid #3498db;
padding-bottom: 10px;
}
.subnet-calculator-container .input-group {
margin-bottom: 18px;
display: flex;
flex-direction: column;
}
.subnet-calculator-container label {
display: block;
margin-bottom: 8px;
font-weight: bold;
color: #34495e;
font-size: 1.05em;
}
.subnet-calculator-container input[type="text"] {
width: calc(100% – 22px);
padding: 12px;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 1.1em;
box-sizing: border-box;
transition: border-color 0.3s ease;
}
.subnet-calculator-container input[type="text"]:focus {
border-color: #3498db;
outline: none;
box-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
}
.subnet-calculator-container button {
display: block;
width: 100%;
padding: 14px 20px;
background-color: #3498db;
color: white;
border: none;
border-radius: 6px;
font-size: 1.2em;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.2s ease;
margin-top: 20px;
}
.subnet-calculator-container button:hover {
background-color: #2980b9;
transform: translateY(-2px);
}
.subnet-calculator-container button:active {
transform: translateY(0);
}
.subnet-calculator-container .result-section {
margin-top: 30px;
padding-top: 25px;
border-top: 1px solid #eee;
}
.subnet-calculator-container .result-section h3 {
color: #2c3e50;
margin-bottom: 15px;
font-size: 1.5em;
text-align: center;
}
.subnet-calculator-container .result-item {
display: flex;
justify-content: space-between;
padding: 10px 0;
border-bottom: 1px dashed #eee;
font-size: 1.1em;
}
.subnet-calculator-container .result-item:last-child {
border-bottom: none;
}
.subnet-calculator-container .result-label {
font-weight: bold;
color: #34495e;
}
.subnet-calculator-container .result-value {
color: #2c3e50;
text-align: right;
flex-grow: 1;
padding-left: 15px;
word-break: break-all; /* For long binary strings */
}
.subnet-calculator-container .error-message {
color: #e74c3c;
margin-top: 15px;
text-align: center;
font-weight: bold;
font-size: 1.1em;
}
.subnet-calculator-container .article-content {
margin-top: 40px;
padding-top: 30px;
border-top: 1px solid #e0e0e0;
line-height: 1.7;
color: #333;
}
.subnet-calculator-container .article-content h3 {
color: #2c3e50;
font-size: 1.6em;
margin-bottom: 15px;
border-bottom: 1px solid #ccc;
padding-bottom: 8px;
}
.subnet-calculator-container .article-content h4 {
color: #34495e;
font-size: 1.3em;
margin-top: 25px;
margin-bottom: 10px;
}
.subnet-calculator-container .article-content p {
margin-bottom: 15px;
}
.subnet-calculator-container .article-content ul {
list-style-type: disc;
margin-left: 20px;
margin-bottom: 15px;
}
.subnet-calculator-container .article-content li {
margin-bottom: 8px;
}
.subnet-calculator-container .article-content code {
background-color: #eef;
padding: 2px 5px;
border-radius: 4px;
font-family: 'Courier New', Courier, monospace;
font-size: 0.95em;
}
function calculateSubnet() {
var ipAddressStr = document.getElementById("ipAddress").value.trim();
var subnetMaskStr = document.getElementById("subnetMask").value.trim();
var errorMessageDiv = document.getElementById("errorMessage");
var resultDiv = document.getElementById("result");
errorMessageDiv.style.display = "none";
resultDiv.style.display = "none";
// Helper function to convert dotted decimal to 32-bit integer
function ipToLong(ip) {
var parts = ip.split('.');
if (parts.length !== 4) return NaN;
var longIp = 0;
for (var i = 0; i < 4; i++) {
var octet = parseInt(parts[i], 10);
if (isNaN(octet) || octet 255) return NaN;
longIp = (longIp <>> 0; // Ensure unsigned 32-bit
}
// Helper function to convert 32-bit integer to dotted decimal
function longToIp(longIp) {
return ((longIp >>> 24) & 0xFF) + '.' +
((longIp >>> 16) & 0xFF) + '.' +
((longIp >>> 8) & 0xFF) + '.' +
(longIp & 0xFF);
}
// Helper function to convert 32-bit integer to padded binary string
function longToBinary(longIp) {
return (longIp >>> 0).toString(2).padStart(32, '0').match(/.{1,8}/g).join('.');
}
var ipLong = ipToLong(ipAddressStr);
var subnetMaskLong = ipToLong(subnetMaskStr);
if (isNaN(ipLong)) {
errorMessageDiv.textContent = "Invalid IP Address format. Please use dotted decimal (e.g., 192.168.1.10).";
errorMessageDiv.style.display = "block";
return;
}
if (isNaN(subnetMaskLong)) {
errorMessageDiv.textContent = "Invalid Subnet Mask format. Please use dotted decimal (e.g., 255.255.255.0).";
errorMessageDiv.style.display = "block";
return;
}
// Validate subnet mask contiguity (all 1s followed by all 0s)
var binaryMask = (subnetMaskLong >>> 0).toString(2).padStart(32, '0');
if (binaryMask.indexOf('0') !== -1 && binaryMask.indexOf('1', binaryMask.indexOf('0')) !== -1) {
errorMessageDiv.textContent = "Invalid Subnet Mask: The mask must consist of contiguous 1s followed by contiguous 0s.";
errorMessageDiv.style.display = "block";
return;
}
// Calculate CIDR
var cidr = 0;
var tempMask = subnetMaskLong;
while ((tempMask & 0x80000000) !== 0) { // Check if the most significant bit is 1
cidr++;
tempMask = (tempMask <>> 0; // Left shift and ensure unsigned
}
if (cidr === 0 && subnetMaskLong !== 0) { // Handle case where mask is not 0.0.0.0 but CIDR is 0 (e.g. 128.0.0.0)
// This check is for masks like 0.0.0.0 which has CIDR 0.
// If subnetMaskLong is not 0, but cidr is 0, it means the first bit is 0, which is fine.
// The previous loop correctly counts leading 1s.
// The contiguity check above should catch invalid masks like 0.255.0.0
}
var networkAddressLong = (ipLong & subnetMaskLong) >>> 0;
var broadcastAddressLong = (networkAddressLong | (~subnetMaskLong)) >>> 0;
var networkAddress = longToIp(networkAddressLong);
var broadcastAddress = longToIp(broadcastAddressLong);
var firstUsableHost = "N/A";
var lastUsableHost = "N/A";
var totalHosts = Math.pow(2, (32 – cidr));
var usableHosts = 0;
if (totalHosts > 2) {
firstUsableHost = longToIp((networkAddressLong + 1) >>> 0);
lastUsableHost = longToIp((broadcastAddressLong – 1) >>> 0);
usableHosts = totalHosts – 2;
} else if (totalHosts === 2) { // For /31, /32 subnets
firstUsableHost = "N/A (No usable hosts)";
lastUsableHost = "N/A (No usable hosts)";
usableHosts = 0;
} else if (totalHosts === 1) { // For /32 subnets
firstUsableHost = "N/A (No usable hosts)";
lastUsableHost = "N/A (No usable hosts)";
usableHosts = 0;
}
document.getElementById("networkAddress").textContent = networkAddress;
document.getElementById("broadcastAddress").textContent = broadcastAddress;
document.getElementById("firstUsableHost").textContent = firstUsableHost;
document.getElementById("lastUsableHost").textContent = lastUsableHost;
document.getElementById("totalHosts").textContent = totalHosts;
document.getElementById("usableHosts").textContent = usableHosts;
document.getElementById("cidrNotation").textContent = "/" + cidr;
document.getElementById("ipBinary").textContent = longToBinary(ipLong);
document.getElementById("subnetMaskBinary").textContent = longToBinary(subnetMaskLong);
resultDiv.style.display = "block";
}
Subnet IP Calculator
Subnet Details
Network Address:
Broadcast Address:
First Usable Host:
Last Usable Host:
Total Hosts:
Usable Hosts:
CIDR Notation:
IP Address (Binary):
Subnet Mask (Binary):
Understanding IP Subnetting
IP subnetting is a fundamental concept in computer networking that involves dividing a large network into smaller, more manageable subnetworks (subnets). This practice helps improve network performance, enhance security, and make more efficient use of IP addresses.
What is an IP Address?
An Internet Protocol (IP) address is a numerical label assigned to each device connected to a computer network that uses the Internet Protocol for communication. For IPv4, these addresses are 32-bit numbers, typically represented in dotted-decimal notation (e.g., 192.168.1.10), where each of the four numbers (octets) ranges from 0 to 255.
An IP address consists of two main parts:
- Network Portion: Identifies the specific network to which the device is connected. All devices on the same network share the same network portion.
- Host Portion: Identifies the specific device within that network. Each device on a network must have a unique host portion.
What is a Subnet Mask?
A subnet mask is a 32-bit number that distinguishes the network portion of an IP address from the host portion. Like an IP address, it's usually written in dotted-decimal notation (e.g., 255.255.255.0). In binary, a subnet mask consists of a series of '1's followed by a series of '0's. The '1's indicate the network portion, and the '0's indicate the host portion.
For example, a subnet mask of 255.255.255.0 in binary is 11111111.11111111.11111111.00000000. This means the first 24 bits of an IP address are for the network, and the last 8 bits are for hosts.
What is CIDR Notation?
Classless Inter-Domain Routing (CIDR) is a method for allocating IP addresses and routing IP packets. It's a more flexible alternative to the traditional class-based IP addressing system. In CIDR notation, an IP address is followed by a slash and a number (e.g., 192.168.1.0/24). The number after the slash represents the number of bits in the network portion of the address (which is equivalent to the number of '1's in the subnet mask).
So, /24 is the CIDR equivalent of 255.255.255.0.
Why Subnet?
Subnetting offers several key benefits:
- Improved Network Performance: By reducing the size of broadcast domains, subnetting minimizes unnecessary network traffic, leading to faster communication.
- Enhanced Security: Subnets can isolate different departments or types of traffic, preventing unauthorized access or the spread of malware across the entire network.
- Efficient IP Address Utilization: Subnetting allows for more granular allocation of IP addresses, preventing waste in organizations that don't need a full Class A, B, or C network.
- Easier Management: Smaller, more focused subnets are easier to manage and troubleshoot.
Key Subnet Components Explained
- Network Address: The first address in a subnet. It has all host bits set to '0' and is used to identify the network itself. It cannot be assigned to a host.
- Broadcast Address: The last address in a subnet. It has all host bits set to '1' and is used to send data to all devices within that specific subnet. It cannot be assigned to a host.
- First Usable Host IP: The first IP address in the subnet that can be assigned to a device. It is always one greater than the Network Address.
- Last Usable Host IP: The last IP address in the subnet that can be assigned to a device. It is always one less than the Broadcast Address.
- Total Hosts: The total number of IP addresses available within the subnet, including the network and broadcast addresses. Calculated as
2^(32 - CIDR). - Usable Hosts: The number of IP addresses that can actually be assigned to devices. This is always
Total Hosts - 2(subtracting the network and broadcast addresses).
How to Use the Calculator
Simply enter an IP Address and its corresponding Subnet Mask in dotted-decimal format into the fields above. Click "Calculate Subnet" to instantly see the network address, broadcast address, usable host range, CIDR notation, and binary representations of your IP and subnet mask.
Example:
- IP Address:
192.168.1.10 - Subnet Mask:
255.255.255.0 - The calculator will show that the Network Address is
192.168.1.0, the Broadcast Address is192.168.1.255, and there are 254 usable hosts.