JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div id="pan" onclick="pan()"></div>	
<div id="in"><input id="pass"> <input type="submit" value="Code" onclick="go()"></div>
<div id="f1"><span id="use"></span> <button onclick="copy('use')">Copy</button></div>
<div id="f2"><span id="res"></span> <button onclick="copy('res')">Copy</button></div>		
<div id="ucon">Under Construction!</div>

CSS

#in,#f1,#f2 {text-align:right;}#f1,#f2 {display:none;margin:4px 0 4px 10px;}#in{display:none;}#pan{width:100px;height:100px;position:absolute;bottom:0;left:0;}#ucon {text-align:center;padding:200px 0 0 0;}.hide {display:none;}

JavaScript

function go() {
	
	var f1 = document.getElementById('f1'); f1.style.display = "block";
	var f2 = document.getElementById('f2'); f2.style.display = "block";

var i = document.getElementById('pass').value;

var len = i.length;
var s = i.substring(0,4);

if (len < 10) {len = len + "" + len}


var chars = {'a':'alP','b':'brA','c':'chA','d':'deL','e':'ecH','f':'foX','g':'goL','h':'hoT','i':'inD','j':'juL','k':'kiL','l':'liM','m':'miK','n':'noV','o':'osC','p':'paP','q':'quE','r':'roM','s':'siE','t':'taN','u':'unI','v':'viC','w':'whI','x':'xrA','y':'yaN','z':'zuL'};

s = s.replace(/[abcdefghijklmnopqrstuvwxyz]/g, m => chars[m]);

var use = document.getElementById('use');
var res = document.getElementById('res');

use.innerHTML = i + "@hackersons.co.uk";

res.innerHTML = s + len + "*";

}

function copy(el1) {
  var elm = document.getElementById(el1);
  // for Internet Explorer

  if(document.body.createTextRange) {
    var range = document.body.createTextRange();
    range.moveToElementText(elm);
    range.select();
    document.execCommand("Copy");
    
  }
  else if(window.getSelection) {
    // other browsers

    var selection = window.getSelection();
    var range = document.createRange();
    range.selectNodeContents(elm);
    selection.removeAllRanges();
    selection.addRange(range);
    document.execCommand("Copy");
    
  }
}
function pan(){	var pan = document.getElementById('pan');pan.style.display = "none";
			   
var inp = document.getElementById('in'); inp.style.display = "block";
	
var ucon = document.getElementById('ucon'); ucon.style.display = "none";
			   }