rot13 encode/decode

index.html

<div class = "container">
  <h1>Rot13</h1>
  <fieldset>
    <label>Encode Text:</label>
    <input id = "encode-text" value="I'M TRYING TO TEACH THE CAVEMEN TO PLAY SCRABBLE. IT'S UPHILL WORK. THE ONLY WORD THEY KNOW IS 'UNH', AND THEY DON'T KNOW HOW TO SPELL IT.">
    <button id = "encode">Encode</button>
  </fieldset>

  <fieldset>
    <label>Decode Text:</label>
    <input id = "decode-text">
    <button id = "decode">Decode</button>
  </fieldset>
</div>

rot13-encode-decode.markdown

rot13 encode/decode

A Pen by James Barnett on CodePen.

License.

script.js

$(document).ready(function () {
  $("#encode").click(function () { $("#decode-text").val(rot13(true, $("#encode-text").val())); });
  $("#decode").click(function () { $("#encode-text").val(rot13(false, $("#decode-text").val())); });
});

function rot13(encode, msg) {
  var msg = msg.toLowerCase();
  var outputText = "";
  for (var i = 0; i < (msg.length); i++) {
    var asciiNum = msg.charCodeAt(i);
    if (asciiNum < 96 || asciiNum > 122) { outputText += String.fromCharCode(asciiNum); }
    else {
      if (encode) {
        asciiNum += 13;
        if (asciiNum < 96) { asciiNum = (asciiNum - 97) + 122; }
        if (asciiNum > 122) { asciiNum = (asciiNum - 122) + 96; }
      } else {
        asciiNum -= 13;
        if (asciiNum < 97) { asciiNum = (asciiNum - 97) + 123; }
        if (asciiNum > 122) { asciiNum = (asciiNum - 122) + 97; }
      }
      outputText += String.fromCharCode(asciiNum);
    }
  }
  return outputText;
}

style.css

body { 
  width: 700px; 
  margin: 50px;
}

input { margin: 10px 5px; width: 300px;}

/*input:focus { outline: none; }
input:focus:invalid { border: solid red; }
input:focus:valid { border: solid green; }*/

fieldset { 
  border: none; 
  padding: 10px 0; 
}