DEV Community

Cover image for Transforming letters with Javascript
Walter Nascimento
Walter Nascimento

Posted on

Transforming letters with Javascript

#javascript #html #transforming #letters

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

Top comments (0)