nielsdoorn/index.html

## index.html
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Subnetmask calculator</title>
	<link href="style.css" rel="stylesheet">
	<script src="script.js"></script>
	<script src="subnetmaskCalculator.js"></script>
<body>
	<div id="page">
		<h2>Parameters</h2>
		<form>
			<ul>
				<li>
					<label for="A">Klasse A</label>
					<input type="radio" name="class" value="A" id="A" >
				</li>
				<li>
					<label for="B">Klasse B</label>
					<input type="radio" name="class" value="B" id="B">
				</li>
				<li>
					<label for="C">Klasse C</label>
					<input type="radio" name="class" value="C" id="C" checked="true">
				</li>
				<li>
					<label for="ones">Aantal enen: </label>
					<input type="range" min="1" max="30" name="ones">
					<div id="ones"></div>
				</li>
			</ul>
		</form>
		<h2>Subnetmasker</h2>
		<div id="subnetmaskbinairy" class="result"></div>
		<div id="subnetmaskdecimal" class="result"></div>
		<div id="subnets" class="result"></div>
		<div id="hostspersubnet" class="result"></div>
		<h2>IP Reeksen</h2>
		<ul id="ranges">
		</ul>
	</div>

</body>
</html>

## script.js
if (window !== undefined) {
	window.onload = init;
}

var onesSlider;
var networkClass;

function init() {
	onesSlider = document.querySelector("input[name=ones]");
	onesSlider.onchange = calculateSubnetMasks;
	[].forEach.call( document.querySelectorAll('input[name="class"]'), function(elem){
   	 elem.onchange = changeClass;
	});
	changeClass();
}

function changeClass() {
	networkClass = document.querySelector("input[name=class]:checked");
	if (networkClass.value === 'A') {
		onesSlider.min = 8;
		onesSlider.value = 8;
	} else if (networkClass.value === 'B') {
		onesSlider.min = 16;
		onesSlider.value = 16;
	} else if (networkClass.value === 'C') {
		onesSlider.min = 24;
		onesSlider.value = 24;
	}
	calculateSubnetMasks(parseInt(onesSlider.value));
}

function calculateSubnetMasks() {
	var ones = parseInt(onesSlider.value);
	var nwClass = document.querySelector("input[name=class]:checked").value;
	var onesString = buildBinString(ones);
	var decimalString = buildDecimalString(ones);
	var subnets = calculateNumberOfSubnets(nwClass, ones);
	var hosts = calculateNumberOfHosts(ones)-2;
	document.querySelector("#subnetmaskbinairy").innerHTML = onesString;
	document.querySelector("#subnetmaskdecimal").innerHTML = decimalString + " /" + ones;
	document.querySelector("#subnets").innerHTML = subnets;
	document.querySelector("#hostspersubnet").innerHTML = hosts;
	document.querySelector("#ones").innerHTML = ones;
	printHostAddresses(nwClass, subnets, hosts);
}

function printHostAddresses(nwClass, subnets, hosts) {
	var ranges = document.querySelector("#ranges");
	ranges.innerHTML = "";
	for (var subnet=0; subnet < subnets; subnet++) {
		var first = calculateHostPartOfIpAddress(nwClass, ones, subnet*hosts+1+subnet*2);
		var last = calculateHostPartOfIpAddress(nwClass, ones, subnet*hosts+hosts+subnet*2);

		var range = document.createElement("li");
		range.innerHTML = "Subnet: "+(subnet+1)+" eerste IP: "+first+" laatste IP: "+last;
		ranges.appendChild(range);
		if (subnets > 10 && subnet == 3) {
			subnet = subnets - 5;
			var etc = document.createElement("li");
			etc.innerHTML = "...";
			ranges.appendChild(etc);
		}
	}
}

## style.css
* {
	box-sizing: border-box;
}

html, body {
	min-height: 100%;
}

body {
	font-family: sans-serif;
	color: #eee;
	font-size: 1.2em;
}

ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

#page {
	width: 800px;
	margin: 0 auto;
	background: linear-gradient(90deg, #99f, #08f);
	padding: 0.5em;
}

form {
	display: inline-block;
}

label {
	display: inline-block;
	width: 200px;
	color: #333;
}

input[type=range] {
	width: 200px;
}

.result {
	line-height: 1.4em;
}

#ones {
	display: inline-block;
}

div:before {
	color: #333;
	width: 200px;
	display: inline-block;
}

#subnetmaskdecimal:before {
	content: 'Subnetmask: ';
}

#subnetmaskbinairy:before {
	content: 'Binair: ';
}

#subnets:before {
	content: 'Aantal subnetten: ';
}

#hostspersubnet:before {
	content: 'Hosts per subnet: ';
}

## subnetmaskCalculator.js
function buildBinString(numOfOnes) {
	var onesString = "";
	for (var i = 0; i < 32; i++) {
		if (i < numOfOnes) {
			onesString += "1";
		} else {
			onesString += "0";
		}
		if ((i+1) % 8 === 0) {
			onesString += ".";
		}
	}
	return onesString.substring(0, onesString.length-1);
}

function buildDecimalString(numOfOnes) {
	var decimalString = "";
	var onesStringUnformatted = "";
	for (var i = 0; i < 32; i++) {
		if (i < numOfOnes) {
			onesStringUnformatted += "1";
		} else {
			onesStringUnformatted += "0";
		}
		if ((i+1) % 8 === 0) {
			decimalString += parseInt(onesStringUnformatted.substring(i-7, i+1), 2)+".";
		}
	}
	return decimalString.substring(0, decimalString.length-1);;
}

function calculateNumberOfSubnets(nwClass, ones) {
	var subnets = -1;
	if (nwClass === 'A') {
		subnets = Math.pow(2, (ones-8));
	} else if (nwClass === 'B') {
		subnets = Math.pow(2, (ones-16));
	} else if (nwClass === 'C') {
		subnets = Math.pow(2, (ones-24));
	}
	return subnets;
}

function calculateNumberOfHosts(ones) {
	var hosts = Math.pow(2, 32-ones);
	return hosts;
}

function calculateHostPartOfIpAddress(nwClass, subnetmask, hostnumber) {
	var result = "";
	var hostBits = 8;
	var octets = 4;
	if (nwClass === 'A') {
		hostBits = 24;
	} else if (nwClass === 'B') {
		hostBits = 16;
	}
	var bin = hostnumber.toString(2);
	while (bin.length % 8 !== 0 || bin.length < hostBits) {
		bin = "0"+bin;
	}
	for (var i=bin.length; i > 0; i-=8) {
		var octet = bin.substring(i-8, i);
		result = "."+parseInt(octet, 2) + result;
		octets--;
	}
	while (octets > 0) {
		result = ".xxx."+result.substring(1, result.length);
		octets--;
	}
	return result.substring(1, result.length);
}
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Subnetmask calculator</title>
	<link href="style.css" rel="stylesheet">
	<script src="script.js"></script>
	<script src="subnetmaskCalculator.js"></script>
	<body>
	<div id="page">
	<h2>Parameters</h2>
	<form>
	<ul>
	<li>
	<label for="A">Klasse A</label>
	<input type="radio" name="class" value="A" id="A" >
	</li>
	<li>
	<label for="B">Klasse B</label>
	<input type="radio" name="class" value="B" id="B">
	</li>
	<li>
	<label for="C">Klasse C</label>
	<input type="radio" name="class" value="C" id="C" checked="true">
	</li>
	<li>
	<label for="ones">Aantal enen: </label>
	<input type="range" min="1" max="30" name="ones">
	<div id="ones"></div>
	</li>
	</ul>
	</form>
	<h2>Subnetmasker</h2>
	<div id="subnetmaskbinairy" class="result"></div>
	<div id="subnetmaskdecimal" class="result"></div>
	<div id="subnets" class="result"></div>
	<div id="hostspersubnet" class="result"></div>
	<h2>IP Reeksen</h2>
	<ul id="ranges">
	</ul>
	</div>

	</body>
	</html>
	if (window !== undefined) {
	window.onload = init;
	}

	var onesSlider;
	var networkClass;

	function init() {
	onesSlider = document.querySelector("input[name=ones]");
	onesSlider.onchange = calculateSubnetMasks;
	[].forEach.call( document.querySelectorAll('input[name="class"]'), function(elem){
	elem.onchange = changeClass;
	});
	changeClass();
	}

	function changeClass() {
	networkClass = document.querySelector("input[name=class]:checked");
	if (networkClass.value === 'A') {
	onesSlider.min = 8;
	onesSlider.value = 8;
	} else if (networkClass.value === 'B') {
	onesSlider.min = 16;
	onesSlider.value = 16;
	} else if (networkClass.value === 'C') {
	onesSlider.min = 24;
	onesSlider.value = 24;
	}
	calculateSubnetMasks(parseInt(onesSlider.value));
	}

	function calculateSubnetMasks() {
	var ones = parseInt(onesSlider.value);
	var nwClass = document.querySelector("input[name=class]:checked").value;
	var onesString = buildBinString(ones);
	var decimalString = buildDecimalString(ones);
	var subnets = calculateNumberOfSubnets(nwClass, ones);
	var hosts = calculateNumberOfHosts(ones)-2;
	document.querySelector("#subnetmaskbinairy").innerHTML = onesString;
	document.querySelector("#subnetmaskdecimal").innerHTML = decimalString + " /" + ones;
	document.querySelector("#subnets").innerHTML = subnets;
	document.querySelector("#hostspersubnet").innerHTML = hosts;
	document.querySelector("#ones").innerHTML = ones;
	printHostAddresses(nwClass, subnets, hosts);
	}

	function printHostAddresses(nwClass, subnets, hosts) {
	var ranges = document.querySelector("#ranges");
	ranges.innerHTML = "";
	for (var subnet=0; subnet < subnets; subnet++) {
	var first = calculateHostPartOfIpAddress(nwClass, ones, subnethosts+1+subnet2);
	var last = calculateHostPartOfIpAddress(nwClass, ones, subnethosts+hosts+subnet2);

	var range = document.createElement("li");
	range.innerHTML = "Subnet: "+(subnet+1)+" eerste IP: "+first+" laatste IP: "+last;
	ranges.appendChild(range);
	if (subnets > 10 && subnet == 3) {
	subnet = subnets - 5;
	var etc = document.createElement("li");
	etc.innerHTML = "...";
	ranges.appendChild(etc);
	}
	}
	}
	* {
	box-sizing: border-box;
	}

	html, body {
	min-height: 100%;
	}

	body {
	font-family: sans-serif;
	color: #eee;
	font-size: 1.2em;
	}

	ul {
	list-style: none;
	padding: 0;
	margin: 0;
	}

	#page {
	width: 800px;
	margin: 0 auto;
	background: linear-gradient(90deg, #99f, #08f);
	padding: 0.5em;
	}

	form {
	display: inline-block;
	}

	label {
	display: inline-block;
	width: 200px;
	color: #333;
	}

	input[type=range] {
	width: 200px;
	}

	.result {
	line-height: 1.4em;
	}

	#ones {
	display: inline-block;
	}

	div:before {
	color: #333;
	width: 200px;
	display: inline-block;
	}

	#subnetmaskdecimal:before {
	content: 'Subnetmask: ';
	}

	#subnetmaskbinairy:before {
	content: 'Binair: ';
	}

	#subnets:before {
	content: 'Aantal subnetten: ';
	}

	#hostspersubnet:before {
	content: 'Hosts per subnet: ';
	}
	function buildBinString(numOfOnes) {
	var onesString = "";
	for (var i = 0; i < 32; i++) {
	if (i < numOfOnes) {
	onesString += "1";
	} else {
	onesString += "0";
	}
	if ((i+1) % 8 === 0) {
	onesString += ".";
	}
	}
	return onesString.substring(0, onesString.length-1);
	}

	function buildDecimalString(numOfOnes) {
	var decimalString = "";
	var onesStringUnformatted = "";
	for (var i = 0; i < 32; i++) {
	if (i < numOfOnes) {
	onesStringUnformatted += "1";
	} else {
	onesStringUnformatted += "0";
	}
	if ((i+1) % 8 === 0) {
	decimalString += parseInt(onesStringUnformatted.substring(i-7, i+1), 2)+".";
	}
	}
	return decimalString.substring(0, decimalString.length-1);;
	}

	function calculateNumberOfSubnets(nwClass, ones) {
	var subnets = -1;
	if (nwClass === 'A') {
	subnets = Math.pow(2, (ones-8));
	} else if (nwClass === 'B') {
	subnets = Math.pow(2, (ones-16));
	} else if (nwClass === 'C') {
	subnets = Math.pow(2, (ones-24));
	}
	return subnets;
	}

	function calculateNumberOfHosts(ones) {
	var hosts = Math.pow(2, 32-ones);
	return hosts;
	}

	function calculateHostPartOfIpAddress(nwClass, subnetmask, hostnumber) {
	var result = "";
	var hostBits = 8;
	var octets = 4;
	if (nwClass === 'A') {
	hostBits = 24;
	} else if (nwClass === 'B') {
	hostBits = 16;
	}
	var bin = hostnumber.toString(2);
	while (bin.length % 8 !== 0 \|\| bin.length < hostBits) {
	bin = "0"+bin;
	}
	for (var i=bin.length; i > 0; i-=8) {
	var octet = bin.substring(i-8, i);
	result = "."+parseInt(octet, 2) + result;
	octets--;
	}
	while (octets > 0) {
	result = ".xxx."+result.substring(1, result.length);
	octets--;
	}
	return result.substring(1, result.length);
	}