Encryptor V1 Body Font 14px Segoe Ui Width 1000px Margin 0 Auto Keysection P Keysection Se Q26506104
<!DOCTYPE html>
<html>
<head>
<title>Encryptor v1</title>
<style>
body {
font: 14px “Segoe UI”;
width: 1000px;
margin: 0 auto;
}
#keySection p, #keySection select {
float: left;
margin-right: 10px;
margin-left: 10px;
}
#keySection select {
margin: 1em;
width: 50px;
}
body > section {
clear: both;
}
#keySection {
height: 50px;
background-color:rgba(85, 126, 237, 0.84);
border-radius: 5px;
margin-bottom: 20px;
}
#middleSection > div {
height: 250px;
float: left;
width: 46.5%;
background-color: rgba(85, 126, 237, 0.84);
border-radius: 5px;
margin-left: 2.5%;
padding: 1%;
}
div#encryptionSection {
margin-left: 0;
}
#encryptionSection textarea, #decryptionSection textarea {
width: 99%;
height: 60px;
}
#encryptionSection button, #decryptionSection button {
margin-top: 5px;
background-color: white;
color: black;
font-weight: 600;
border-style: none;
width: 65px;
height: 25px;
}
</style>
</head>
<body>
<!– version 1 – encryptor with dialogue boxes. –>
<h1>Welcome to the encryptor</h1>
<section id=”keySection”>
<p>Please set the key required here and then enter a messagebelow for encryption and/or decryption: </p>
<select id=”key” onchange=”updateKey()”>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</section>
<section id=”middleSection”>
<div id=”encryptionSection”>
<h3>Encryptor</h3>
<p>Type in message to be encrypted here:</p>
<textarea id=”encryptTextArea”></textarea>
<!– Text area to enter your text here !–>
<button id=”encryptSubmit”onclick=”encryptText()”>Enter</button>
<p>The message you have input has been encryptedas:</p>
<p id=”encryptedText”></p>
</div>
<div id=”decryptionSection”>
<h3>Decryptor</h3>
<p>Type in message to be decrypted here:</p>
<textarea id=”decryptTextArea”></textarea>
<!– Text area to enter your text here !–>
<button id=”decryptSubmit”onclick=”decryptText()”>Enter</button>
<p>The message you have input has been decryptedas:</p>
<p id=”decryptedText”></p>
</div>
</section>
<script>
var key = 3;
var alphabet = “abcdefghijklmnopqrstuvwxyz”;
function updateKey(event) {
key = parseInt(document.getElementById(“key”).value);
}
// Updating the value of the key
function encryptText() {
//Reading user given letter/string to do encryption
var letStr =document.getElementById(“encryptTextArea”).value;
var encryptLetter = ” “;
// For loop to encrypt all the letters in the input
for (var i = 0; i < letStr.length; i++) {
var letterIndex1 = alphabet.indexOf(letStr[i]); // for ‘c’ =>2
var letterIndex2 = letterIndex1 + key; // for ‘c’ in cat =>5
encryptLetter += alphabet[letterIndex2 % 26]; // for ‘c’ in cat,alphabet[5] => f
}
document.getElementById(“encryptedText”).innerHTML =encryptLetter;
}
function decryptText() {
// Reading user given letter/string to do decryption
var letStrDecr =document.getElementById(“decryptTextArea”).value;
var decryptLetter = ” “;
// For loop to decrypt all the letters in the input
for (i = 0; i < letStrDecr.length; i++) {
var letterIndex1 = alphabet.indexOf(letStrDecr[i]); // for ‘c’=> 2
var letterIndex2 = letterIndex1 – key; // for ‘c’ in cat =>5
if (letterIndex2 < 0)
letterIndex2 = 26 + letterIndex2;
decryptLetter += alphabet[letterIndex2]; // for ‘c’ in cat,alphabet[5] => f
}
document.getElementById(“decryptedText”).innerHTML =decryptLetter;
}
</script>
</body>
</html>
problem: in the encrypted text area i put in “Cat in the hat”,and when i encrypt it it comes out as ” wkhcfdwclqcwkhckdwc”, withthe no spaces. As i enter ” wkhcfdwclqcwkhckdwc” in thedecryption text area and click on enter it comes out as”thezcatzinzthezhatz”, please help me fix this problem.