From c6e1b4717e77a876b1213746940926146b9369d3 Mon Sep 17 00:00:00 2001
From: zyqunix <117040076+zyqunix@users.noreply.github.com>
Date: Thu, 17 Apr 2025 12:25:37 +0200
Subject: [PATCH] binary translator
---
binary/index.html | 21 +++++++++++++++++++++
binary/index.js | 19 +++++++++++++++++++
binary/style.css | 33 +++++++++++++++++++++++++++++++++
3 files changed, 73 insertions(+)
create mode 100644 binary/index.html
create mode 100644 binary/index.js
create mode 100644 binary/style.css
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;
+}
+