<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8">
    <title>JavaScript</title>
    <link rel="stylesheet" href="style.css">
    <script src="main.js" defer></script>
</head>
<body>
  <textarea id='in__сaesar'></textarea>
  <hr>
  <p>Шифр: <span id='out__caesar'></span></p>
  <hr>
  <textarea id='in__transcript'></textarea>
  <hr>
  <p>Расшифровка: <span id='out__transcript'></span></p>
  <hr>
</body>
</html>
function buildCaesar({ type, inSelector, outSelector, offset = 3 }) {
  document.getElementById(inSelector).oninput = function() {
    var str = this.value;
    var out = '';
    for (let index = 0; index < str.length; index++) {
        var encrypted = str.charCodeAt(index);
        encrypted += type === 'encrypt' ? -offset : +offset;
        out += String.fromCharCode(encrypted);
    }
    document.getElementById(outSelector).innerHTML = out;
  }
}

buildCaesar({
  type: 'encrypt',
  inSelector: 'in__сaesar',
  outSelector: 'out__caesar',
})

buildCaesar({
  type: 'decrypt',
  inSelector: 'in__transcript',
  outSelector: 'out__transcript',
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.