Transforming letters with Javascript

[Clique aqui para ler em português]

Let’s create a simple and fast letter transformation project using JavaScript.

Code

First we will create the interface, we will do something simple, using only HTML.

<h1>Transformando letras</h1>

  <form name="form_main" style="display: flexbox;">
    <label for="input">Entrada: </label>
    <textarea name="input" id="input" cols="30" rows="10"></textarea>
    <label for="uppercase">Maiúscula: </label>
    <textarea name="uppercase" id="uppercase" cols="30" rows="10"></textarea>
    <label for="lowercase">Minúscula: </label>
    <textarea name="lowercase" id="lowercase" cols="30" rows="10"></textarea>
    <label for="alternate">Alternado: </label>
    <textarea name="alternate" id="alternate" cols="30" rows="10"></textarea>
    <label for="reverse">Reverso: </label>
    <textarea name="reverse" id="reverse" cols="30" rows="10"></textarea>
    <label for="first_word">Primeira Palavra: </label>
    <textarea name="first_word" id="first_word" cols="30" rows="10"></textarea>
    <label for="first_letter">Primeira Letra: </label>
    <textarea name="first_letter" id="first_letter" cols="30" rows="10"></textarea>
  </form>

In the HTML structure, some textarea were created to receive the messages, each one has a label to indicate what should be done.

For JavaScript we will only use the first textareaas input and then create the changeText() function.

"use strict";

document.form_main.input.oninput = () => changeText();

function changeText() {
  document.form_main.uppercase.value = document.form_main.input.value.toUpperCase();
  document.form_main.lowercase.value = document.form_main.input.value.toLowerCase();
  alternate();
  reverse();
  firstWord();
  firstLetter();
}

In the changeText() function the string is already capitalized and in the next line it is transformed to lowercase, in the next lines the next functions are called.

function alternate() {
  let text = document.form_main.input.value.toLowerCase().split('');
  for (let i = 0; i < text.length; i = i + 2) {
    text[i] = text[i].toUpperCase();
  }
  document.form_main.alternate.value = text.join('');
}

function reverse() {
  let text = document.form_main.input.value.split('').reverse().join('');
  document.form_main.reverse.value = text;
}

function firstWord() {
  let text = document.form_main.input.value.toLowerCase();
  text = text[0].charAt(0).toUpperCase() + text.slice(1);
  document.form_main.first_word.value = text;
}

function firstLetter() {
  let text = document.form_main.input.value.toLowerCase().split(' ');
  for (let i = 0; i < text.length; i++) {
    let w = text[i];
    if (!!w)
      text[i] = w[0].charAt(0).toUpperCase() + w.slice(1);
  }
  document.form_main.first_letter.value = text.join(' ');
}

Here are the functions: D

ready as simple as that.

Demo

See the complete project working below.

Youtube

If you prefer to watch, I see the development on youtube (video in PT-BR).

---

Thanks for reading!

If you have any questions, complaints or tips, you can leave them here in the comments. I will be happy to answer!

😊😊 See you! 😊😊