-
Notifications
You must be signed in to change notification settings - Fork 55
/
index.html
151 lines (144 loc) · 9.21 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!DOCTYPE html>
<html lang="en" class="root">
<head>
<link rel="icon" href="binary-code.png" type="image/x-icon">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Binary Calculator</title>
<link rel="stylesheet" href="css/global.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<link rel="shortcut icon" href="https://img.icons8.com/?size=100&id=80258&format=png&color=000000" type="image/x-icon">
</head>
<body>
<div class="content">
<header class="header">
<nav class="navbar">
<div class="nav-links">
<a href="info.html" target="_blank" class="nav-link">Learn Binary</a>
</div>
<div class="theme-toggle">
<button type="button" id="theme-button" class="theme_button magic" onclick="switchTheme('root')">
<i class="fa-solid fa-wand-magic-sparkles"></i>
</button>
</div>
</nav>
</header>
<div class="calculator-wrapper">
<div class="calculator-content">
<header class="title">
<div><span>Binary Calculator</span></div>
</header>
<section class="calculator-body">
<form name="form">
<div class="textview_container">
<input id="res" type="text" class="textview" name="textview" readonly>
<div id="myModal" class="modal">
<div class="modal-content">
<div style="width: 90%;">
<p id="modalResult"></p>
</div>
<div>
<span class="close" onclick="closeModal()">×</span>
</div>
</div>
</div>
</div>
</form>
<div class="calculator-container">
<div class="basic-options">
<table>
<tr>
<td><input class="button" type="button" value="M+" title="Memory Add" onclick="addToMemory()"></td>
<td><input class="button" type="button" value="C" title="Clear" onclick="clc()"></td>
<td><input class="button" type="button" value="⌫" title="Backspace" onclick="backspace()"></td>
<td><input class="button" type="button" value="/" title="Divide" onclick="insert('/')"></td>
<td><input class="button" type="button" value="M-" title="Memory Subtract" onclick="subtractFromMemory()"></td>
<td><input class="button" type="button" value="0" title="Zero" onclick="insert(0)"></td>
<td><input class="button" type="button" value="1" title="One" onclick="insert(1)"></td>
</tr>
<tr>
<td><input class="button" type="button" value="*" title="Multiply" onclick="insert('*')"></td>
<td><input class="button" type="button" value="MR" title="Memory Recall" onclick="recallMemory()"></td>
<td><input class="button" type="button" value="1's" title="1's Complement" onclick="oneComplement()"></td>
<td><input class="button" type="button" value="2's" title="2's Complement" onclick="twoComplement()"></td>
<td><input class="button" type="button" value="-" title="Subtract" onclick="insert('-')"></td>
<td><input class="button" type="button" value="MC" title="Memory Clear" onclick="clearMemory()"></td>
<td><input class="button" type="button" value=">>" title="Shift Right" onclick="insert('>')"></td>
</tr>
</table>
</div>
<table>
<tr>
<td><input class="button" type="button" value="Dec" title="Convert to Decimal" onclick="binaryToDecimal()"></td>
<td><input class="button" type="button" value="ROR" title="Rotate Right" onclick="circularShift('right')"></td>
<td><input class="button" type="button" value="ROL" title="Rotate Left" onclick="circularShift('left')"></td>
<td><input class="button" type="button" value="NOT" title="Bitwise NOT" onclick="bitwiseNOT()"></td>
<td><input class="button" type="button" value="AND" title="Bitwise AND" onclick="bitwiseAND()"></td>
<td><input class="button" type="button" value="OR" title="Bitwise OR" onclick="bitwiseOR()"></td>
<td><input class="button" type="button" value="XOR" title="Bitwise XOR" onclick="bitwiseXOR()"></td>
</tr>
<tr>
<td><input class="button" type="button" value="<<" onclick="insert('<')"></td>
<td><input class="button" type="button" value="+" onclick="insert('+')"></td>
<td><input class="button" type="button" value="." onclick="decimal()"></td>
<td><input class="button" type="button" value="Octal" onclick="binaryToOctal()"></td>
<td><input id="eql" class="button" type="button" value="=" onclick="eql()"></td>
<td><input class="button" type="button" value="Hex" title="Convert to Hexadecimal" onclick="binaryToHexadecimal()"></td>
</tr>
<tr>
<td><input class="button" type="button" value="Gray" title="Convert to Gray Code" onclick="binaryToGray()"></td>
<td><input class="button" type="button" value="Float" title="Convert to Float" onclick="binaryToFloat()"></td>
<td><input class="button" type="button" value="Parity" title="Calculate Parity Bit" onclick="calculateParityBit()"></td>
<td><input class="button" type="button" value="Square" title="Square Root" onclick="squareRootBinary()"></td>
<td><input class="button" type="button" value="Fact" title="Factorial" onclick="factorialBinary()"></td>
<td><input class="button" type="button" value="," title="Comma" onclick="insert(',')"></td>
</tr>
</table>
</div>
</section>
</div>
</div>
<div class="feedback-section">
<h2>Feedback</h2>
<form id="feedbackForm">
<textarea id="feedbackText" placeholder="Share your feedback here..." rows="4" required></textarea>
<button type="submit">Submit Feedback</button>
</form>
<p id="feedbackMessage" style="display:none; color: green; margin-top: 10px;">Thank you for your feedback!</p>
</div>
<footer>
<div class="madewith">
<span>Made with</span>
<span class="heart">❤</span>
</div>
<div class="socialcontainer">
<a class="insta" href="https://www.instagram.com/" target="_blank"><i class="fa-brands fa-instagram"></i></a>
<a class="face" href="https://www.facebook.com/" target="_blank"><i class="fa-brands fa-facebook"></i></a>
<a class="x" href="https://x.com/i/flow/login" target="_blank"><i class="fa-brands fa-x-twitter"></i></a>
<a class="linkedin" href="https://www.linkedin.com/" target="_blank"><i class="fa-brands fa-linkedin-in"></i></a>
<a class="github" href="https://github.com/Alitindrawan24" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
<div class="copyright" style="padding-top: 10px;">
<span style="color: white;">© 2024 Binary Calculator. All rights reserved.</span>
</div>
</footer>
<script src="js/binaryCalculator.js"></script>
<script src="js/themeSwitcher.js"></script>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
const feedbackForm = document.getElementById('feedbackForm');
feedbackForm.addEventListener('submit', function (e) {
e.preventDefault(); // Prevent page refresh
// Show thank you message
document.getElementById('feedbackMessage').style.display = 'block';
document.getElementById('feedbackText').value = ''; // Clear the textarea
// Hide the message after 3 seconds
setTimeout(() => {
document.getElementById('feedbackMessage').style.display = 'none';
}, 3000);
});
});
</script>
</body>
</html>