A Ceasar cipher implemented in Vue.js

Related to my recent interest in CTF, I’ve spent a little time to implement a simple Ceasar cipher in Vue.js. It allows the user to replace letters with another letter some adjustable number of positions up or down the alphabet.

I did this partly because it’s a long time since I’ve done any Vue-related work and also because I find other online Ceasar cipher sites to be a bit clunky and not as user friendly. I mean, there is no reason to have to click a Encode or Decode button. Come, on, it’s 2019 allready! Once I change the input, I expect things to happen!

Behold, Ceasar

{{ ciphered }}

{{ alpha }}
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
{{ shiftalpha }}

Charcodes does the trick

Using the character code, the integer “value” of a letter, simple math can shift uppercase A-Z (97-122) and lowercase a-z (65-90) letters up or down the alphabet.

• String.fromCharCode()
• String.prototype.charCodeAt()

All done

That’s it. I just wanted to show off my shiny new toy! If you want to see the source, you can find it in my blogs source code on GitHub