Password Overlay Test

Using `btoa` and `atob` to encode and decode text.

by Taufik Nurrohman

HTML

<div id="protect-body" class="body">Ciluk baaa!</div>

<div id="protect-overlay" class="overlay">
    <form action="#">
        <input name="answer" type="password" placeholder="Password?"/> <button type="submit">Open</button>
    </form>
</div>

CSS

.body {
  padding:10% 0;
  text-align:center;
}
.overlay {
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:9999;
  background-color:black;
  color:white;
  padding:10% 0;
  text-align:center;
}

JavaScript

(function() {
    var o = document.getElementById('protect-overlay');
    o.getElementsByTagName('form')[0].onsubmit = function() {
        // https://developer.mozilla.org/En/DOM/Window.btoa
        // https://developer.mozilla.org/en/DOM/window.atob
        // to get the obfuscated text, use `console.log(btoa('your text goes here'))`
        // `aSBsb3ZlIHlvdQ==` => `i love you`
        if (this.answer.value === atob('aSBsb3ZlIHlvdQ==')) {
            o.style.display = "none";
        } else {
            alert('Wrong password!');
        }
        return false;
    };
})();