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.
What is "aaaaigz0...my4xmda="?
Validate Base64 using Notepad++
Base64 encryption is a lie
Comments (8)
I hope you enjoy this discussion. In any case, I ask you to join it.