zyqunix/pages
1
0
Fork 0
mirror of https://github.com/zyqunix/tools.git synced 2025-07-06 06:20:30 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

binary translator

Browse source
This commit is contained in:
zyqunix 2025-04-17 12:25:37 +02:00
parent 6e7169a1c0
commit c6e1b4717e
No known key found for this signature in database
GPG key ID: 134A8DEEA83B80E6
3 changed files with 73 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

21
binary/index.html Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Binary Translator</title>
<link rel="shortcut icon" href="https://rimgo.pussthecat.org/RFbdMMB.png" type="image/x-icon">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="card shadow">
<h1>Binary Translator</h1>
<textarea id="textInput" placeholder="Enter text..." rows="5"></textarea>
<button id="translate-to-binary">Translate to Binary</button>
<textarea id="binaryOutput" placeholder="Binary Code..." rows="5"></textarea>
<button id="translate-to-text">Translate to Text</button>
</div>
<script src="index.js"></script>
</body>
</html>

19
binary/index.js Normal file
View file

@ -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;
});

33
binary/style.css Normal file
View file

@ -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;
}