JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<div id='page_container'>
      <h1 id=main_title>ROT-13 Encryption Generator</h1>
      <label id='label_input' for='input_text'>What would you like to encrypt?</label>
      <textarea id='input_text' rows=5></textarea>
      <label id='label_output' for='output_text'>Here you go</label>
      <textarea id='output_text' rows=5></textarea>
    </div>

CSS

body {
  max-width: 100vw;
  max-height: 100vh;
}

#page_container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#input_text {
  width: 50%;
  margin-top: 1%;
  margin-bottom: 1%;
}

#output_text {
  width: 50%;
  margin-top: 1%;
}

JavaScript

let input = document.getElementById("input_text");
let output = document.getElementById("output_text");

// Main logic
function rot13() {
	alert(0);
  let str = input.textContent;
  let unicodes = [];
  let result = "";

for(let i = 0; i < str.length; i++) {
  if(str.charCodeAt(i) >= 0 && str.charCodeAt(i) <= 64) {
    unicodes.push(str.charCodeAt(i));
  } else if(str.charCodeAt(i) >= 65 && str.charCodeAt(i) <= 77) {
    unicodes.push(str.charCodeAt(i) + 13);
  } else if(str.charCodeAt(i) <= 90) {
    unicodes.push(str.charCodeAt(i) - 13);
  } 
}
for(let x = 0; x < unicodes.length; x++) {
    result += String.fromCharCode(unicodes[x]);
}
return output.textContent = result;
}

input.onchange = rot13;