HTML, Javascript and Css based Binary to Text Converter Tool Code, Completely tested and verified Tool you just need to copy paste the code and save it in .HTML file and open it in browser. you need to enter the text it will return the binary value of your entered text.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text to Binary Converter</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(135deg, #ff7eb3, #ff758c);
color: #fff;
}
.container {
text-align: center;
background-color: rgba(255, 255, 255, 0.1);
padding: 20px;
border-radius: 12px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
width: 90%;
max-width: 500px;
}
.title {
font-size: 2rem;
margin-bottom: 1rem;
}
textarea {
width: 100%;
padding: 10px;
border: none;
border-radius: 8px;
margin-bottom: 10px;
resize: none;
font-size: 1rem;
}
button {
background-color: #6a11cb;
background-image: linear-gradient(315deg, #6a11cb 0%, #2575fc 74%);
color: white;
border: none;
padding: 10px 20px;
font-size: 1rem;
cursor: pointer;
border-radius: 8px;
margin: 10px;
transition: transform 0.2s;
}
button:hover {
transform: scale(1.05);
}
.output {
background-color: rgba(255, 255, 255, 0.2);
padding: 10px;
border-radius: 8px;
word-break: break-word;
}
</style>
</head>
<body>
<div class="container">
<h1 class="title">Text to Binary Converter</h1>
<textarea id="textInput" rows="4" placeholder="Enter text here..."></textarea>
<div>
<button onclick="convertToBinary()">Convert to Binary</button>
<button onclick="clearFields()">Clear</button>
</div>
<h2>Binary Output:</h2>
<div id="binaryOutput" class="output">Your binary output will appear here...</div>
</div>
<script>
function convertToBinary() {
const textInput = document.getElementById('textInput').value;
if (textInput.trim() === '') {
alert('Please enter some text to convert.');
return;
}
const binaryOutput = textInput.split('')
.map(char => char.charCodeAt(0).toString(2).padStart(8, '0'))
.join(' ');
document.getElementById('binaryOutput').innerText = binaryOutput;
}
function clearFields() {
document.getElementById('textInput').value = '';
document.getElementById('binaryOutput').innerText = 'Your binary output will appear here...';
}
</script>
</body>
</html>