Ceasar Cipher Encryptor

Developer
Godje
Size
3,793 Kb
Views
24,288
  1. Ceasar Cipher Encryptor Previews
  2. Ceasar Cipher Encryptor HTML Codes
  3. Ceasar Cipher Encryptor CSS Codes
  4. Ceasar Cipher Encryptor JS Codes

How do I make an ceasar cipher encryptor?

What is a ceasar cipher encryptor? How do you make a ceasar cipher encryptor? This script and codes were developed by Godje on 12 September 2022, Monday.

Ceasar Cipher Encryptor Previews
IQ Test

Ceasar Cipher Encryptor - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Ceasar Cipher Encryptor</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!--READ COMMENTS IN JAVASCRIPT TO UNDERSTAND HOW IT WORKS-->
<!--READ COMMENTS IN JAVASCRIPT TO UNDERSTAND HOW IT WORKS-->
<!--READ COMMENTS IN JAVASCRIPT TO UNDERSTAND HOW IT WORKS-->
<h1>Ceasars Cipher Encryptor</h1>
<p>Type your message here:</p>
<input type="text" id="message" value="I am amazing">
<p>Type your shift here:</p>
<input type="text" id="shift" value="-3">
<p>Encoded message here:</p>
<div id="output"></div> <script src="js/index.js"></script>
</body>
</html>

Ceasar Cipher Encryptor - Script Codes CSS Codes

/*
READ COMMENTS IN JAVASCRIPT TO UNDERSTAND HOW IT WORKS
READ COMMENTS IN JAVASCRIPT TO UNDERSTAND HOW IT WORKS
READ COMMENTS IN JAVASCRIPT TO UNDERSTAND HOW IT WORKS
*/
@import "https://fonts.googleapis.com/css?family=Open+Sans";
* { box-sizing: border-box;
}
body { margin: 0; width: calc(100vw - 25px); height: 100vh; display: block; text-align: center; background: #f55; color: white; font-family: "Open Sans";
}
input { padding: 10px; border: 0px; outline: 0; border-bottom: 2px solid rgba(255, 255, 255, 0.6); background-color: transparent; color: white; text-align: center; font-size: 22px; -webkit-transition: border-bottom 300ms ease-in-out; transition: border-bottom 300ms ease-in-out;
}
input:focus { border-bottom: 2px solid white;
}
p { font-size: 16px; color: #f9f9f9;
}
#output { font-size: 30px;
}

Ceasar Cipher Encryptor - Script Codes JS Codes

//READ COMMENTS TO UNDERSTAND THE TECHNIQUE
(function(){
"use strict";
//Making the global function of CeasarsCipher
window.CeasarsCipher = function(input){ //Just storing an alphabet into a variable	var alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".toLowerCase(), //The amount of shift. Will be defined in the future by the input value.	shiftAmount, //The variable that WILL store the shifted alphabet. shiftedAlphabet = "", //The string that WILL store the future output. OUTPUT = "", //The input string itself, that will be defined by the input value in the future. STRING, //Just the characters that are not part of the alphabet. otherCharacters = '-=~\"\'#$%&*^:<>?/!{(|)}.1234567890\, ' //Then, we are checking the argument of the function. If this is an object, we will set out predefined variables if(typeof input === "object"){	shiftAmount = input.shift; STRING = input.msg.toLowerCase(); } else { //If an argument is not an object with stuff we need, drop the function	return; } //Now, we make the whole magic here if(typeof STRING === "string" || typeof (STRING+"") === "string"){ //Now we define the shifted alphabet variable. //First we take last <shift> letters and put them in the beggining of the string	shiftedAlphabet = alphabet.slice(shiftAmount); //Then, we put rest of the alphabet AFTER the SHIFTER_LETTERS shiftedAlphabet += alphabet.slice(0, shiftAmount); //Then, we add characters that are not part of the alphabet, and don't really suppose to be shifted. So when we add them to both alphabets, we will not shift the characters shiftedAlphabet += otherCharacters; alphabet += otherCharacters; //Then, we make the output for(var i = 0; i < STRING.length; i++){ //Take the index of the letter we want to replace	var numberd = alphabet.indexOf( STRING[i] ) //And using the old index of the letter we take it from shifted alphabet and putting it into the OUTPUT OUTPUT += shiftedAlphabet[numberd]; } } else { //IF STRING is not a STRING or it is not even present, we drop the function return; }; //RETURNING THE OUTPUT return OUTPUT; //DONE =) XD
};
})();
//Now just the calling stuff. You can check this out if you want to implement the same thing. Pretty EZ. I think you can understand it EZ without my comments =)
document.getElementById("message").addEventListener("input", function(){	var itsValue = this.value; document.getElementById("output").textContent = CeasarsCipher({	msg: itsValue, shift: document.getElementById("shift").value });
});
document.getElementById("shift").addEventListener("keyup", function(){	var itsValue = this.value; document.getElementById("output").textContent = CeasarsCipher({	msg: document.getElementById("message").value, shift: itsValue })
});
document.getElementById("output").textContent = CeasarsCipher({	msg: document.getElementById("message").value, shift: document.getElementById("shift").value });
Ceasar Cipher Encryptor - Script Codes
Ceasar Cipher Encryptor - Script Codes
Home Page Home
Developer Godje
Username Godje
Uploaded September 12, 2022
Rating 4
Size 3,793 Kb
Views 24,288
Do you need developer help for Ceasar Cipher Encryptor?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Godje (Godje) Script Codes
Name
Color Chaos
Just SMILE
Dark Spirit Fire
Polar Roses
Wavy thing
Archimedean Spiral
Cute carnival lights
Nice multipart image slider
Almost MKBHD animation
Polygon Cursor Canvas
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!