Order Words Alphabetically

by MegaScience

HTML

<textarea id="textInput">Example Text</textarea><!--
--><button id="sortButton">Convert</button><!--
--><textarea id="textOutput" readonly="readonly"></textarea>

CSS

html, body {
  height: calc(100% - 8px);
}

body {
  display: flex;
  align-items: center;
  align-content: center;
}

textarea {
  outline: 2px solid black;
  align-self: stretch;
  flex-grow: 1;
}

button {
  align-self: center;
}

JavaScript

const oper = {
  elem: {},
  init: function () {
  	this.elem.i = document.getElementById('textInput')
  	this.elem.o = document.getElementById('textOutput')
    this.elem.o.addEventListener('click', function () {
      this.focus()
      this.select()
    })
  	this.elem.b = document.getElementById('sortButton')
    this.elem.b.addEventListener('click', this.sortText.bind(this))
  },
  sortText: function () {
  	let words = this.elem.i.value.split(' ')
    /*words.forEach(function (word, index) {
    	words[index] = [...word].sort((a, b) => a.localeCompare(b)).join("");
    });*/
    //words.forEach((word, index) => words[index] = [...word].sort((a, b) => a.localeCompare(b)).join(''));
    for(let [index, word] of words.entries()) words[index] = [...word].sort((a, b) => a.localeCompare(b)).join('')
    this.elem.o.value = words.join(' ')
  }
}

oper.init()