Categorias
Coding

JavaScript Is All We Need

O titulo pode te enganar, mas não é nenhum post meloso, ou sobre amor.

Aliás, pode ser um post de amor, amor pelo JavaScript. Pois graças a essa linguagem maravilhosa, hoje temos Client-Sides e Server-Sides rodando uma unica linguaguem. É loucura.

É paixão!

E é nesse clima que criei um código pra criar “ships“, ou melhor, juntar dois nomes e formar um. Bem coisa de adolescente, eu sei, mas vamos ao código:

Esse é o código inteiro dessa página: https://xogum.tv/love

Nela usei de framework apenas o bootstrap. O JS é puro, sem firulas.

Vamos a explicação do JS (ou tentar explicar):

let yourName = document.getElementById('your-name');
let yourCrush = document.getElementById('your-crush');
let make = {
  love: () => {
    const yourLength = yourName.value.length;
    const crushLength = yourCrush.value.length;
    if (Math.floor(yourLength/2) + Math.floor(crushLength/2) > 0) {
      for (let makelove of document.querySelectorAll('.makelove')) {
        makelove.classList.remove('d-none');
      }
      document.querySelector('.alert').innerHTML = yourName.value.substr(0, yourLength/2) + yourCrush.value.substr(crushLength/2, crushLength);
    } else {
      for (let makelove of document.querySelectorAll('.makelove')) {
        makelove.classList.add('d-none');
      }
      document.querySelector('.alert').innerHTML = "";
    }
  }
}
yourName.onkeyup = () => make.love();
yourCrush.onkeyup = () => make.love();

Primeiramente setamos 2 variáveis, a yourName e yourCrush, para ficar mais facil manipular os valores dos elementos #your-name e #your-crush do nosso HTML. Depois defini a variável make e nela criei um objeto literal com a função love(), e é ela quem faz a mágica acontecer. Usei a declaração let, mas em código maiores o indicado é usar const, para evitar que as funções sejam reescritas.

Aqui declarei yourLength e crushLength como const para que não seja mutavel, neles se encontram os tamanhos dos valores das inputs #your-name e #your-crush, respectivamente. Assim, temos agora como definir onde começa e onde termina o seu nome e o do seu crush.

Através do if (Math.floor(youLength/2) + Math.floor(crushLength/2) > 0) nós vemos se já é possivel exibir o alerta com o resultado da fusão dos nomes, caso contrário procuro todos os elementos que possuem a classe makelove, usando querySelectorAll, e com ajuda de um for of aplico a class d-none do bootstrap, dessa forma, escondendo novamente nosso alerta e um HR que coloquei para separar os inputs do alerta.

Se não fosse o HR, poderiamos facilmente ter feito um let alert = document.querySelector(‘.alert’) e depois ter adicionado a classe com alert.classList.add(‘d-none’) e pra apagar qualquer resultado usariamos o alert.innerHTML = “”.

Mas voltando a primeira parte, se o nosso if der que o resultado da nossa pequena soma for maior que zero, então, teremos agora que retirar a classe “d-none” do nosso HR e da nossa DIV makelove“.

A formula é a mesma, procuramos todos que possuem a classe makelove, só que dessa vez usamos classList.remove, e para exibirmos o nosso resultado preenchemos a DIV.alert com innerHTML = yourName.value.substr(0, yourLength/2) + yourCrush.value.substr(crushLength/2, crushLength)

Graças ao substr conseguimos quebrar o “seu nome” do ponto de partida inicial (zero) até o meio com ajuda da matemática.

Em yourLength/2 temos como resultado a posição onde se encontra o meio do nome, assim como em crushLength/2.

Porém, para pegar a outra metade, agora do nome do crush, que não pode ser o inicio do nome pois no caso de Roberto e Roberta o resultado seria Robrob (algo assim), e não é isso que queremos. Pra isso, ainda com o substr dessa vez informamos que queremos o nome vindo da metade (crushLength/2) até o fim da string (com crushLength).

Por fim, com .onkeyup = () => make.love(), temos o evento que é disparado a cada vez que alguem digita nos inputs, por isso iniciamos o .onkeyup com nossos elementos yourName e yourCrush, para que o evento venha deles e não de outra parte da página. A cada clique o evento chama nossa função make.love() e assim temos o nosso resultado.

Espero que tenham gostado dessa pequena formula. É simples, mas é com amor.

Ainda não peguei a mãnha de escrever explicações, mas chego lá um dia, quem sabe.

Até a próxima!

Deixe uma resposta

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.