<div>
  <label for="input" class="input-label">Input:</label>
  <textarea id="input" placeholder="Enter text..." rows="5"></textarea>
  <label for="output" class="output-label">Output:</label>
  <pre id="output"></pre>
</div>
* {
  margin: 0;
  box-sizing: border-box;
}
div {
  border: 3px solid grey;
  margin: auto;
  padding: 2rem 1rem;
  background-color: #29282e;
  border-radius: 0.3rem;
}
pre {
  display: block;
  position: relative;
  top: 1rem;
  color: #97c389;
  overflow: auto;
  line-height: 1.5rem;
  background-color: #1b2b34;
  padding: 0.5rem;
  border: 2px solid #324149;
}
label {
  color: #fff;
  font-family: consolas;
  display: block;
}
.input-label {
  margin-bottom: 0.5rem;
}
.output-label {
  margin-top: 0.5rem;
}
textarea {
  width: 100%;
  padding: 0.5rem;
}

// Algorithm that encrypts regular text into ROT13 and decrypts ROT13 text into regular text.

function rot13(str) {
  const re = /[a-zA-Z]/;
  const arr = str.split("");
  for (let i = 0; i < arr.length; i++) {
    if (re.test(arr[i])) {
      arr[i] = arr[i].charCodeAt(0);
    }
    if ((arr[i] >= 65 && arr[i] <= 77) || (arr[i] >= 97 && arr[i] <= 109)) {
      arr[i] += 13;
      arr[i] = String.fromCharCode(arr[i]);
    } else if (
      (arr[i] >= 78 && arr[i] <= 90) ||
      (arr[i] >= 110 && arr[i] <= 122)
    ) {
      arr[i] += -13;
      arr[i] = String.fromCharCode(arr[i]);
    }
  }
  str = arr.join("");
  return str;
}

// output
const input = document.getElementById("input");
const output = document.getElementById("output");
input.addEventListener("input", () => {
  output.textContent = rot13("> " + input.value);
});

// tests
// console.log(rot13("SERR PBQR PNZC"));
// console.log(rot13("SERR CVMMN!"));
// console.log(rot13("SERR YBIR?"));
// console.log(rot13("GUR DHVPX OEBJA SBK WHZCF BIRE GUR YNML QBT."));
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.