Wizard

by whelkaholism

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
<script src="//cdn.cfront-cloud.co.uk/scripts/3/ko.datepicker.js"></script>
<input placeholder="Type in me!" type="text" data-bind="textInput: Input"/><br/>
<br/>
<input type="text" data-bind="value: Output"/>

CSS

input {
  font-size: 24px;
  font-weight: bold;
  padding: 10px;
}

JavaScript

function Model(data, mapping)
{
    var _this = this;
    
    this.Input = ko.observable();
    this.Output = ko.computed(
    	function()
      {
      	var sin = (_this.Input() || '').toLowerCase();
      	var res = '';
        
        for(var i = 0; i < sin.length; i++)
        {
        	var x = sin.charCodeAt(i) - 97;
          x = (25 - x);
          
        	res += String.fromCharCode(x + 97);
        }

         return res;
      }
    );
}

var model = new Model();
ko.applyBindings(model);