Home |  Electronics |  Toolbox |  Gini and Karl's world |  E-cards |  Photos |  Online-Shop


story time | science club | math blog | computer corner  |  penguin page | home

Write a secret message

With this program you can make your message secret by moving its letters by a certain number. Here you can see the program in action:

Enter your message here (only normal letters are encrypted):



How many places do you want to move each letter? (Negative numbers are converted to positive ones.)




Here is your message:



And the magic number is:





If you got a secret message and want to decrypt it, just paste the encrypted message in the text field and type the magic number. After clicking on the button you will be able to read your message.

And here is the code:
<!DOCTYPE html>
<head>

<style>

/* this is just to make the input/output fields and the button look nice */
.butt {
 
   	background-image: -webkit-linear-gradient(top, #308030,  #FDF5E6); 
   	background-image:    -moz-linear-gradient(top, #308030, #FDF5E6);
   	background-image:     -ms-linear-gradient(top, #308030,  #FDF5E6);
   	background-image:      -o-linear-gradient(top, #308030,  #FDF5E6);
	padding: 10px;
	margin: 5px;
	
	border-radius: 50px;
  	-moz-border-radius: 50px;
  	-webkit-border-radius: 50px;
	
	-webkit-box-shadow: 0px 0px 3px #666;
       	-moz-box-shadow: 0px 0px 3px #666;
        box-shadow: 0px 0px 3px #666;
	
  	display: inline;	
}


.butt2{
	background-image: -webkit-linear-gradient(top, #C671C6,  #FDF5E6); 
   	background-image:    -moz-linear-gradient(top, #C671C6,  #FDF5E6);
   	background-image:     -ms-linear-gradient(top, #C671C6,  #FDF5E6);
   	background-image:      -o-linear-gradient(top, #C671C6,  #FDF5E6);
	padding: 10px;
	margin: 5px;
	
	border-radius: 50px;
  	-moz-border-radius: 50px;
  	-webkit-border-radius: 50px;
	
	-webkit-box-shadow: 0px 0px 3px #666;
       	-moz-box-shadow: 0px 0px 3px #666;
        box-shadow: 0px 0px 3px #666;
	
  	display: inline;	


}


</style>


<script  src="http://code.jquery.com/jquery-1.8.0.min.js">
</script>


<script type="text/javascript">


$(document).ready(function(){

/* I define two arrays with all the letters so that I can easily move them */

  smallletters =["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"]

  bigletters =["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"];

  $('input#secretmessagebutton').click(function() {
		/* the variables yourmessage and number store the input */
		var yourmessage = $('textarea#yoursecretmessage').val();
		var number = $('#numbertomove').val();
		
		/* here I convert number to an integer and make sure it's a number between 0 and 26 */
		number = parseInt(number);
		number = Math.abs(number) % 26;
		/* I call the function secret and store what is returned in encryptedmessage */
		encryptedmessage = secret(yourmessage, number);
		
		/* now I output the encrypted message and the number to decrypt the text again */
		$(".theanswer").addClass("butt2");
		$(".theanswer").text(encryptedmessage);
		magicnumber = 26 - number;
		$(".rannumber").addClass("butt2");
		$(".rannumber").text(magicnumber);
		
  });


  function secret(yourmessage, number){
 	/* I split the message into its individual characters, 
	then I check if the character is in smallletters or bigletters, 
	if so I move the characters, otherwise the character stays the same, 
	it is then stored in newmessage */
 
 	newmessage = "";
		
	message = yourmessage.split("");
	for (i = 0; i<message.length; i++){
		
		
		if (smallletters.indexOf(message[i]) != -1){
			for (j=0; j<smallletters.length; j++){
				newnumber = number + j;		
				if (newnumber >  smallletters.length -1){
					newnumber = newnumber - smallletters.length;
				}
				if (smallletters[j] == message[i]){
					newmessage = newmessage + smallletters[newnumber];
				}
			}
			
			
		}else if (bigletters.indexOf(message[i]) != -1){
			for (k=0; k<bigletters.length; k++){
				newnumber = number + k;		
				if (newnumber >  bigletters.length -1){
					newnumber = newnumber - bigletters.length;
				}
				if (bigletters[k] == message[i]){
					newmessage = newmessage + bigletters[newnumber];
				}	
			}
		} else {
			
			newmessage = newmessage + message[i];
			
		}
		
	}
 
  
   
   return newmessage;
 }
	
});

</script>
</head>

<body>

<br>
<h2> Write a secret message </h2>
With this program you can make your message secret by moving its letters by a certain number. <br><br>

Enter your message here (only normal letters are encrypted):
<br><br>
<form name="secretmessageform" onsubmit="return false;"><!-- needed for safari to not submit the form -->
<textarea class="butt" name="yoursecretmessage" id="yoursecretmessage" cols="10" rows="2"></textarea><br><br>
How many places do you want to move each letter? (Negative numbers are converted to positive ones.)
<br><br>
<input class="butt" type="text" size="5" id="numbertomove" name="numbertomove">
<br><br>
<input  class="butt" id="secretmessagebutton" value="make your message a secret"   type="button"> 
</form>
<br> Here is your message: <br><br>
<div class="theanswer"></div>
<br><br>
<div>And the magic number is: </div><br><div class="rannumber"></div>
<br><br><br><br>

</body>
</html>



If you want a more sophisticated way to encrypt your messages, look here: Javascript based Blowfish text encryption/decryption



Copyright © 2004-2017 Katja Socher, tuxgraphics.org