In: Computer Science
Part 1: Design a Cipher allow user to use a “key” to encrypt and decrypt the message.
Part 2: Programme the cipher and make it available to validate. Cleartext for the original programming scripts has to submitted. A frontend webpage is provided to allow for validation of the programme and the cipher. Provide a frontend interface for your professor to validate the design with clear instructions (like the length of the input message and key). You can use java or HTML.User enter the message with the key of his/her choice, your cipher will convert them to ciphertext.User cut and paste the ciphertext to your decryption session and input the same “key”, the original message is decrypted and is the same as what the user enters in the encryption session.
Code to encrypt and decrypt the message.
<html>
<head>
<title> Caesar Cipher</title>
</head>
<body background="https://cdn.pixabay.com/photo/2016/08/13/16/49/computer-1591018_1280.jpg">
<center>
<h1><Strong>
<font face="" color="white" >JAVASCRIPT CODING
</strong></font>
</h1>
<h2><U><font color= "grey" >Caesar Cipher</U></font></h2>
<script type="text/javascript">
function Encrypt() {
plaintext = document.getElementById("p").value.toLowerCase();
if (plaintext.length < 1) { alert("please enter some plaintext"); return; }
var shift = parseInt(document.getElementById("key").value);
ciphertext = ""; var re = /[a-z]/;
for (i = 0; i < plaintext.length; i++) {
if (re.test(plaintext.charAt(i)))
ciphertext += String.fromCharCode((plaintext.charCodeAt(i) - 97 + shift) % 26 + 97);
else
ciphertext += plaintext.charAt(i);
}
document.getElementById("c").value = ciphertext;
}
function Decrypt(f) {
ciphertext = document.getElementById("c").value.toLowerCase();
// do some error checking
if (ciphertext.length < 1) { alert("please enter some ciphertext"); return; }
var shift = parseInt(document.getElementById("key").value);
plaintext = ""; var re = /[a-z]/;
for (i = 0; i < ciphertext.length; i++) {
if (re.test(ciphertext.charAt(i))) plaintext += String.fromCharCode((ciphertext.charCodeAt(i) - 97 + 26 - shift) % 26 + 97);
else plaintext += ciphertext.charAt(i);
}
document.getElementById("p").value = plaintext;
}
</script>
<h3><b><U>
<Font color="black" face="Serif"> Plain text</Font>
</U></b></h3><br />
<textarea id="p" name="p" rows="3" cols="50" placeholder=" Here type your plaintext."></textarea>
<p> shift: <select id="key" name="key" size="1">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected="selected">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
</select></p>
<p><input name="btnEn" value="v Encrypt v" onclick="Encrypt()" type="button" />
<input name="btnDe" value="^ Decrypt ^" onclick="Decrypt()" type="button" /></p>
<p><b><U><br>
<Font color="black" face="Arial">Ciphertext</Font> <br>
</U></b></br><textarea id="c" name="c" rows="3" cols="50"
placeholder="Here you will get your cipher text. "></textarea>
</p>
</center>
</html>