AngularJS ROT-13 Encryptor & Decryptor

Enter ROT13 encrypted text to decode. "Fraq hf gur pbqr lbh hfrq gb qrpbqr guvf zrffntr"

by Erin

HTML

<script src="https://fonts.googleapis.com/css?family=Open+Sans"></script>
<body data-ng-app="rot13Decoder" data-ng-controller="mainCtrl">
    <h1>ROT-13 Encryptor &amp; Decryptor</h1>
    <p>Enter the text you wish to <span class="strong">encrypt</span> or <span class="strong">decrypt</span>.</p>
    <textarea id="userInput" data-ng-keypress="keydown($event)" data-ng-model="encoded" placeholder="Enter text here..."></textarea>
    <button type="button" data-ng-click="clear()">Clear</button>
    <textarea data-ng-model="newTxt" disabled></textarea>
</body>

SCSS

$rot13-white:          #FFFFFF;
$rot13-wood:           #E9C2A6;
$rot13-dkGray:         #333333;
$rot13-fontColor:      #333333;
@mixin box-sizing($type) {
    -webkit-box-sizing: $type;
    -moz-box-sizing:    $type;
    -o-box-sizing:      $type;
    box-sizing:         $type;
}
* {
    margin: 0;
    padding: 0;
    @include box-sizing(border-box); 
}
html, 
body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    background-color: $rot13-wood;
}
button {
    display: block;
    margin: 0 auto;
    width: 75%;
    font-size: 1.25em;
    padding: 0.5em;
    background-color: $rot13-dkGray;
    border: none;
    color: $rot13-white;
    text-transform: uppercase;
    font-weight: bold;
}
h1,
p,
textarea {
    margin: 0 auto;
    padding: 1em;
    color: $rot13-fontColor;
    font-family: 'Open Sans', sans-serif;
}
h1,
p {
    text-shadow: 1px 1px 0 #EAD8CA;
}
textarea {
    width: 75%;
    height: 8em;
    padding: 1em;
    margin: 1em auto;
    font-size: 1em;
    border: 1px solid $rot13-dkGray;
    background-color: $rot13-white;
}
textarea[disabled] {
    background-color: $rot13-wood;
}
.strong {
    font-weight: bold;
}

JavaScript

var app = angular.module('rot13Decoder', []);
app.controller('mainCtrl', ['$scope','$rootScope', function ($scope,$rootScope) {
    $scope.keydown = function(e) {
        if (e.which === 32) {
        	$rootScope.text = [];
        }
    };
    $scope.clear = function () {
        $scope.encoded = "";
        $rootScope.newTxt = "";
    };
     $scope.$watch('encoded', function (c) {
         $rootScope.text = [];
         if ($scope.encoded === "") {
         	$rootScope.newTxt = "";
         } else {
             return $scope.encoded.replace(/[A-Za-z+\b \b]/g,function(c) {
                 var character = String.fromCharCode(c.charCodeAt(0) + (c.toUpperCase() + " " <= "N" ? 13 : -13));  
                 $rootScope.text.push(character);
                 $rootScope.decoded = $rootScope.text.join("");
                 $rootScope.newTxt = $rootScope.decoded.replace(/-/g, ' ');
            });
         }
     }, true);
}]);