So Cal Tech Lab

ROT13 text converter

Prompt:

Create a sveltekit component that will generate a ROT13 converted output based on the user input. Only modify English letters, all other characters get passed to output without modification.

Description:

ROT13 stands for 'rotate 13'. It works by laying out all 26 characters of the English language along an imaginary circle. With letter A being at 0° of rotation, and each subsequent letter being placed 1/26th of one rotation away from the last. Imagine a clock with letters instead of numbers and A at 12. Then, you simply take an imput character, and find the letter exactly 13 steps (half of an alphabet) away. You 'rotate' 13 steps. A rotates to N, B rotates to O, and so on. It is a very primitive text cipher, one many of us used in primary school to encode secret messages with friends. This project serves as a springboard for further exploration into AI aided cryptography.

CODE

<script>

  // Declare the variables for the component

  let clearText = "Here's some sample text. Go ahead, click the button below!";

  let cipherText = "";

  const loremIpsum = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";

  // Define the function to generate the cipher

  function generateCipher() {

    // Initialize the cipherText to an empty string

    cipherText = "";

    // Split the clearText into an array of characters

    const clearTextChars = clearText.split("");

    // Iterate over the characters in the clearText

    for (const char of clearTextChars) {

      if (/[a-z]/.test(char)) {

        // If the character is a lowercase letter, use the rot13 cipher to get the corresponding lowercase cipher letter

        cipherText += String.fromCharCode(((char.charCodeAt(0) - 97 + 13) % 26) + 97);

      } else if (/[A-Z]/.test(char)) {

        // If the character is an uppercase letter, use the rot13 cipher to get the corresponding uppercase cipher letter

        cipherText += String.fromCharCode(((char.charCodeAt(0) - 65 + 13) % 26) + 65);

      } else {

        // If the character is not a letter, append it to the cipherText as is

        cipherText += char;

  function addLoremIpsum() {

    clearText = loremIpsum;

  function clearForm() {

      clearText = "";

      cipherText = "";

  function copyOutput() {

      clearText = cipherText;

  </script>

<h2 class="text-white text-center pt-10 pb-5 text-3xl font-bold">ROT13 text converter</h2>

<div class="text-white text-center">

	<textarea class="w-3/4 md:w-1/2 h-28 block mx-auto rounded p-3 bg-black border border-gray-800 text-white focus:outline-none focus:shadow-outline focus:border-white transition-all" type="text"

	 bind:value={clearText} placeholder="Enter your text"/>

   <div id="btnwrapper" class="flex flex-row flex-wrap justify-center py-10 space-x-3">

     <button class="btn btn-primary w-1/2 md:w-auto" on:click={generateCipher}><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">

  <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />

</svg>

 Perform ROT13</button>

      <button class="btn btn-ghost w-1/2 md:w-auto" on:click={copyOutput}><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">

  <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75" />

</svg>

 Copy Output <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">

  <path stroke-linecap="round" stroke-linejoin="round" d="M12 19.5v-15m0 0l-6.75 6.75M12 4.5l6.75 6.75" />

</svg>

</button>

       <button class="btn btn-ghost w-1/2 md:w-auto" on:click={addLoremIpsum}><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">

  <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v6m3-3H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />

</svg>

 Add Lorem Ipsum</button>

       <button class="btn btn-ghost w-1/2 md:w-auto" on:click={clearForm}><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">

  <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />

</svg>

 Clear</button>

   </div>

	<textarea class="w-3/4 md:w-1/2 h-28 block mx-auto rounded p-3 bg-black border border-gray-800 text-white focus:outline-none focus:shadow-outline focus:border-white transition-all" type="text"

  bind:value={cipherText} placeholder="Cipher text" />

</div>