Skip to content

Instantly share code, notes, and snippets.

@kebman

kebman/bitflipper.html

Last active October 7, 2015 09:55
Show Gist options
  • Save kebman/585c1b688847bf8fbf36 to your computer and use it in GitHub Desktop.
Save kebman/585c1b688847bf8fbf36 to your computer and use it in GitHub Desktop.
Download ZIP
A web page showcasing simple flipping of binary bits and the numerical representation of that byte
Raw
bitflipper.html
<!DOCTYPE html>
<html>
<head>
<title>Bits and bytes</title>
<meta charset="utf-8">
<style type="text/css">
#form input {
width:1em;
}
td {
text-align:center;
}
form {
width:14em;
}
#sum {float:right;}
input[type="checkbox"] {
display:none;
}
input[type="checkbox"] + label:before {
display:inline-block;
width:1em; height:1em;
border:1px solid #eee;
text-align:center;
content:'\00a0';
}
input[type="checkbox"]:checked + label:before {
content:'I';
}
</style>
</head>
<body>
<header>
<h1>Bit Flipping</h1>
</header>
<article>
<form id="form">
<table>
<tr><td>8</td><td>7</td><td>6</td><td>5</td><td>4</td><td>3</td><td>2</td><td>1</td><td></td></tr>
<tr>
<td><input type="checkbox" name="bits" id="c0"><label for="c0"></label></td>
<td><input type="checkbox" name="bits" id="c1"><label for="c1"></label></td>
<td><input type="checkbox" name="bits" id="c2"><label for="c2"></label></td>
<td><input type="checkbox" name="bits" id="c3"><label for="c3"></label></td>
<td><input type="checkbox" name="bits" id="c4"><label for="c4"></label></td>
<td><input type="checkbox" name="bits" id="c5"><label for="c5"></label></td>
<td><input type="checkbox" name="bits" id="c6"><label for="c6"></label></td>
<td><input type="checkbox" name="bits" id="c7"><label for="c7"></label></td>
<td id="publish">0</td>
</tr>
<tr><td>128</td><td>64</td><td>32</td><td>16</td><td>8</td><td>4</td><td>2</td><td>1</td><td></td></tr>
</table>
</form>
</article>
</body>
<script>
form.addEventListener('click', function () {
var sum=0;
var bitValues=[128, 64, 32, 16, 8, 4, 2, 1];
for (var i=0; i < form.bits.length; i++) {
if (form.bits[i].checked==true) {
sum+=bitValues[i];
}
}
publish.innerHTML=sum;
});
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment