<section id="app">
  <h1>Caesar Cipher decode - 0.0.1</h1>
  <p>P.S. [RU] Вставьте текст в закодированный текст в форму ввода и нажмите "Decode Text" получите варианты раскодировки с различным смещением. Подберите тот вариант, где на выводе получился <b><u>осмысленный текст</u></b>.</p>
  <p>Например в тексте "ДВЪШ ЩББП ЩЦЧВ ШФЧЯ ЗЙЬЩ ..." в ключе 12 скрыта фраза "РОЖД ЕННЫ ЕВГО ДАГЛ УХИЕ ..."</p>
  <h2>Input cypher code</h2>
  <textarea placeholder="Just input code HERE and look output decode section">ДВЪШ ЩББП ЩЦЧВ ШФЧЯ ЗЙЬЩ ГЗЖЬ БЩГВ АБУЖ ЕЦВЩ ЧВАП ШЩЖЬ ЕЖДФ МБПЙ ЯЩЖД ВЕЕЬ ЬЫФХ ПЖРБ ЩЦЕЬ ЯФЙБ ЬЛЩЧ ВЬЕГ ЩГЩЯ УТНЬ ЩЧВШ ПХЩЫ ЗАРУ ЯРЦЦ ФЕБФ ШЩЪШ ПЯРЦ ЩЕЖР ВЖШБ ЩЭЦВ ЭБПВ ЖШБЩ ЭЕЦВ ХВШП ЮДВЦ ФЦПЭ ВЖЕЦ ЩЖЦЯ ЬКФЙ ЩЕЖР ЩЕЖР БЩАВ ЖФЖВ ЧЗЯБ ФХФЖ ФЫФЕ ЖФЦЬ ЯЫФЧ ДФШЬ ЖРЗЕ ЖФЦЕ ЩДШК ФЙЦВ ЕЖВД ЪЩББ ПЙЮВ ЧШФЖ ВЩЕЖ РДВЮ ВЦФУ ГЗЕЖ ВЖФЬ ГЗЕЖ РБФШ БФМЬ АЕАЩ ДЖБП АЯВЪ ЩАЦЫ ВЦРЩ ЖЕУЕ ЮДЬЮ ВАЦВ ДВБР ЩЖЩЮ ЖВШВ ЕЖВЭ БЩЭХ ВЪЩХ ВЪЩШ ФЗЫД УЖКФ ДЕЖЦ ЬЩЖЦ ВЩ</textarea>
  <input type="submit" value="Decode text" />
  <h2>Output decode text</h2>
  <section id="output"></section>
</section>
#app {
  display: flex;
  flex-flow: column nowrap;
  max-width: 1000px;
  margin: 0 auto;
}

textarea {
  min-height: 4rem;
}

input {
  font-weight: bolder;
  cursor: pointer;
  font-size: 1.5rem;
}

#output {
  display: flex;
  flex-flow: column nowrap;
  margin-top: 1rem;
}

#output > div {
  margin-bottom: 1rem;
  border: 1px solid gray;
}

#output > div > header {
  background: gray;
  color: white;
  font-weight: bolder;
  padding: 0.5rem;
}

#output > div > article {
  padding: 0.5rem;
}
/*В алфавите используются не 33, а 32 буквы, т.е.
пропущена буква "Ё". Если вам нужен полный алфавит - просто добавьте это в разбиваемую строку ниже
*/
const alphabet = "АБВГДЕЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ".split("");
const nodeIn = document.querySelector("textarea");
const nodeOut = document.querySelector("#output");
const evButton = document.querySelector("input");

// return new offset code
function getCodeCypher(code, offset) {
  var index = alphabet.indexOf(code);
  if (index < 0) return code;
  var nKey = (index + alphabet.length + offset) % alphabet.length;
  return alphabet[nKey];
}

evButton.addEventListener("click", function() {
  var result = [];
  for (var i = 0; i <= alphabet.length; i++) {
    var txt = nodeIn.value
      .split("")
      .map(x => getCodeCypher(x, i))
      .join("");
    result.push(
      `<div><header>Ключ ${i}</header><article>${txt}</article></div>`
    );
    nodeOut.innerHTML = result.join("");
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.