Skip to content

Commit ebaeb7a

Browse files
pragna7pragna7
committed
Binary Calculator
1 parent ade58c5 commit ebaeb7a

File tree

7 files changed

+301
-0
lines changed

7 files changed

+301
-0
lines changed

‎Calculators/Binary Calculator/Screenshots/Binary Calculator.mp4‎

4 MB
Binary file not shown.

‎Calculators/Binary Calculator/Screenshots/image1.png‎

584 KB
Loading

‎Calculators/Binary Calculator/Screenshots/image2.png‎

334 KB
Loading

‎Calculators/Binary Calculator/background.png‎

510 KB
Loading

‎Calculators/Binary Calculator/index.html‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" href="./style.css">
8+
<title>Binary Calculator</title>
9+
</head>
10+
11+
<body>
12+
<div class="container">
13+
<h1>Binary Calculator</h1>
14+
<form id="calculator-form">
15+
<div class="input-group group1">
16+
<label for="binary1">Binary 1:</label>
17+
<input type="text" id="binary1" required>
18+
</div>
19+
<div class="input-group group2">
20+
<label for="binary2">Binary 2:</label>
21+
<input type="text" id="binary2" required>
22+
</div>
23+
<div class="input-group group3">
24+
<label for="operation">Operation:</label>
25+
<select id="operation" required>
26+
<option value="add">Addition</option>
27+
<option value="subtract">Subtraction</option>
28+
<option value="multiply">Multiplication</option>
29+
<option value="division">Division</option>
30+
<option value="leftShift">Left Shift</option>
31+
<option value="rightShift">Right Shift</option>
32+
<option value="and">AND Operator</option>
33+
<option value="or">OR Operator</option>
34+
<option value="xor">XOR Operator</option>
35+
<option value="xnor">XNOR Operator</option>
36+
<option value="nand">NAND Operator</option>
37+
<option value="not">NOT Operator</option>
38+
<option value="binaryToGray">Binary To Gray Operator</option>
39+
</select>
40+
</div>
41+
<button type="button" onclick="calculate()">Calculate</button>
42+
</form>
43+
<div id="results">
44+
<p id="result"></p>
45+
<p id="decimal"></p>
46+
</div>
47+
<div id="decimals"></div>
48+
</div>
49+
<script src="./script.js"></script>
50+
</body>
51+
52+
</html>

‎Calculators/Binary Calculator/script.js‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
function calculate() {
2+
// Get the input values
3+
const binary1 = document.getElementById('binary1').value;
4+
const binary2 = document.getElementById('binary2').value;
5+
const operation = document.getElementById('operation').value;
6+
7+
// Validate the binary inputs based on selected operation
8+
if (operation !== "not" && operation !== "binaryToGray") {
9+
if (!/^[01]+$/.test(binary1) || !/^[01]+$/.test(binary2)) {
10+
alert("Please enter valid binary numbers.");
11+
return;
12+
}
13+
} else {
14+
// Validate binary input for operations that require only one input (e.g., NOT, Binary to Gray)
15+
if (!/^[01]+$/.test(binary1)) {
16+
alert("Please enter a valid binary number.");
17+
return;
18+
}
19+
}
20+
21+
// Convert binary to decimal
22+
const num1 = parseInt(binary1, 2);
23+
const num2 = parseInt(binary2, 2);
24+
let result;
25+
let decimal;
26+
27+
// Perform the selected operation
28+
switch (operation) {
29+
case "add":
30+
result = (num1 + num2).toString(2);
31+
decimal = (num1 + num2);
32+
break;
33+
case "subtract":
34+
result = (num1 - num2).toString(2);
35+
decimal = (num1 - num2);
36+
break;
37+
case "multiply":
38+
result = (num1 * num2).toString(2);
39+
decimal = (num1 * num2);
40+
break;
41+
case "leftShift":
42+
result = (num1 << num2).toString(2);
43+
decimal = (num1 << num2);
44+
break;
45+
case "rightShift":
46+
result = (num1 >> num2).toString(2);
47+
decimal = (num1 >> num2);
48+
break;
49+
case "division":
50+
result = (num1 / num2).toString(2);
51+
decimal = (num1 / num2);
52+
break;
53+
case "and":
54+
result = (num1 & num2).toString(2);
55+
decimal = (num1 & num2);
56+
break;
57+
case "or":
58+
result = (num1 | num2).toString(2);
59+
decimal = (num1 | num2);
60+
break;
61+
case "xor":
62+
result = (num1 ^ num2).toString(2);
63+
decimal = (num1 ^ num2);
64+
break;
65+
case "xnor":
66+
let xorResult = num1 ^ num2;
67+
let xnorResult = (~xorResult & ((1 << Math.max(num1.toString(2).length, num2.toString(2).length)) - 1));
68+
result = xnorResult.toString(2);
69+
decimal = xnorResult;
70+
break;
71+
case "nand":
72+
let andResult = num1 & num2;
73+
let nandResult = (~andResult & ((1 << Math.max(num1.toString(2).length, num2.toString(2).length)) - 1));
74+
result = nandResult.toString(2);
75+
decimal = nandResult;
76+
break;
77+
case "not":
78+
let notResult = (~num1 & ((1 << num1.toString(2).length) - 1));
79+
result = notResult.toString(2);
80+
decimal = notResult;
81+
break;
82+
case "binaryToGray":
83+
let grayCode = (num1 ^ (num1 >> 1)); // Binary to Gray Code conversion formula
84+
result = grayCode.toString(2);
85+
decimal = grayCode;
86+
break;
87+
default:
88+
alert("Invalid operation.");
89+
return;
90+
}
91+
92+
// Display the result
93+
document.getElementById('result').innerText = `Result: ${result}`;
94+
document.getElementById('decimal').innerText = `Decimal Value: ${decimal}`;
95+
}
96+
97+
// Function to toggle input fields based on operation selection
98+
function toggleInputFields() {
99+
const operation = document.getElementById('operation').value;
100+
const binary2Group = document.querySelector('.group2');
101+
const binary2Input = document.getElementById('binary2');
102+
103+
if (operation === "binaryToGray" || operation === "not") {
104+
// Hide second input field for Binary to Gray and NOT operation
105+
binary2Group.style.display = 'none';
106+
} else {
107+
// Show second input field for other operations
108+
binary2Group.style.display = 'block';
109+
}
110+
}
111+
112+
// Event listener to handle changes in the operation selection
113+
document.getElementById('operation').addEventListener('change', toggleInputFields);
114+
115+
// Call toggleInputFields initially to ensure proper state
116+
toggleInputFields();

‎Calculators/Binary Calculator/style.css‎

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
body {
2+
font-family: Arial, sans-serif;
3+
background-image: url('./background.png');
4+
background-size: cover;
5+
background-position: center;
6+
background-repeat: no-repeat;
7+
display: flex;
8+
justify-content: center;
9+
align-items: center;
10+
height: 100vh;
11+
margin: 0;
12+
}
13+
14+
.container {
15+
background: linear-gradient(135deg, #1752bf, #458ccf);
16+
padding: 20px;
17+
border-radius: 8px;
18+
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
19+
width: 100%;
20+
max-width: 450px;
21+
height: auto;
22+
min-height: 450px;
23+
}
24+
25+
.container:hover {
26+
transform: translateY(-5px);
27+
}
28+
29+
h1 {
30+
margin-bottom: 30px;
31+
text-align: center;
32+
color: #ffffff;
33+
font-size: 24px;
34+
}
35+
36+
.input-group {
37+
display: flex;
38+
flex-direction: column;
39+
margin-bottom: 15px;
40+
}
41+
42+
.group1,
43+
.group2 {
44+
margin-bottom: 20px;
45+
}
46+
47+
.group3 {
48+
margin-bottom: 30px;
49+
}
50+
51+
label {
52+
margin-bottom: 5px;
53+
color: #ffffff;
54+
}
55+
56+
input[type="text"],
57+
select {
58+
padding: 10px;
59+
box-sizing: border-box;
60+
border: 1px solid #cccccc;
61+
border-radius: 4px;
62+
width: 100%;
63+
transition: border-color 0.3s;
64+
}
65+
66+
input[type="text"]:focus,
67+
select:focus {
68+
border-color: #ff9966;
69+
outline: none;
70+
}
71+
72+
button {
73+
display: block;
74+
margin: 20px auto;
75+
background: linear-gradient(135deg, #1c81ec, #fd29cb);
76+
color: white;
77+
border: none;
78+
padding: 12px 20px;
79+
cursor: pointer;
80+
border-radius: 4px;
81+
font-size: 18px;
82+
transition: transform 0.3s;
83+
width: 100%;
84+
}
85+
86+
button:hover {
87+
transform: translateY(-3px);
88+
}
89+
90+
#results {
91+
margin-top: 20px;
92+
text-align: center;
93+
color: #ffffff;
94+
}
95+
96+
#result,
97+
#decimal {
98+
font-weight: bold;
99+
font-size: 20px;
100+
}
101+
102+
/* Responsive Design */
103+
@media (max-width: 768px) {
104+
.container {
105+
width: 90%;
106+
padding: 15px;
107+
}
108+
109+
h1 {
110+
font-size: 20px;
111+
}
112+
113+
button {
114+
font-size: 16px;
115+
padding: 10px;
116+
}
117+
}
118+
119+
@media (max-width: 480px) {
120+
.container {
121+
width: 95%;
122+
height: auto;
123+
}
124+
125+
h1 {
126+
font-size: 18px;
127+
}
128+
129+
button {
130+
font-size: 14px;
131+
padding: 8px;
132+
}
133+
}

0 commit comments

Comments
 (0)