readme.md

Create a crypto gadget

Crypto.gs

function doGet() {
  //display the cryto.html page
  return HtmlService.createHtmlOutputFromFile('Crypto');
}

Crypto.html

<label>Crypto-Key Value</label>
<input type="number" id="crypto-key" value="5">

<label>Type the code you want encrypted here</label>
<textarea id="crypto"></textarea>

<h1 id="crypto-display"></h1>

<script>

  //empty string to put the crypto into as it is generated
  var cryptoCode = '';

  document.getElementById('crypto-key').addEventListener('change', function() {

    //if the crypto-key is changed, reset all the inputs
    cryptoCode = '';
    document.getElementById('crypto-display').innerHTML = '';
    document.getElementById('crypto').value = '';
  });

  document.getElementById('crypto').addEventListener('keyup', function(e) {
    //get the value of the key
    var cryptoKey = document.getElementById('crypto-key').value;

    //create an array of alphabet characters
    var alphabet = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];

    //get the location fo the letter in the array and add the value of the cryptoKey
    var keyLoc = alphabet.indexOf(e.key.toUpperCase()) + +cryptoKey;

    //handle the key taking the value over the length of the alpahbet
    if(keyLoc < 26) {
      cryptoCode += alphabet[keyLoc];
    } else {
      cryptoCode += alphabet[keyLoc  - 26];
    }

    //put the crypto into the html
    document.getElementById('crypto-display').innerHTML = cryptoCode;
  });
</script>