Binary to text converter - JS

Using JavaScript, let's create a binary to text converter

Code

HTML

<main>
  <fieldset>
    <legend>Convert</legend>
    <label for="textToBinaryEl">textToBinary</label>
    <input type="text" id="textToBinaryEl" />
    <hr />
    <label for="binaryToTextEl">binaryToText</label>
    <input type="text" id="binaryToTextEl" />
  </fieldset>
</main>

This code is a simple HTML structure that creates a fieldset element with a legend element inside, indicating that this is a "Convert" form. Inside the fieldset element, there are two label elements, each with a for attribute that corresponds to the id attribute of an input element. The first label element has text "textToBinary" and the second has text "binaryToText". The two input elements are text inputs and have ids "textToBinaryEl" and "binaryToTextEl" respectively. The hr element is a horizontal rule which used to separate the two input fields visually.

JS

'use strict';

// textToBinary("  d 0 123 5");
textToBinaryEl.addEventListener('input', ({target}) => binaryToTextEl.value = textToBinary(target.value));
// binaryToText("00100000 00100000 01100100 00100000 00110000 00100000 00110001 00110010 00110011 00100000 00110101")
binaryToTextEl.addEventListener('input', ({target}) => textToBinaryEl.value = binaryToText(target.value));

function binaryToText(str) {
  let output = [];
  str.split(" ").forEach((element) => {
    output.push(String.fromCharCode(parseInt(element, 2)));
  });
  return output.join("");
}

function textToBinary(str) {
  let output = "";
  str.split("").forEach((element) => {
    let char = element.charCodeAt(0).toString(2);
    output += ("00000000" + char).slice(-8).concat(" ");
  });
  return output;
}

This code is JavaScript that defines two event listeners for the input elements with ids "textToBinaryEl" and "binaryToTextEl". The first event listener listens for the 'input' event on the "textToBinaryEl" input element, and when triggered, it takes the value of the input element and passes it to the "textToBinary" function. The returned value of this function is then set as the value of the "binaryToTextEl" input element.
The second event listener listens for the 'input' event on the "binaryToTextEl" input element, and when triggered, it takes the value of the input element and passes it to the "binaryToText" function. The returned value of this function is then set as the value of the "textToBinaryEl" input element.

The two functions "binaryToText" and "textToBinary" are used to convert binary to text and text to binary respectively.
The "binaryToText" function takes in a string of binary numbers separated by spaces, splits the string by spaces, converts each binary number to its corresponding ASCII character using the parseInt method with radix 2 and String.fromCharCode method, and then join all characters back to form a string.
The "textToBinary" function takes in a string of text, splits the string by characters, convert each character to its binary representation using the charCodeAt method and toString method with radix 2, then add leading zeros if necessary and finally join all the binary numbers back with space separated.

Demo

See below for the complete working project.

💡 NOTE: If you can't see it click here and see the final result

---

Thanks for reading!

If you have any questions, complaints or tips, you can leave them here in the comments. I will be happy to answer!

😊😊 See you later! 😊😊

---

Support Me

Youtube - WalterNascimentoBarroso
Github - WalterNascimentoBarroso
Codepen - WalterNascimentoBarroso