DEV Community

Cover image for Transforming letters with Javascript
Walter Nascimento
Walter Nascimento

Posted on

Transforming letters with Javascript

[Clique aqui para ler em português]

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


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>

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();

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.


See the complete project working below.


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! 😊😊

Top comments (0)