(function() {
$('submit_en').onclick = encrypt;
$('submit_de').onclick = decrypt;
function encrypt() {
setData('output_en',
CryptoJS.AES.encrypt(
getPassword('text_en'), getPassword('password_en')));
}
function decrypt() {
setData('output_de',
CryptoJS.AES.decrypt(
getData('vault'), getPassword('password_de'))
.toString(CryptoJS.enc.Utf8));
}
function getPassword(el_id) {
return $(el_id).value;
}
function getData(el_id) {
return $(el_id).innerText;
}
function setData(el_id, result) {
$(el_id).innerHTML = result;
}
function $(el_id) {
return document.getElementById(el_id);
}
})();
<body>
<nav class="nav" tabindex="-1" onclick="this.focus()">
<div class="container">
<span class="pagename current">Webpage Crypto</span>
</div>
</nav>
<div class="container">
<div class="row"> </div>
<div class="row col12" style="text-align:center">
<textarea style="height:5em; width: 36em" type="text" class="smooth" id="text_en" placeholder="the text which will be encrypted"></textarea>
</div>
<div class="row">
<div class="row col12" style="text-align:center">
<input type="text" class="smooth" id="password_en">
<a class="btn btn-b btn-sm smooth" id="submit_en" style="width:10em">password to encrypt</a>
</div>
<!-- <div class="row"> </div> -->
<div class="row col12" style="text-align:center">
<input type="text" class="smooth" id="password_de" placeholder="demo password: 'drowssap'">
<a class="btn btn-b btn-sm smooth" id="submit_de" style="width:10em">password to decrypt</a>
</div>
<div class="row">
<div class="col c3"> </div>
<div class="col c6 my-out" id="output_en"></div>
<div class="col c3"> </div>
</div>
<div class="row">
<div class="col c3"> </div>
<div class="col c6 my-out" id="output_de"></div>
<div class="col c3"> </div>
</div>
</div>
</div>
<span style="display:none" id="vault">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</span>
</body>
body,
textarea,
input,
select {
background: 0;
border-radius: 0;
font: 16px sans-serif;
margin: 0;
color: #555;
}
.smooth {
transition: all .2s
}
.btn,
.nav a {
text-decoration: none
}
.container {
margin: 0 20px;
width: auto
}
label>* {
display: inline
}
form>* {
display: block;
margin-bottom: 10px
}
.btn {
background: #999;
border-radius: 6px;
border: 0;
color: #fff;
cursor: pointer;
display: inline-block;
margin: 2px 0;
padding: 12px 30px 14px
}
.btn:hover {
background: #888
}
.btn:active,
.btn:focus {
background: #777
}
.btn-a {
background: #0ae
}
.btn-a:hover {
background: #09d
}
.btn-a:active,
.btn-a:focus {
background: #08b
}
.btn-b {
background: #3c5
}
.btn-b:hover {
background: #2b4
}
.btn-b:active,
.btn-b:focus {
background: #2a4
}
.btn-c {
background: #d33
}
.btn-c:hover {
background: #c22
}
.btn-c:active,
.btn-c:focus {
background: #b22
}
.btn-sm {
border-radius: 4px;
padding: 10px 14px 11px
}
.row {
margin: 1% 0;
overflow: auto
}
.col {
float: left
}
.table,
.c12 {
width: 100%
}
.c11 {
width: 91.66%
}
.c10 {
width: 83.33%
}
.c9 {
width: 75%
}
.c8 {
width: 66.66%
}
.c7 {
width: 58.33%
}
.c6 {
width: 50%
}
.c5 {
width: 41.66%
}
.c4 {
width: 33.33%
}
.c3 {
width: 25%
}
.c2 {
width: 16.66%
}
.c1 {
width: 8.33%
}
h1 {
font-size: 3em
}
.btn,
h2 {
font-size: 2em
}
.ico {
font: 33px Arial Unicode MS, Lucida Sans Unicode
}
.addon,
.btn-sm,
.nav,
textarea,
input,
select {
outline: 0;
font-size: 14px
}
textarea,
input,
select {
padding: 16px;
border: 1px solid #ccc
}
textarea:focus,
input:focus,
select:focus {
border-color: #5ab
}
textarea,
input[type=text] {
-webkit-appearance: none;
height: 0.2em;
width: 24em
}
.addon {
padding: 8px 12px;
box-shadow: 0 0 0 1px #ccc
}
.nav,
.nav .current,
.nav a:hover {
background: #000;
color: #fff
}
.nav {
height: 24px;
padding: 11px 0 15px
}
.nav a {
color: #aaa;
padding-right: 1em;
position: relative;
top: -1px
}
.nav .pagename {
font-size: 22px;
top: 1px
}
.btn.btn-close {
background: #000;
float: right;
font-size: 25px;
margin: -54px 7px;
display: none
}
@media(min-width:1310px) {
.container {
margin: auto;
width: 1270px
}
}
@media(max-width:870px) {
.row .col {
width: 100%
}
}
@media(max-width:500px) {
.btn.btn-close {
display: block
}
.nav {
overflow: hidden
}
.pagename {
margin-top: -11px
}
.nav:active,
.nav:focus {
height: auto
}
.nav div:before {
background: #000;
border-bottom: 10px double;
border-top: 3px solid;
content: '';
float: right;
height: 4px;
position: relative;
right: 3px;
top: 14px;
width: 20px
}
.nav a {
padding: .5em 0;
display: block;
width: 50%
}
}
.table th,
.table td {
padding: .5em;
text-align: left
}
.table tbody>:nth-child(2n-1) {
background: #ddd
}
.msg {
padding: 1.5em;
background: #def;
border-left: 5px solid #59d
}
.my-out {
display: inline-block;
text-align: justify;
word-wrap: break-word;
}
External resources loaded into this fiddle: