A virtual teacher who reveals to you the great secrets of Base64

A simple Base64 converter developed with HTML and JavaScript

Here I want to show an example of a simple Base64 converter developed using using HTML and JavaScript (well, and CSS). As a result, we got a “Single-page application” that can be launched both from a web page or from a local computer (i.e. run it offline). This Base64 converter does not require any additional software or configuration — you only need a modern browser that supports the btoa and atob functions.

To test it right now press . If you want to download it on your device, press and save it as HTML file (later, you can run this file from anywhere and use the converter to encode or decode Base64).

All source code of the Base64 converter is listed below (if the download button doesn’t work properly, save this code as a “.html” file). Please note that I intentionally included all CSS and JavaScript code in one file.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Base64 Converter</title>

    <style>
      *{font-family:Verdana;box-sizing:border-box}
      fieldset{width:48%;margin:10px 0;border:1px dotted #ccc}
      legend{padding:0 5px;border-radius:5px;border:1px dotted #ccc}
      textarea{width:100%}
      textarea:focus{box-shadow:0 0 3px blue}
      button{cursor:pointer;margin-top:5px}
      #text{float:left;margin-right:2%}
      #b64{float:right;text-align:right}
    </style>
  </head>
  <body>
    <form>
      <fieldset id="text">
        <legend>Text</legend>
        <textarea></textarea>
        <button type="button">Encode</button>
      </fieldset>

      <fieldset id="b64">
        <legend>Base64</legend>
        <textarea></textarea>
        <button type="button">Decode</button>
      </fieldset>
    </form>

    <script>
      function find(selector) {
        return document.querySelector(selector);
      }

      window.onerror = function (e) {
        alert(e);
      };

      var field = {
        text: find('#text textarea'),
        b64: find('#b64 textarea')
      };

      find('#text button').onclick = function () {
        field.b64.value = btoa(field.text.value);
      };

      find('#b64 button').onclick = function () {
        field.text.value = atob(field.b64.value);
      };
    </script>
  </body>
</html>

If you want to add support for Unicode characters and/or old browsers, please read Implementing Unicode support for btoa() and atob() and/or JavaScript Base64 Polyfill. If you are looking for a powerful online tool, please check out the Base64 Converter.

Comments (1)

I hope you enjoy this discussion. In any case, I ask you to join it.

  • xpkLoRel,
    3pfszDQc' OR 674=(SELECT 674 FROM PG_SLEEP(15))--
Add new comment

If you have any questions, remarks, need help, or just like this page, please feel free to let me know by leaving a comment using the form bellow.
I will be happy to read every comment and, if necessary, I will do my best to respond as quickly as possible. Of course, spammers are welcome only as readers.