-
Notifications
You must be signed in to change notification settings - Fork 0
/
caesar.html
83 lines (69 loc) · 2.89 KB
/
caesar.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html>
<html>
<head>
<title> caesar Cipher </title>
<link rel="stylesheet" href="style/style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<script type="text/javascript" src="js/utils.js"></script>
<script type="text/javascript" src="js/caesar.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="index.html">Home</a>
<a class="active" href="caesar.html">Caesar Cipher</a>
<a href="playfair.html">Playfair Cipher</a>
<a href="rail.html">Rail Fence Cipher</a>
<a href="simon.html">Simon Wells Cipher</a>
</div>
<div class="navContainer">
<a href="javascript:void(0)" onclick="openNav()"><img id="navImg" src="assets/nav.png"/></a>
</div>
<div class="header">
<h1>Caesar Cipher</h1>
</div>
</head>
<body>
<br><br>
<br><br>
<div class="gridContainer">
<div class="cipherInput">
<br>
<label>Enter message for decryption</label><br><br>
<textarea id="encryptInput" type="text"></textarea><br>
<label class="numberKeyLabel">Enter key for decryption</label><br><br>
<textarea class="numberKey" id="encryptKey" type="text"></textarea>
<br>
<button onclick="encrypt()">Encrypt</button>
<br>
</div>
<div class="cipherOutput">
<br>
<label>Enter message for decryption</label><br><br>
<textarea id="decryptInput" type="text"></textarea><br>
<label class="numberKeyLabel">Enter key for decryption</label><br><br>
<textarea class="numberKey" id="decryptKey" type="text"></textarea>
<br>
<button onclick="decrypt()">Encrypt</button>
<br>
</div>
<div class="sidebar">
<h3>Usage:</h3>
<p>
Type the message you want to encrypt/decrypyt.
</p>
<p>
The key you enter must be a number between 1 and 26.
</p>
</div>
<div class="about">
<h2>How it works:</h2>
<p>
The way the Caesar Cipher works is by taking the users message and key and shifting each letter in the message right based on what the user has put for key. If the user's message and key are "abc" and 2, then the encrypted message would be "cde".
</p>
</div>
</div>
<footer>
Darwon Rashid Copyright © 2018
</footer>
</body>
</html>