Typoglycemia generator [closed]

My goal is to create a “typoglycemia generator” using HTML CSS JS.

I.e. A web App which takes the user input and mixes up the letters of each word except for the first and last letter.

For example: USER INPUT = “Hello everyone at stackoverflow”; OUTPUT = “Hlelo eevrnyoe at satckoeovrflw”!

I am new to JS, can anyone guide me as to what the steps would be to create this JS code. Thanks in advance!

Answer

Detailed explanation after snippet.

function shuffle(array) {
  for (var i = array.length - 1; i > 0; i--) {
    var j = Math.floor(Math.random() * (i + 1));
    var temp = array[i];
    array[i] = array[j];
    array[j] = temp;
  }
  return array;
}

function Typoglycemia(word) {
  var letters=word.split("");
  var first=letters.shift();
  var last=letters.pop();
  var shuffled=shuffle(letters);
  shuffled.push(last);
  shuffled.unshift(first);
  var typoglycemia=shuffled.join("");
  return typoglycemia;
}

function TypoglycemiaWord(word) {
  document.getElementById("sTypoglycemiaWord").innerText = Typoglycemia(word);
}

function TypoglycemiaSentence(sentence) {
  var words=sentence.split(" ");
  var typoglycemias=words.map(word=>Typoglycemia(word));
  document.getElementById("sTypoglycemiaSentence").innerText = typoglycemias.join(" ");
}

Enter a word: <input onchange="TypoglycemiaWord(this.value)"><br>
Typoglycemia: <span id="sTypoglycemiaWord">result here</span><br>
<br>
Enter a sentence: <input onchange="TypoglycemiaSentence(this.value)"><br>
Typoglycemia: <span id="sTypoglycemiaSentence">result here</span>

First thing we do is remove and save first and last letters.
It’s done in function Typoglycemia that takes a word as it’s parameter.
We split that word into letters by telling split to split every time it sees "" = nothing = just split.
shift removes the first element of an Array – we store that in first.
pop removes the last element of an Array – we store that in last.
We need a shuffling function – function shuffle – that takes an Array – array as it’s parameter.
It goes from last element back to the second – Arrays are zero-indexed, so back to index 1, which is one after index 0 = the first element.
It randomly swaps, goes back, until done, and returns a shuffled array.
Back to Typoglycemia function:
We add last back to the end using push, and first back to the beginning using unshift.
Lastly, we join the array with no spaces "" and return it.
The rest, for word, is simpler HTML and JavaScript.

For sentences, we split by spaced " ", map each word to it’s Typoglycemiad value, and then join the result with a space " " between each word.
The rest, for sentence, is simpler HTML and JavaScript.

The rest: Hitting ENTER in an input element calls a function, passing to it the value of itself (this).
TypoglycemiaWord and TypoglycemiaSentence do what they do (as explained above), and send the result to a span element that is found by using it’s id in document.getElementById, by setting it’s innerText to that result.

Hope this was fun as it was educational!