Message Encryption
body class=container bg-success mb-5
div class=mt-4 bg-light py-3 px-5 rounded
div class=row align-items-center justify-content-center
div class=col-md-4 mb-4
div class=mt-3
h4 class=display-4 fst-italic
Encryption
h4
hr
h5
Number of position to move
h4
div class=form-check
input class=form-check-input type=radio name=positionRadio id=positionRandom
checked onclick=customShow() value=random
label class=form-check-label for=positionRandom
Random Number
label
div
div class=form-check
input class=form-check-input type=radio name=positionRadio id=positionCustom
onclick=customShow() value=custom
label class=form-check-label for=positionCustom
Custom Number
label
div
div
input type=number name=customNumber id=customNumber min=1 max=20 class=w-50
disabled value=1
p class=text-danger
Note Minimum = 1, Maximum = 20
p
div
div
div class=mt-3
h5
Direction
h4
div class=form-check
input class=form-check-input type=radio name=directionRadio id=directionRight
checked value=right
label class=form-check-label for=directionRight
Right
label
div
div class=form-check
input class=form-check-input type=radio name=directionRadio id=directionLeft
value=left
label class=form-check-label for=directionLeft
Left
label
div
div class=form-check
input class=form-check-input type=radio name=directionRadio id=directionAlternate
value=alternating
label class=form-check-label for=directionAlternate
Alternating Direction
label
div
div
div
div class=col-md-8
div class=form-floating shadow
textarea class=form-control placeholder=Leave a comment here id=messageTA
style=height 250pxtextarea
label for=messageTA class=fw-boldMessage to Encryptlabel
div
button class=btn btn-primary my-5 onclick=encryptMessage()
svg xmlns=httpwww.w3.org2000svg width=16 height=16 fill=currentColor
class=bi bi-lock-fill viewBox=0 0 16 16
path
d=M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z
svg
Encrypt Message
button
button class=btn btn-success onclick=clearEncrypt()
Clear
button
div class=form-floating shadow
textarea class=form-control placeholder=Leave a comment here id=resultTA
style=height 250px readonlytextarea
label for=resultTA class=fw-boldEncrypted Messagelabel
div
div
div
div
div class=mt-4 bg-light py-3 px-5 rounded
h4 class=display-4 fst-italic
Decryption
h4
hr
div class=row
div class=col-md-5
div class=form-floating shadow
textarea class=form-control placeholder=Leave a comment here id=encryptedMessageTA
style=height 200pxtextarea
label for=encryptedMessageTA class=fw-boldMessage to Decryptlabel
div
div class=mt-3
label for=privateKeyTB class=form-label fw-boldPrivate Keylabel
input type=text name=privateKeyTB id=privateKeyTB class=form-control shadow
div
div
div class=col-md-2 my-5
button class=btn btn-danger d-block w-100 mb-3 onclick=decryptMessage()
svg xmlns=httpwww.w3.org2000svg width=16 height=16 fill=currentColor
class=bi bi-unlock-fill viewBox=0 0 16 16
path
d=M11 1a2 2 0 0 0-2 2v4a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h5V3a3 3 0 0 1 6 0v4a.5.5 0 0 1-1 0V3a2 2 0 0 0-2-2z
svg
Decrypt Message
button
button class=btn btn-success d-block w-100 onclick=clearDecrypt()
Clear
button
div
div class=col-md-5
div class=form-floating shadow
textarea class=form-control placeholder=Leave a comment here id=decryptResultTA
style=height 300px readonlytextarea
label for=decryptResultTA class=fw-boldDecrypted Messagelabel
div
div
div
div
body
style
style
script
function customShow() {
let customRadioChecked = document.querySelector(#positionCustomchecked) !== null;
let customNumber = document.getElementById(customNumber);
if (customRadioChecked) {
customNumber.disabled = false;
} else {
customNumber.disabled = true;
customNumber.value = 1;
}
}
function encryptMessage() {
let message = document.getElementById(messageTA).value.trim();
let positionRadio = document.querySelector(input[name='positionRadio']checked).value;
let directionRadio = document.querySelector(input[name='directionRadio']checked).value;
let resultTA = document.getElementById(resultTA);
let position = 0;
let encryptedMessage = ;
let privateKey = ;
message = message.replaceAll(n, br);
console.log(message);
if (message != ) {
if (positionRadio == random) {
position = getRndInteger(5, 20);
} else {
let customNumber = document.getElementById(customNumber);
if (customNumber.value = 1 && customNumber.value = 20) {
position = parseInt(customNumber.value);
}
}
if (position != 0) {
switch (directionRadio) {
case right
for (let i = 0; i message.length; i++) {
encryptedMessage += String.fromCharCode(message.charCodeAt(i) + position);
}
privateKey = R + position;
break;
case left
for (let i = 0; i message.length; i++) {
encryptedMessage += String.fromCharCode(message.charCodeAt(i) - position);
}
privateKey = L + position;
break;
default
let order = [];
let side = getRndInteger(1, 2);
if (side == 1) {
order = [right, left];
} else {
order = [left, right];
}
if (order[0] == right) {
for (let i = 0; i message.length; i++) {
if (i % 2 == 0) {
encryptedMessage += String.fromCharCode(message.charCodeAt(i) + position);
} else {
encryptedMessage += String.fromCharCode(message.charCodeAt(i) - position);
}
}
} else {
for (let i = 0; i message.length; i++) {
if (i % 2 == 0) {
encryptedMessage += String.fromCharCode(message.charCodeAt(i) - position);
} else {
encryptedMessage += String.fromCharCode(message.charCodeAt(i) + position);
}
}
}
if (order[0] == right) {
privateKey = RL + position;
} else {
privateKey = LR + position;
}
break;
}
}
}
console.log(encryptedMessage)
resultTA.value = encryptedMessage + nnPrivate Keyn + privateKey;
}
function decryptMessage() {
let encryptedMessage = document.getElementById(encryptedMessageTA).value.trim();
let privateKeyTB = document.getElementById(privateKeyTB).value.trim();
let resultTA = document.getElementById(decryptResultTA);
let position = ;
let order = [];
let decryptedMessage = ;
if (encryptedMessage != ) {
for (let i = 0; i privateKeyTB.length; i++) {
if (privateKeyTB.charAt(i) == R privateKeyTB.charAt(i) == L) {
order.push(privateKeyTB.charAt(i));
} else {
position += privateKeyTB.charAt(i);
}
}
position = parseInt(position);
if (order.length == 2) {
if (order[0] == R) {
for (let i = 0; i encryptedMessage.length; i++) {
if (i % 2 == 0) {
decryptedMessage += String.fromCharCode(encryptedMessage.charCodeAt(i) - position);
} else {
decryptedMessage += String.fromCharCode(encryptedMessage.charCodeAt(i) + position);
}
}
console.log(decryptedMessage)
} else {
for (let i = 0; i encryptedMessage.length; i++) {
if (i % 2 == 0) {
decryptedMessage += String.fromCharCode(encryptedMessage.charCodeAt(i) + position);
} else {
decryptedMessage += String.fromCharCode(encryptedMessage.charCodeAt(i) - position);
}
}
}
} else if (order[0] == R) {
for (let i = 0; i encryptedMessage.length; i++) {
decryptedMessage += String.fromCharCode(encryptedMessage.charCodeAt(i) - position);
}
} else {
for (let i = 0; i encryptedMessage.length; i++) {
decryptedMessage += String.fromCharCode(encryptedMessage.charCodeAt(i) + position);
}
}
decryptedMessage = decryptedMessage.replaceAll(br, n);
resultTA.value = decryptedMessage;
}
}
function clearEncrypt() {
let message = document.getElementById(messageTA);
let resultTA = document.getElementById(resultTA);
message.value = ;
resultTA.value = ;
}
function clearDecrypt() {
let encryptedMessage = document.getElementById(encryptedMessageTA);
let privateKeyTB = document.getElementById(privateKeyTB);
let resultTA = document.getElementById(decryptResultTA);
encryptedMessage.value = ;
privateKeyTB.value = ;
resultTA.value = ;
}
function getRndInteger(min, max) {
return Math.floor(Math.random() (max - min + 1)) + min;
}
script
