Skip to content

Commit 45c64ef

Browse files
ChrisO345ChrisO345
authored
created a binary visualiser project
1 parent d35cdd8 commit 45c64ef

File tree

7 files changed

+177
-0
lines changed

7 files changed

+177
-0
lines changed

‎BinaryVisualiser/ChrisO345/assets/css/style.css

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Balsamiq+Sans:wght@400;700&display=swap');
2+
3+
#bin {
4+
background: blue;
5+
}
6+
#hex {
7+
background: fuchsia;
8+
}
9+
#dec {
10+
background: yellow;
11+
}
12+
table, th, td {
13+
border: 5px inset black;
14+
border-collapse: collapse;
15+
text-align: center;
16+
font-size: 50pt;
17+
font-family: 'Balsamiq Sans', cursive;
18+
color: white;
19+
font-weight: 400;
20+
}
21+
.header {
22+
color: black;
23+
font-weight: 700;
24+
font-family: 'Balsamiq Sans', cursive;
25+
text-align: center;
26+
width: 100px;
27+
}

‎BinaryVisualiser/ChrisO345/assets/img/lever_down.png

2.15 KB
Loading

‎BinaryVisualiser/ChrisO345/assets/img/lever_up.png

2.24 KB
Loading

‎BinaryVisualiser/ChrisO345/assets/js/script.js

+105
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
var nought1 = 0;
2+
var nought2 = 0;
3+
var nought3 = 0;
4+
var nought4 = 0;
5+
var nought5 = 0;
6+
var nought6 = 0;
7+
var nought7 = 0;
8+
var nought8 = 0;
9+
10+
function changeLeverOne() {
11+
if (nought1 == 0) {
12+
document.getElementById('firstLever').src = 'assets/img/lever_down.png';
13+
nought1 = 1;
14+
}
15+
else {
16+
document.getElementById("firstLever").src = 'assets/img/lever_up.png';
17+
nought1 = 0;
18+
}
19+
workOut()
20+
}
21+
function changeLeverTwo() {
22+
if (nought2 == 0) {
23+
document.getElementById('secondLever').src = 'assets/img/lever_down.png';
24+
nought2 = 1;
25+
}
26+
else {
27+
document.getElementById("secondLever").src = 'assets/img/lever_up.png';
28+
nought2 = 0;
29+
}
30+
workOut()
31+
}
32+
function changeLeverThree() {
33+
if (nought3 == 0) {
34+
document.getElementById('thirdLever').src = 'assets/img/lever_down.png';
35+
nought3 = 1;
36+
}
37+
else {
38+
document.getElementById("thirdLever").src = 'assets/img/lever_up.png';
39+
nought3 = 0;
40+
}
41+
workOut()
42+
}
43+
function changeLeverFour() {
44+
if (nought4 == 0) {
45+
document.getElementById('fourthLever').src = 'assets/img/lever_down.png';
46+
nought4 = 1;
47+
}
48+
else {
49+
document.getElementById("fourthLever").src = 'assets/img/lever_up.png';
50+
nought4 = 0;
51+
}
52+
workOut()
53+
}
54+
function changeLeverFive() {
55+
if (nought5 == 0) {
56+
document.getElementById('fifthLever').src = 'assets/img/lever_down.png';
57+
nought5 = 1;
58+
}
59+
else {
60+
document.getElementById("fifthLever").src = 'assets/img/lever_up.png';
61+
nought5 = 0;
62+
}
63+
workOut()
64+
}
65+
function changeLeverSix() {
66+
if (nought6 == 0) {
67+
document.getElementById('sixthLever').src = 'assets/img/lever_down.png';
68+
nought6 = 1;
69+
}
70+
else {
71+
document.getElementById("sixthLever").src = 'assets/img/lever_up.png';
72+
nought6 = 0;
73+
}
74+
workOut()
75+
}
76+
function changeLeverSeven() {
77+
if (nought7 == 0) {
78+
document.getElementById('seventhLever').src = 'assets/img/lever_down.png';
79+
nought7 = 1;
80+
}
81+
else {
82+
document.getElementById("seventhLever").src = 'assets/img/lever_up.png';
83+
nought7 = 0;
84+
}
85+
workOut()
86+
}
87+
function changeLeverEight() {
88+
if (nought8 == 0) {
89+
document.getElementById('eighthLever').src = 'assets/img/lever_down.png';
90+
nought8 = 1;
91+
}
92+
else {
93+
document.getElementById("eighthLever").src = 'assets/img/lever_up.png';
94+
nought8 = 0;
95+
}
96+
workOut()
97+
}
98+
function workOut() {
99+
document.getElementById('binary').innerHTML = nought1.toString()+nought2.toString()+nought3.toString()+nought4.toString();
100+
document.getElementById('binary2').innerHTML = nought5.toString()+nought6.toString()+nought7.toString()+nought8.toString();
101+
document.getElementById('hexidecimal').innerHTML = ((nought1*8+nought2*4+nought3*2+nought4*1).toString(16)).toUpperCase();
102+
document.getElementById('hexidecimal2').innerHTML = ((nought5*8+nought6*4+nought7*2+nought8*1).toString(16)).toUpperCase();
103+
document.getElementById('decimal').innerHTML = (nought1*128+nought2*64+nought3*32+nought4*16+nought5*8+nought6*4+nought7*2+nought8*1).toString()
104+
// Add octal at one point???
105+
}

‎BinaryVisualiser/ChrisO345/index.html

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!DOCTYPE html>
2+
<html lang="en" dir="ltr">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Binary</title>
6+
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
7+
</head>
8+
<body>
9+
<table text-align="center">
10+
<tr>
11+
<th class="header">128</th>
12+
<th class="header">64</th>
13+
<th class="header">32</th>
14+
<th class="header">16</th>
15+
<th class="header">8</th>
16+
<th class="header">4</th>
17+
<th class="header">2</th>
18+
<th class="header">1</th>
19+
</tr>
20+
<tr>
21+
<td class="header"><img src="assets/img/lever_up.png" alt="binary lever_up" height="200" width="auto" id="firstLever" onclick="changeLeverOne()"></td>
22+
<td class="header"><img src="assets/img/lever_up.png" alt="binary lever_up" height="200" width="auto" id="thirdLever" onclick="changeLeverThree()"></td>
23+
<td class="header"><img src="assets/img/lever_up.png" alt="binary lever_up" height="200" width="auto" id="fourthLever" onclick="changeLeverFour()"></td>
24+
<td class="header"><img src="assets/img/lever_up.png" alt="binary lever_up" height="200" width="auto" id="secondLever" onclick="changeLeverTwo()"></td>
25+
<td class="header"><img src="assets/img/lever_up.png" alt="binary lever_up" height="200" width="auto" id="fifthLever" onclick="changeLeverFive()"></td>
26+
<td class="header"><img src="assets/img/lever_up.png" alt="binary lever_up" height="200" width="auto" id="sixthLever" onclick="changeLeverSix()"></td>
27+
<td class="header"><img src="assets/img/lever_up.png" alt="binary lever_up" height="200" width="auto" id="seventhLever" onclick="changeLeverSeven()"></td>
28+
<td class="header"><img src="assets/img/lever_up.png" alt="binary lever_up" height="200" width="auto" id="eighthLever" onclick="changeLeverEight()"></td>
29+
</tr>
30+
<tr id="bin">
31+
<td id="binary" colspan="4">0000</td>
32+
<td id="binary2" colspan="4">0000</td>
33+
</tr>
34+
<tr id="dec">
35+
<td colspan="8" id="decimal">00</td>
36+
</tr>
37+
<tr id="hex">
38+
<td id="hexidecimal" colspan="4">0</td>
39+
<td id="hexidecimal2" colspan="4">0</td>
40+
</tr>
41+
42+
</table>
43+
<script src="assets/js/script.js"></script>
44+
</body>
45+
</html>

‎BinaryVisualiser/ChrisO345/screenshots/example.png

24.8 KB
Loading

‎BinaryVisualiser/ChrisO345/screenshots/example2.png

25.6 KB
Loading

0 commit comments

Comments
 (0)