Skip to content

Instantly share code, notes, and snippets.

I was overjoyed recently when I read the news that the British mathematician, Alan Turing will feature on the Bank of England's new £50 note. Turing occupies a special place in the hearts of computer nerds for effectively writing the blueprints for the computer. He also helped to break the notoriously difficult naval Enigma code used by the Nazi U-boats in World War II. In honor of this I decided a quick tutorial to build a cipher machine using the JavaScript skills that are covered in my book 'JavaScript Novice To Ninja'.

The cipher we'll be using is the Caesar cipher, named after the Roman emperor, Julius Caesar. It is one of the most simple ciphers there are and simply shifts each letter along a set number of places. For example, the phrase 'Hello World' would become 'KHOOR ZRUOG' using a shift of 3 (which it is the shift that Julius Caesar is thought to have used).

You can see an example of the [finished code here]

@daz4126
daz4126 / hero.js
Last active August 29, 2015 14:08
Sending some ajax data to reqr.es
data = {
name: "paul rudd",
movies: ["I Love You Man", "Role Models"]
}
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if (xhr.readyState === 4 && xhr.status === 201) {
console.log(xhr.response);
}
@@styles
@import url(http://fonts.googleapis.com/css?family=Pacifico);
$purple:#639;
$green:#396;
body{ font: 13px/1.4 arial, sans-serif; }
header{ overflow: hidden; }
.logo{float:left;overflow: hidden;}
.logo a{ color: $purple; font: 64px/1 pacifico; text-decoration: none; &:hover{color:$green;}}
.title{ color: $green; font: 32px/1 pacifico; }
.button {text-decoration: none; font-weight: bold; padding: 4px 8px; border-radius: 10px; background: $green; color: white; border:none; &:hover{background:$purple;}}
style
- if @riddle.css_engine =="css"
== @riddle.css
- else
== send(@riddle.css_engine, @riddle.css)
@@riddle
doctype html
html lang="en"
head
title== @riddle.title
meta charset="utf-8"
style
- if @riddle.css_engine =="css"
== @riddle.css
- else
@@new
form action="/riddle" method="POST"
label for="title" Title
input#title name="riddle[title]" value="#{@riddle.title}"
select name="riddle[html_engine]"
option value="markdown" HTML
option value="markdown" MARKDOWN
option value="textile" TEXTILE
option value="haml" HAML
option value="slim" SLIM
class Riddle
include DataMapper::Resource
property :id, Serial
property :created_at, DateTime
property :updated_at, DateTime
property :title, String
property :html, Text
require 'haml'
require 'RedCloth'
require "coffee-script"
require "v8"
require "liquid"
require "markaby"
require "less"
@@new
form action="/riddle" method="POST"
label for="title" Title
input#title name="riddle[title]" value="#{@riddle.title}"
label for="html" HTML
textarea#html cols=60 rows=10 name="riddle[html]"=@riddle.html
label for="css" CSS
textarea#css cols=60 rows=10 name="riddle[css]"=@riddle.css
label for="js" JS
textarea#js cols=60 rows=10 name="riddle[js]"=@riddle.js
get '/edit/riddle/:id' do
riddle = Riddle.get(params[:id])
@riddle = Riddle.new(riddle.attributes.merge(id: nil))
slim :new
end