-1

So I have 2 textareas, 1 holds the user's input, which is expected to hold emoji's, or whitespace. The second one is a read only textarea that holds the output. The purpose of this program is to take in an emoji string and convert it into a regular (text) string using a cipher in the form of a dictionary.

Javascript:

const cipher = {
  "": "A",
  "":"B",
  "":"C",
  "⚡":"D",
  "":"E",
  "":"F",
  "":"G",
  "":"H",
  "":"I",
  "":"J",
  "‍":"K",
  "":"L",
  "":"M",
  "️":"N",
  "":"O",
  "":"P",
  "":"Q",
  "":"R",
  "":"S",
  "":"T",
  "":"U",
  "":"V",
  "":"W",
  "":"X",
  "":"Y",
  "":"Z"
}

function convert(){
  var input = document.getElementById("input").value;
  var outputTextarea = document.getElementById("output");
  var output = "";
  console.clear();
  for(var i = 0; i < input.length; i++){
    var char = input.charAt(i);
    if(char in cipher){
      output += cipher[char];
    }else{
      output += char;
    }
  }
  outputTextarea.value = output;
}

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Emoji Custom Cipher</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div class="label-div"><label for="input">Emoji Input</label><div>
    <textarea id="input"></textarea>
    <br>
    <br>
    <button onclick="convert()">Convert</button>
    <br>
    <br>
    <div class="label-div"><label for="output">Text Output</label><div>
    <textarea id="output" readonly></textarea>
    <script src="script.js"></script>
  </body>
</html>

At first I was planning on having it search up the emoji using the char code, but whenever I printed out the char code it printed two things, and I ended up not being able to search it up in the cipher, but when I try to search it up via the char, it doesn't work either.

TorrentialTerminal
  • 49
  • 3
  • 1
    You might improve this question by reducing the example to the minimal code necessary to illustrate the problem (e.g. just three emoji instead of 20+,..) As well include a concrete example what exactly you are trying to achieve (inputting '' should output 'ABC') That's faster to understand than reading it explained in textform – Corrl Nov 03 '21 at 09:28
  • Yeah that probably would have been nice, sorry I don't use stackoverflow a lot so I'm not very big on posting etiquette. Thanks for the tips! – TorrentialTerminal Nov 04 '21 at 00:24

1 Answers1

0

The way I solved it was storing a string that would contain the character code, and adding the character code / byte from the input string to that every iteration of the loop. Then I looked that up in the dictionary, replacing the emojis, worked like a charm! (along with some sloppy code for resizing the textareas)

Javascript:

const cipher = {
  "5535756399": "A",
  "5535856698":"B",
  "5535756873":"C",
  "9889":"D",
  "5535756899":"E",
  "5535756850":"F",
  "5535856598":"G",
  "5535756446":"H",
  "5535756394":"I",
  "5535856609":"J",
  "553575642582055535657235":"K",
  "5535856688":"L",
  "5535856601":"M",
  "553575638565039":"N",
  "5535657210":"O",
  "5535856643":"P",
  "5535856623":"Q",
  "5535756831":"R",
  "5535657133":"S",
  "5535756448":"T",
  "5535756374":"U",
  "5535756521":"V",
  "5535756848":"W",
  "5535856595":"X",
  "5535756489":"Y",
  "5535757081":"Z",
  "10": "\n",
  "32": " "
}

const inputTextarea = document.getElementById("input");
const outputTextarea = document.getElementById("output");

const tx = document.getElementsByTagName("textarea");
for (let i = 0; i < tx.length; i++) {
  tx[i].setAttribute("style", "height:" + (tx[i].scrollHeight) + "px;overflow-y:hidden;");
  tx[i].addEventListener("input", OnInput, false);
}

function OnInput() {
  this.style.height = "auto";
  this.style.height = (this.scrollHeight) + "px";
}

function convert(){
  var input = inputTextarea.value;
  var output = "";
  var scanner = "";
  console.clear();
  for(var i = 0; i < input.length; i++){
    var code = input.charAt(i).charCodeAt(0);
    scanner += ""+code;
    if(scanner in cipher){
      output += cipher[scanner];
      scanner = "";
    }
  }
  outputTextarea.value = output;
  outputTextarea.style.height = "1px";
  outputTextarea.style.height = (25+outputTextarea.scrollHeight)+"px";
}
TorrentialTerminal
  • 49
  • 3