diff --git a/binary/index.html b/binary/index.html
new file mode 100644
index 0000000..a4e8613
--- /dev/null
+++ b/binary/index.html
@@ -0,0 +1,21 @@
+
+
+
+
+
+ Binary Translator
+
+
+
+
+
+
Binary Translator
+
+
+
+
+
+
+
+
+
diff --git a/binary/index.js b/binary/index.js
new file mode 100644
index 0000000..74747fe
--- /dev/null
+++ b/binary/index.js
@@ -0,0 +1,19 @@
+const binaryElem = document.getElementById('translate-to-binary');
+const textElem = document.getElementById('translate-to-text');
+
+
+binaryElem.addEventListener("click", () => {
+ const text = document.getElementById("textInput").value;
+ const binary = text.split("").map(char => {
+ return char.charCodeAt(0).toString(2).padStart(8, "0");
+ }).join(" ");
+ document.getElementById("binaryOutput").value = binary;
+});
+
+textElem.addEventListener("click", () => {
+ const binary = document.getElementById("binaryOutput").value;
+ const text = binary.split(" ").map(bin => {
+ return String.fromCharCode(parseInt(bin, 2));
+ }).join("");
+ document.getElementById("textInput").value = text;
+});
diff --git a/binary/style.css b/binary/style.css
new file mode 100644
index 0000000..479d68d
--- /dev/null
+++ b/binary/style.css
@@ -0,0 +1,33 @@
+@import url(/global.css);
+
+.container {
+ text-align: center;
+ padding: 20px;
+ border-radius: 20px;
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.7);
+}
+
+textarea, input, button {
+ width: 70%;
+ margin-top: 10px;
+ padding: 10px;
+ border-radius: 10px;
+ border: none;
+ background-color: #333;
+ color: #f0f0f0;
+}
+
+textarea {
+ resize: none;
+ margin-right: 10px;
+}
+
+button {
+ cursor: pointer;
+ background-color: #444;
+}
+
+button:hover {
+ background-color: #555;
+}
+