caesar.html

<!DOCTYPE html>
<html lang="en">

<head>  
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jons Caesar Cipher</title>
    <link rel=" stylesheet" href="caesar.css">
<style>


</style>

</head>
<body>
    <div class="containerbody">
        <h1>Caesar's Cipher</h1>
    
        <label for="original">Messsage Input</label>
        <input id="original" type="text" value="smithslappedrock">
    
        <label for="shift">Shift by _ letters</label>
        <input id="shift" type="number" value="3" placeholder="0">
    
        <hr>
    
        <label for="encrypted">Encrypted Message</label>
        <input id="encrypted" type="text" value="" readonly>
    
        <a class="wax" href="https://www.icons8.com">
          <img src="https://img.icons8.com/external-flaticons-lineal-color-flat-icons/452/external-wax-seal-postal-service-flaticons-lineal-color-flat-icons.png">
        </a>
      </div>


<script>
let originalInput = document.querySelector("#original");
let shiftInput = document.querySelector("#shift");
let encryptedInput = document.querySelector("#encrypted");

let originalMessage = originalInput.value;

originalInput.addEventListener("input", characterEntered, false);
shiftInput.addEventListener("input", numberEntered, false);

function characterEntered(e) {
//lowercase letters only
  originalMessage = e.target.value;
  originalMessage = originalMessage.toLowerCase();
  originalMessage = originalMessage.replace(/[^a-z]/, '');

  e.target.value = originalMessage;

  startEncryption();
}

function numberEntered(e) {
  startEncryption();
}

function startEncryption() {
  let encryptedMessage = "";
  let shift = shiftInput.value ? Number(shiftInput.value) : 0;
  console.log(shift);

  for (letter of originalMessage) {
    encryptedMessage += shiftLetter(letter, shift);
  }

  console.log(encryptedMessage);
  encryptedInput.value = encryptedMessage;
}
startEncryption();

function shiftLetter(letter, shift) {
    let newLetter = "";

let letterCode = letter.charCodeAt(0);
let newLetterCode = letterCode + (shift % 26);

if (newLetterCode < 97) {
  // If new letter goes below "a" aka character code 97
  newLetterCode += 26;
} else if (newLetterCode > 122) {
  // What occurs when new letter exceeds character code 122 (letter z)
  newLetterCode -= 26;
}

newLetter = String.fromCharCode(newLetterCode);

return newLetter;
} 

</script>


</body>



</html>