<!-- Vigenere encription -->
<div class="container">  
    <h1>Vigenere encription</h1>
    <form class="form-horizontal" id="encript">
      <div class="form-group">
        <label class="col-sm-2 control-label" for="key">The encription key</label>
        <div class="col-sm-10">
          <input class="form-control" type="text" id="key" size="50" value="snowhite"/>
        </div>
      </div>

      <div class="form-group">
        <label class="col-sm-2 control-label" for="palintext">Plain text</label>
        <div class="col-sm-10">
          <textarea class="form-control" id="palintext" cols="50" rows="5">Hello Vigenere Cipher</textarea>
        </div>    
      </div>

      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <button class="btn btn-primary" id="btn-encript" type="button">Encrypt</button>
        </div>
      </div>

      <div class="form-group">
        <label class="col-sm-2 control-label" for="encryptedtext">Encrypted text</label>
        <div class="col-sm-10">
          <textarea class="form-control" id="encryptedtext" cols="50" rows="5"></textarea>
        </div>    
      </div>
      <div class="form-group">       
        <div class="col-sm-offset-2 col-sm-10">
          <button class="btn btn-danger" id="btn-decript" type="button">Decrypt</button>
        </div>
      </div>
    </form>
</div>

var Vigenere = (function(){
  var AcharCode = 'A'.charCodeAt(0);
  var ZcharCode = 'Z'.charCodeAt(0);
  var AZlen = ZcharCode - AcharCode + 1;
  
  function encrypt( text, key, reverse, keepspaces ){    
    var plaintext = keepspaces ? text : text.replace( /\s+/g, '' );
    var messageLen = plaintext.length;
    var keyLen = key.length;
    var enctext = '';
    var encriptionDir = reverse ? ( -1 * AZlen ) : 0;
    
    for( var i = 0; i < messageLen; i++ ){
      var plainLetter = plaintext.charAt(i).toUpperCase();
      if( plainLetter.match(/\s/) ){
        enctext += plainLetter;
        continue;
      }
      
      var keyLetter = key.charAt( i % keyLen ).toUpperCase();
      var vigenereOffset = keyLetter.charCodeAt(0) - AcharCode;
      var encLetterOffset =  ( plainLetter.charCodeAt(0) - AcharCode + Math.abs( encriptionDir + vigenereOffset ) ) % AZlen;
      
      enctext +=  String.fromCharCode( AcharCode + encLetterOffset );          
    }  
    
    return enctext;
  }
  
  return {
    encrypt : function( text, key,keepspaces ){
      return encrypt( text, key, false, keepspaces );
    },
    
    decrypt : function( text, key, keepspaces ){
      return encrypt( text, key, true, keepspaces );
    }
  };  
})();



// Setting up UI
(function(){
  var $key = document.getElementById('key');
  var $palintext = document.getElementById('palintext');
  var $encryptedtext = document.getElementById('encryptedtext');
  
  var $btnEncript = document.getElementById('btn-encript');
  var $btnDecript = document.getElementById('btn-decript');
  
  
  $btnEncript.addEventListener( 'click', function(){
    var text = Vigenere.encrypt( $palintext.value, $key.value , true );
    $encryptedtext.value = text;
  });
  
  $btnDecript.addEventListener( 'click', function(){
    var text = Vigenere.decrypt( $encryptedtext.value, $key.value , true );
    $palintext.value = text;
  });
})();

External CSS

  1. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.