Text to Binary Converter
Text to Binary Converter
Binary Output
body {
font-family: 'Arial', sans-serif;
background: linear-gradient(135deg, #6a11cb, #2575fc);
color: #fff;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
text-align: center;
}
.container {
background: rgba(255, 255, 255, 0.1);
padding: 20px;
border-radius: 15px;
width: 90%;
max-width: 600px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
h1 {
margin-bottom: 20px;
font-size: 2rem;
color: #fff;
}
textarea {
width: 100%;
border: none;
border-radius: 8px;
padding: 10px;
font-size: 1rem;
color: #333;
background-color: #f4f4f4;
resize: none;
box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);
}
textarea:focus {
outline: none;
border: 2px solid #6a11cb;
}
button {
background: linear-gradient(135deg, #ff6a00, #ee0979);
border: none;
color: #fff;
padding: 10px 20px;
margin: 10px 5px;
border-radius: 20px;
cursor: pointer;
font-size: 1rem;
transition: background 0.3s ease;
}
button:hover {
background: linear-gradient(135deg, #ee0979, #ff6a00);
}
button:focus {
outline: none;
}
.output-container {
margin-top: 20px;
}
h2 {
margin-bottom: 10px;
font-size: 1.5rem;
}
@media (max-width: 600px) {
h1 {
font-size: 1.5rem;
}
h2 {
font-size: 1.2rem;
}
button {
font-size: 0.9rem;
}
}
// Get DOM elements
const textInput = document.getElementById("textInput");
const binaryOutput = document.getElementById("binaryOutput");
const convertButton = document.getElementById("convertButton");
const clearButton = document.getElementById("clearButton");
// Convert text to binary
function textToBinary(text) {
return text
.split("")
.map((char) => char.charCodeAt(0).toString(2).padStart(8, "0"))
.join(" ");
}
// Event listeners
convertButton.addEventListener("click", () => {
const inputText = textInput.value.trim();
if (inputText === "") {
binaryOutput.value = "Please enter some text.";
} else {
binaryOutput.value = textToBinary(inputText);
}
});
clearButton.addEventListener("click", () => {
textInput.value = "";
binaryOutput.value = "";
});
