TheLazy.Dev
Portfolio GitHub

Blog

tutorial |vue |javascript |beginners

Desenvolvendo Calculadora em Vue.Js — Lógica no JavaScript

glaucia86

Glaucia Lemos

Posted on June 19, 2019

Desenvolvendo Calculadora em Vue.Js — Lógica no JavaScript

Live_Coding

No último post tratamos justamente de criar o lado do .css da nossa Calculadora usando o Vue.js.

Hoje, focaremos na lógica das ações dos botões dessa Calculadora no JavaScript. E vocês verão o quão fácil é manipular o JavaScript com Vue.js.

Lembrando que, para dar continuidade nessa série de artigos, se faz necessário ter conhecimentos prévios em: HTML, CSS & JavaScript.

Caso não tenham conhecimento, recomendo os dois cursos abaixo que são inteiramente grátis:

Image-9

Imag-1

Vamos nessa?!

Desenvolvendo o 'Display'

Abram o Visual Studio Code. Após isso, abram a pasta: src e depois o arquivo Calculadora.vue

Vamos focar na parte das tags de script.
É justamente aí que toda a lógica da nossa Calculadora acontecerá!

Digitem o código abaixo:



<script>

export default {
  data() {
    return {
      valorCorrente: '123',
    };
  },
};

</script>
Enter fullscreen mode Exit fullscreen mode

Aqui estamos criando uma variável que será responsável pelo 'Display' da nossa Calculadora.

Feito isso, já deixem executando a aplicação ao lado, para que possamos acompanhar o desenvolvimento e se está tudo correndo bem.

Na seção template, inclua a seguinte linha de código:



<template>
  <div class="calculadora">
    <div class="display">{{valorCorrente || '0'}}</div>
    <div class="botao">C</div>
    <div class="botao">+/-</div>
    <div class="botao">%</div>
    <div class="botao operadores">÷</div>
    <div class="botao">7</div>
    <div class="botao">8</div>
    <div class="botao">9</div>
    <div class="botao operadores">x</div>
    <div class="botao">4</div>
    <div class="botao">5</div>
    <div class="botao">6</div>
    <div class="botao operadores">-</div>
    <div class="botao">1</div>
    <div class="botao">2</div>
    <div class="botao">3</div>
    <div class="botao operadores">+</div>
    <div class="botao zero">0</div>
    <div class="botao">.</div>
    <div class="botao"> = </div>
  </div>
</template>
Enter fullscreen mode Exit fullscreen mode

Após isso, execute a aplicação e deverá aparecer da seguinte forma como a imagem abaixo:

Screen-Shot-06-19-19-at-02-27-PM.png

O display da nossa Calculadora já está funcionando. Agora, vamos desenvolver a lógica dos demais botões!

Desenvolvendo o Botão 'C'

O botão limpar, que está representado pela letra C na Calculadora, será desenvolvido da seguinte maneira.

Vá até a tag de template e inclua o código abaixo:



<template>
  <div class="calculadora">
    <div class="display">{{valorCorrente || '0'}}</div>
    <div @click="limpar" class="botao"></div>
    (...)
  </div>
</template>
Enter fullscreen mode Exit fullscreen mode

Notem que estamos incluindo o @click. Isso representa que começaremos a trabalhar com Manipulação de Eventos no Vue.js. Se desejarem aprender um pouco mais a respeito, bastam acessar a Documentação do Vue.js que trata justamente dessa parte - AQUI

Para todos os botões que envolverão click, usaremos esse recurso. Que pode ser:

Das duas formas estão corretas. O mais utilizado é: v-on:click. Então, vamos utilizar a forma mais corriqueira.

Vamos fazer o seguinte agora, vamos colocar todas as ações do v-on:click em todos os botões agora:



<template>
  <div class="calculadora">
    <div class="display">{{valorCorrente || '0'}}</div>
    <div v-on:click="limpar" class="botao">C</div>
    <div v-on:click="" class="botao">+/-</div>
    <div v-on:click="" class="botao">%</div>
    <div v-on:click="" class="botao operadores">÷</div>
    <div v-on:click="" class="botao">7</div>
    <div v-on:click="" class="botao">8</div>
    <div v-on:click="" class="botao">9</div>
    <div v-on:click="" class="botao operadores">x</div>
    <div v-on:click="" class="botao">4</div>
    <div v-on:click="" class="botao">5</div>
    <div v-on:click="" class="botao">6</div>
    <div v-on:click="" class="botao operadores">-</div>
    <div v-on:click="" class="botao">1</div>
    <div v-on:click="" class="botao">2</div>
    <div v-on:click="" class="botao">3</div>
    <div v-on:click="" class="botao operadores">+</div>
    <div v-on:click="" class="botao zero">0</div>
    <div v-on:click="" class="botao">.</div>
    <div v-on:click="" class="botao operadores"> = </div>
  </div>
</template>
Enter fullscreen mode Exit fullscreen mode

Agora vamos desenvolver a lógica do 'limpar'. Vá até a tag script e inclua o seguinte método abaixo:



<script>
export default {
  data() {
    return {
      valorCorrente: '',
      numeroAnterior: null,
      operador: null,
      operadorClicado: false,
    };
  },
  methods: {
    limpar() {
      this.valorCorrente = '';
    }
  }
</script>
Enter fullscreen mode Exit fullscreen mode

Execute a aplicação e veja se vai funcionar!

Desenvolvendo o Botão '+/-'

Agora vamos desenvolver o botão +/- da Calculadora, para isso, altere os seguintes códigos.

Na tag template crie a função sinal:



<template>
  <div class="calculadora">
    <div v-on:click="sinal" class="botao">+/-</div>
  </div>
</template>
Enter fullscreen mode Exit fullscreen mode

Na tag script desenvolva o método sinal



<script>
  sinal() {
      this.valorCorrente = this.valorCorrente.charAt(0) === '-'
        ? this.valorCorrente.slice(1)
        : `-${this.valorCorrente}`;
    }
</script>
Enter fullscreen mode Exit fullscreen mode

Estamos usando nessa operação o chartAt e o slice. Para entender melhor esses métodos, recomendo as leituras abaixo:

Se executar a calculadora, você observará que o sinal de +/- estão funcionando devidamente.

Screen-Shot-06-19-19-at-03-06-PM.png

Vamos continuar!

Desenvolvendo o Botão '%'

A lógica sempre será essa daqui para frente: cria um método na ação do v-on:click="" na tag template e logo em seguida, desenvolvemos a lógica desse método na tag script.



<template>
  <div class="calculadora">
    <div v-on:click="porcentagem" class="botao">%</div>
  </div>
</template>
Enter fullscreen mode Exit fullscreen mode 


<script>
  porcentagem() {
      this.valorCorrente = `${parseFloat(this.valorCorrente) / 100}`;
    },
</script>
Enter fullscreen mode Exit fullscreen mode

Execute a aplicação veja se está funcionando devidamente.

Desenvolvendo a Junção dos Números

Se vocês observarem até nesse ponto do artigo, os números não estão juntando. Para isso, vamos alterar o código da seguinte maneira na tag template



<template>
  <div class="calculadora">
    <div class="display">{{valorCorrente || '0'}}</div>
    <div v-on:click="limpar" class="botao">C</div>
    <div v-on:click="sinal" class="botao">+/-</div>
    <div v-on:click="porcentagem" class="botao">%</div>
    <div v-on:click="" class="botao operadores">÷</div>
    <div v-on:click="juntarNumeros('7')" class="botao">7</div>
    <div v-on:click="juntarNumeros('8')" class="botao">8</div>
    <div v-on:click="juntarNumeros('9')" class="botao">9</div>
    <div v-on:click="" class="botao operadores">x</div>
    <div v-on:click="juntarNumeros('4')" class="botao">4</div>
    <div v-on:click="juntarNumeros('5')" class="botao">5</div>
    <div v-on:click="juntarNumeros('6')" class="botao">6</div>
    <div v-on:click="" class="botao operadores">-</div>
    <div v-on:click="juntarNumeros('1')" class="botao">1</div>
    <div v-on:click="juntarNumeros('2')" class="botao">2</div>
    <div v-on:click="juntarNumeros('3')" class="botao">3</div>
    <div v-on:click="" class="botao operadores">+</div>
    <div v-on:click="juntarNumeros('0')" class="botao zero">0</div>
    <div v-on:click="" class="botao">.</div>
    <div v-on:click="" class="botao operadores"> = </div>
  </div>
</template>
Enter fullscreen mode Exit fullscreen mode

E na tag script façam o seguinte:



<script>
  juntarNumeros(numero) {
      if (this.operadorClicado) {
        this.valorCorrente = '';
        this.operadorClicado = false;
      }

      this.valorCorrente = `${this.valorCorrente}${numero}`;
    },
</script>
Enter fullscreen mode Exit fullscreen mode

Ao executarem agora a aplicação, verão que a Calculadura já está ganhando bem mais funcionalidades do que antes. Vamos continuar, pois agora falta pouca coisa!

Desenvolvendo o Botão '.' (ponto)

Toda Calculadora necessita de 'ponto', não é mesmo? No nosso caso não será diferente!
Incluem os seguintes blocos de código abaixo:



<template>
  <div class="calculadora">
    <div v-on:click="ponto" class="botao">.</div>
  </div>
</template>
Enter fullscreen mode Exit fullscreen mode 


<script>
  ponto() {
        if (this.valorCorrente.indexOf('.') === -1) {
          this.juntarNumeros('.');
        }
      },
</script>
Enter fullscreen mode Exit fullscreen mode

Executem a aplicação, clique no botão 'ponto' e vejam o resultado:

Screen-Shot-06-19-19-at-02-54-PM.png

Desenvolvedo a lógica para Setar os Números no Display

O desenvolvimento da Calculadora está quase terminando, notem que agora só falta desenvolver os operadores matemáticos, que são os mais fáceis para desenvolver. Mas, antes de desenvolvermos as operações, precisamos criar uma lógica para setar, por assim dizer, os números.

Por exemplo: se desejamos realizar a soma de dois números: 10 + 5, precisaremos criar uma lógica que, quando o usuário for clicar nos botões de operação, precisará setar esses números no display, certo? Para isso, vamos incluir os seguintes blocos de código:



<script>
  setarValor() {
      this.numeroAnterior = this.valorCorrente;
      this.operadorClicado = true;
    },
</script>
Enter fullscreen mode Exit fullscreen mode

Pronto! Isso já é mais do que suficiente! Agora sim, podemos desenvolver as 4 operações matemáticas, incluso o resultado, para enfim concluirmos a nossa Calculadora!

Desenvolvendo o Botão '=' (resultado)

Antes de desenvolver as 4 operações, vamos desenvolver o botão do resultado '='. Para isso,
inclua os seguintes blocos de código:



<template>
  <div class="calculadora">
    <div v-on:click="resultado" class="botao operadores"> = </div>  
  </div>
</template>
Enter fullscreen mode Exit fullscreen mode 


<script>
  resultado() {
      this.valorCorrente = `${this.operador(
        parseFloat(this.numeroAnterior),
        parseFloat(this.valorCorrente),
      )}`;
      this.numeroAnterior = null;
    },
</script>
Enter fullscreen mode Exit fullscreen mode

Agora sim, podemos além de desenvolver as 4 operações matemáticas e já testando se estão funcionando devidamente. Vamos continuar que tá quase no final.

Desenvolvendo o Botão '÷' (dividir)

Novamente, inclua o método dividir na tag template e desenvolva a lógica da divisão na tag script, conforme abaixo:



<template>
  <div class="calculadora">
    <div v-on:click="dividir" class="botao operadores">÷</div>  
  </div>
</template>
Enter fullscreen mode Exit fullscreen mode 


<script>
  dividir() {
      this.operador = (num1, num2) => num1 / num2;
      this.setarValor();
    },
</script>
Enter fullscreen mode Exit fullscreen mode

Vejam o resultado no gif abaixo:

vuejs-2.gif

Desenvolvendo o Botão 'x' (multiplicar)

Inclua os seguintes códigos abaixo:



<template>
  <div class="calculadora">
    <div v-on:click="multiplicar" class="botao operadores">x</div>  
  </div>
</template>
Enter fullscreen mode Exit fullscreen mode 


<script>
  multiplicar() {
      this.operador = (num1, num2) => num1 * num2;
      this.setarValor();
    },
</script>
Enter fullscreen mode Exit fullscreen mode

Resultado...

vuejs-3.gif

Desenvolvendo o Botão '-' (diminuir)

Inclua os códigos abaixo:



<template>
  <div class="calculadora">
    <div v-on:click="diminuir" class="botao operadores">-</div>  
  </div>
</template>
Enter fullscreen mode Exit fullscreen mode 


<script>
  diminuir() {
      this.operador = (num1, num2) => num1 - num2;
      this.setarValor();
    },
</script>
Enter fullscreen mode Exit fullscreen mode

Vamos testar...

vuejs-4.gif

E estamos quase terminando...Vamos agora desenvolver o nosso último botão da Calculadora!

Desenvolvendo o Botão '+' (somar)

Inclua os códigos abaixo:



<template>
  <div class="calculadora">
    <div v-on:click="somar" class="botao operadores">+</div>  
  </div>
</template>
Enter fullscreen mode Exit fullscreen mode 


<script>
  somar() {
      this.operador = (num1, num2) => num1 + num2;
      this.setarValor();
    },
</script>
Enter fullscreen mode Exit fullscreen mode

E agora, vamos testar todos os botões da nossa Calculadora!

devto-gif-7.gif

E enfim terminamos a nossa Calculadora!

Palavras Finais

Como vocês puderam ver, Vue.js é simples, dinâmico e prático. Indico o uso do framework para desenvolvimento rápido de algum SPA (Single Page Application) devido a sua curva de aprendizagem e praticidade.

Abaixo, segue o código desenvolvido e já disponível no GitHub:

💻 Link do Código Desenvolvido - Calculadora

E caso desejam acompanhar o desenvolvimento desse artigo em formato de vídeo, realizei um live streaming no Twitch e no Youtube explicando o passo a passo do desenvolvimento da Calculdadora:

📺 Link do vídeo: Desenvolvendo uma Calculadora em Vue.js - Parte II

Mas notem que, o arquivo 'Calculadora.vue' está utilizando o que a documentação do Vue.js chama de Single File Components. O que isso quer dizer? Que todas as tags: template, script e style ficam definidos em um único arquivo.
Eu sinceramente não curto muito essa definição.

Para isso, no próximo artigo, explicarei e mostrarei a vocês que é possível realizar a separação dessas tags, deixando somente o template no arquivo 'Calculadora.vue' e realizando a chamada de arquivos de script e css dentro dele, para deixar o projeto mais clean e entendível!

Assim sendo, aguardem o próximo post a respeito!

E para ficarem por dentro de várias outras novidades, não deixem de me seguir lá no twitter!

Twitter

Nos vemos! Até a próxima! 😍

💖 💪 🙅 🚩
glaucia86
Glaucia Lemos

Posted on June 19, 2019

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Asynchronous Loading in Vue
tutorial Asynchronous Loading in Vue

June 16, 2023

Desenvolvendo Calculadora em Vue.Js — Hospedando o Projeto na Nuvem
tutorial Desenvolvendo Calculadora em Vue.Js — Hospedando o Projeto na Nuvem

September 25, 2019

Desenvolvendo Calculadora em Vue.Js — Refatorando o projeto
tutorial Desenvolvendo Calculadora em Vue.Js — Refatorando o projeto

September 20, 2019

Desenvolvendo Calculadora em Vue.Js — Lógica no JavaScript
tutorial Desenvolvendo Calculadora em Vue.Js — Lógica no JavaScript

June 19, 2019

Desenvolvendo Calculadora em Vue.Js — Criando o CSS
tutorial Desenvolvendo Calculadora em Vue.Js — Criando o CSS

June 9, 2019