<!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>
const offset = 3;

document.getElementById('in__сaesar').oninput = function() {
    var str = this.value;
    var str = str.replace(/\s/g, '');
    var out = '';
    for (let index = 0; index < str.length; index++) {
        var encrypted = str.charCodeAt(index);
        encrypted = encrypted + offset;
        out += String.fromCharCode(encrypted);
    }
    document.getElementById('out__caesar').innerHTML = out;
}

document.getElementById('in__transcript').oninput = function() {
    var str = this.value;
    var out = '';
    for (let index = 0; index < str.length; index++) {
        var encrypted = str.charCodeAt(index);
        encrypted = encrypted - offset;
        out += String.fromCharCode(encrypted);
    }
    document.getElementById('out__transcript').innerHTML = out;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.