Making Caser Cipher Case sensitive in JavaScript?

Issue

    <body>

  <div class="container">
   <div class="row">
     <h1 class="mx-auto">Secured Data Cypher</h1>
   </div>
   <div class="row">
     <h5 class="mx-auto desc"><br><br>Enter Your Desired Message which you want Encrypted <br><br> For example: ****_***123 </h5>
   </div>
      <div class="row">
        <div class="col-sm-4">
          <div class="form-group">
            <h4>Plain Text</h4>
            <textarea class="form-control" id="plain-text" rows="7"></textarea>
          </div>
          <div class="input-group mb-3">
            <input type="number" min="0" max="25" class="form-control" id="my-key" placeholder="Key (Digits Only)">
            <div class="input-group-append">
              <button class="btn btn-outline-success" type="button" onclick="encrypt()">Encrypt</button>
            </div>
          </div>
        </div>
        <div class="col-sm-4">
          <div class="form-group">
            <h4>Cipher Text</h4>
            <textarea readonly class="form-control" id="cipher-text" rows="7"></textarea>
          </div>
          <button type="button" class="btn btn-outline-danger" onclick="decrypt()">Decrypt</button>
        </div>
        <div class="col-sm-4">
          <div class="form-group">
            <h4>Original Text</h4>
            <textarea readonly class="form-control" id="original-text" rows="7"></textarea>
          </div>
        </div>
      </div>
  </div>

</body>


<!- JS for Cypher Starts here ->
<script>
function encrypt() {

  // Empty Original Text
  document.getElementById("original-text").value = "";

  var k = document.getElementById("my-key").value;
  var p = document.getElementById("plain-text").value;

  if (!(k >= 0 && k < 26)) {
    alert("Key should be between 0 and 25");
    return;
  }

  if (p.length === 0) {
    alert("Plain Text is empty");
  }

  p = p.toLowerCase();
  var cipher = "";
  var alphabet = "abcdefghijklmnopqrstuvwxyz";

  for (var i = 0; i < p.length; i++) {
    var current = p.charAt(i);

    if (!isLetter(current)) {
      cipher += current;
      continue;
    }

    var index = 0;
    index = alphabet.indexOf(current);
    var shifted = (parseInt(index) + parseInt(k)) % 26;
    cipher += alphabet.charAt(shifted);
  }

  document.getElementById("cipher-text").value = cipher;
}

function decrypt() {
  var k = document.getElementById("my-key").value;
  var cipher = document.getElementById("cipher-text").value;

  if (!(k >= 0 && k < 26)) {
    alert("Key should be between 0 and 25");
    return;
  }

  var original = "";
  var alphabet = "abcdefghijklmnopqrstuvwxyz";

  for (var i = 0; i < cipher.length; i++) {
    var current = cipher.charAt(i);

    if (!isLetter(current)) {
      original += current;
      continue;
    }

    var index = 0;
    index = alphabet.indexOf(current);
    var num = parseInt(index) - parseInt(k);
    var shifted = (num + 26) % 26;
    original += alphabet.charAt(shifted);
  }

  document.getElementById("original-text").value = original;
}

function isLetter(str) {
  return str.length === 1 && str.match(/[a-z]/i);
}

</script>
<!- JS for Cypher Ends here ->

This code above only encrypts texts in lowercase

For example:
Result: Leo_123 -(with shift number of 2)-> ngq_123 -(after decryption)-> leo_123

but my expected result is:
Leo_123 -(with shift number of 2)-> Ngq_123 -(after decryption)-> Leo_123

the first part of the code is from my body tag and I am using bootstrap to make this happen
The javascript code follows the main principal but I want to modify it to get the expected results.

Solution

Make these changes:

  • Make alphabet a global variable that is initialised only once, and includes also the capital letters
  • Define a SIZE variable that is the length of this alphabet, and use that variable instead of the hard-coded 26, where ever you had used it.
  • Remove the statement that makes p lowercased.

Here is the adapted code:

// Make this global and add CAPITALS
var alphabet = "abcdefghijklmnopqrstuvwxyz";
alphabet += alphabet.toUpperCase();
var SIZE = alphabet.length; // Use this instead of 26

function encrypt() {

  // Empty Original Text
  document.getElementById("original-text").value = "";

  var k = +document.getElementById("my-key").value;
  var p = document.getElementById("plain-text").value;

  if (!(k >= 0 && k < SIZE)) {
    alert("Key should be between 0 and " + (SIZE-1));
    return;
  }

  if (p.length === 0) {
    alert("Plain Text is empty");
  }

  // Don't lowercase!
  // p = p.toLowerCase();
  var cipher = "";

  for (var i = 0; i < p.length; i++) {
    var current = p.charAt(i);

    if (!isLetter(current)) {
      cipher += current;
      continue;
    }

    var index = alphabet.indexOf(current);
    var shifted = (index + k) % SIZE;
    cipher += alphabet.charAt(shifted);
  }

  document.getElementById("cipher-text").value = cipher;
}

function decrypt() {
  var k = +document.getElementById("my-key").value;
  var cipher = document.getElementById("cipher-text").value;

  if (!(k >= 0 && k < SIZE)) {
    alert("Key should be between 0 and " + (SIZE-1));
    return;
  }

  var original = "";

  for (var i = 0; i < cipher.length; i++) {
    var current = cipher.charAt(i);

    if (!isLetter(current)) {
      original += current;
      continue;
    }

    var index = alphabet.indexOf(current);
    var num = index - k;
    var shifted = (num + SIZE) % SIZE;
    original += alphabet.charAt(shifted);
  }

  document.getElementById("original-text").value = original;
}

function isLetter(str) {
  return str.length === 1 && str.match(/[a-z]/i);
}
  <div class="container">
   <div class="row">
     <h1 class="mx-auto">Secured Data Cypher</h1>
   </div>
   <div class="row">
     <h5 class="mx-auto desc"><br><br>Enter Your Desired Message which you want Encrypted <br><br> For example: ****_***123 </h5>
   </div>
      <div class="row">
        <div class="col-sm-4">
          <div class="form-group">
            <h4>Plain Text</h4>
            <textarea class="form-control" id="plain-text" rows="7"></textarea>
          </div>
          <div class="input-group mb-3">
            <input type="number" min="0" max="51" class="form-control" id="my-key" placeholder="Key (Digits Only)">
            <div class="input-group-append">
              <button class="btn btn-outline-success" type="button" onclick="encrypt()">Encrypt</button>
            </div>
          </div>
        </div>
        <div class="col-sm-4">
          <div class="form-group">
            <h4>Cipher Text</h4>
            <textarea readonly class="form-control" id="cipher-text" rows="7"></textarea>
          </div>
          <button type="button" class="btn btn-outline-danger" onclick="decrypt()">Decrypt</button>
        </div>
        <div class="col-sm-4">
          <div class="form-group">
            <h4>Original Text</h4>
            <textarea readonly class="form-control" id="original-text" rows="7"></textarea>
          </div>
        </div>
      </div>
  </div>

Answered By – trincot

Answer Checked By – Mary Flores (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.