JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
     <h1>CipherSaber JS</h1>
    <p>Fork me on github:<br>
        <a href="https://github.com/yomli/ciphersaber.js/">https://github.com/yomli/ciphersaber.js/</a>
    </p>

    <form action="">
        <textarea id="text" rows="15"></textarea>
        <br>
        <input type="password" id="password" name="key" placeholder="Clé">
        <br>
        <input type="number" name="iv" id="cycle" value="20" min="1" max="100" placeholder="Cycles">
        <br>
        <input type="button" value="Chiffrer" id="encrypt">
        <input type="button" value="Déchiffrer" id="decrypt">
    </form>
</div>

CSS

input[type="button"] {
    -webkit-appearance: none;
    -o-appearance: none;
    -ms-appearance: none;
    appearance: none;
    -moz-transition: background-color .2s ease-in-out, color .2s ease-in-out;
    -webkit-transition: background-color .2s ease-in-out, color .2s ease-in-out;
    -o-transition: background-color .2s ease-in-out, color .2s ease-in-out;
    -ms-transition: background-color .2s ease-in-out, color .2s ease-in-out;
    transition: background-color .2s ease-in-out, color .2s ease-in-out;
    display: inline-block;
    position: relative;
    text-decoration: none;
    text-align: center;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 700;
    font-family: Helvetica, Arial, sans-serif;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, .3);
    cursor: pointer;
    background-image: linear-gradient(rgba(0, 0, 0, .1), transparent), linear-gradient(180deg, #3d98f4 100%, transparent 50%);
    box-shadow: 0 .1em .1em .1em hsla(210, 90%, 80%, .8) inset, 0 0 .5em rgba(0, 0, 0, .3);
    color: #fff;
    text-shadow: 0 -1px 1px rgba(0, 0, 0, .3);
}
input[type="button"]:active, input[type="button"]:hover {
    box-shadow: 0 .1em .1em .1em hsla(210, 90%, 80%, .8) inset, 0 0 .5em rgba(58, 145, 233, .9), 0 .1em .1em rgba(0, 0, 0, .2) inset, 0 .45em 0 .1em rgba(0, 0, 0, .05) inset, 0 0 .4em 1px rgba(58, 145, 233, .9);
    text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
}
input[type="number"], textarea, input[type="password"] {
    -moz-appearance: none;
    -webkit-appearance: none;
    -o-appearance: none;
    -ms-appearance: none;
    appearance: none;
    color: #555!important;
    display: block;
    outline: 0;
    padding: 0 1em;
    text-decoration: none;
    width: 75%;
    margin-bottom: .8em;
    height: 2.75em;
    background: linear-gradient(to bottom, #e0e0e0 0, #fff 100%);
    border-radius: 4px;
    border: 1px solid #717171;
    box-shadow: 1px 1px 0 #efefef;
    text-shadow: 0 1px 0 #fff;
}
input[type="number"]:focus,...

JavaScript

var CipherSaber = new function() {
 	this.message = "Hello World!";
 	this.password = "password";
 	this.cycles = 20;
 	this.seed = [];
 	this.ruby = [];
 	this.light = [];
 	this.output = [];
 	this.button = [];
 	this.refractor = function() {
 		var i = 0;
 		var j = 0;
 		for (n = 0; n < this.message.length; n++) {
 			i = parseInt(i + 1) % 256;
 			j = parseInt(j + this.light[i]) % 256;
 			var tmp = this.light[i];
 			this.light[i] = this.light[j];
 			this.light[j] = tmp;
 			var k = parseInt(this.light[i] + this.light[j]) % 256;
 			this.output[n] = (this.light[k] ^ this.message[n]);
 		}
 	};
 	this.emission = function() {
 		var j = 0;
 		for (i = 0; i < 256; i++)
 			this.light[i] = i;
 		for (n = 1; n <= this.cycles; n++) {
 			for (i = 0; i < 256; i++) {
 				j = parseInt(j + this.light[i] + this.ruby[i]) % 256;
 				var tmp = this.light[i];
 				this.light[i] = this.light[j];
 				this.light[j] = tmp;
 			}
 		}
 	};
 	this.pushButton = function() {
 		var shape = this.password.concat(this.seed);
 		for (i = 0; i < 256; i++) {
 			var tmp = shape.shift();
 			this.ruby[i] = tmp;
 			shape.push(tmp);
 		}
 	};
 	this.encrypt = function(text, key, iv) {
 		this.message = this.toByte(text);
 		this.password = this.toByte(key);
 		this.cycles = iv; 
 		for (i = 0; i < 10; i++) {
 			this.seed[i] = Math.round(Math.random() * 256);
 		}
 		this.pushButton();
 		this.emission();
 		this.refractor();
 		var crypted = "";
 		for (i = 0; i < this.seed.length; i++) {
 			crypted += this.toHex(this.seed[i]) + " ";
 		}
 		for (i = 0; i < this.output.length; i++) {
 			crypted += this.toHex(this.output[i]) + " ";
 		}
 		return crypted;
 	};
 	this.decrypt = function(text, key, iv) {
 		this.password = this.toByte(key);
 		this.message = text.split(" ");
 		for (i = 0; i < this.message.length; i++) {
 			this.message[i] = parseInt(this.message[i], 16);
 			if (isNaN(this.message[i])) this.message.splice(i, 1);
 		}
 		this.seed = this.message.splice(0, 10);
...