Aprenda como calcular o gasto do ar-condicionado com JavaScript! Com esta calculadora em JavaScript, você pode descobrir quanto será seu gasto mensal.
Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!
Para receber por e-mail o(s) arquivo(s) utilizados na aula, preencha:
Nesta aula, você aprenderá a calcular o gasto do ar-condicionado com JavaScritpt! Isso mesmo, vou te ensinar como construir uma calculadora de ar-condicionado em JavaScript, permitindo que você tenha uma estimativa precisa dos gastos ao final do mês.
Com essa calculadora de ar-condicionado, será possível determinar o custo mensal com base na quantidade de dias e horas em que o aparelho estiver ligado, juntamente com a taxa de energia.
Além disso, você terá à sua disposição um código HTML com a página da calculadora já preparada para uso, tornando o seu projeto mais visual e intuitivo.
Não se esqueça de fazer o download do material disponível para explorarmos juntos como calcular o gasto do ar-condicionado com JavaScript e descobrir o impacto mensal na sua conta de energia enquanto o aparelho está ligado.
No material para download, você encontrará o arquivo index.html. Este arquivo contém o código HTML da nossa página, pronto para ser utilizado.
Embora ainda não inclua o código JavaScript, pois iremos desenvolvê-lo durante esta aula, a página HTML já possui toda a estrutura e a parte visual preparada para receber a nossa calculadora de ar-condicionado.
Ao abrir essa página, você notará as informações e os dados que serão necessários para calcular o gasto do ar-condicionado com JavaScript:
O código HTML dessa estrutura está disponível para download. Você pode baixá-lo e usá-lo conforme está.
Porém, para que possa compreender melhor, estamos basicamente lidando com um formulário (form) que receberá várias entradas de texto (input) do usuário. E, ao final, teremos um botão para enviar o formulário.
Vamos iniciar criando o nosso arquivo JavaScript chamado script.js. Escolhemos esse nome para o arquivo, pois o nosso código HTML já espera encontrar esse arquivo JavaScript. Caso deseje alterar o nome do arquivo, será necessário modificar também a referência a ele no HTML.
Após essa etapa, vamos criar uma referência ao formulário HTML dentro do nosso arquivo JavaScript, para interagirmos com ele de forma dinâmica e realizar as manipulações quando necessário.
Inicialmente, buscaremos o primeiro elemento <form> presente no documento HTML e armazenaremos uma referência a esse elemento na variável form. Utilizaremos o método getElementsByTagName() passando a tag “form” como argumento.
const form = document.getElementsByTagName("form")[0];Observe que, mesmo que haja apenas um formulário dentro do nosso HTML, o método getElementsByTagName sempre retorna uma lista. Portanto, precisamos especificar o índice [0], correspondente ao primeiro elemento da lista, mesmo que ela contenha apenas um elemento.
Dentro desse formulário, podemos acessar os campos presentes nele. Ao observarmos o código HTML, notaremos que existem nomes (name) atribuídos a esses campos, ou seja, esses inputs.
Dessa forma, conseguimos recuperar as referências desses campos, utilizando o nome da nossa variável de referência ao formulário (form), com o nome do campo entre colchetes.
const consumoAparelhoEl = form["consumo-aparelho"];
const periodoConsumoEl = form["periodo-consumo"];
const horasDiariasUsoEl = form["horas-diarias-uso"];
const diasUsoMesEl = form["dias-uso-mes"];
const precoEnergiaEl = form["preco-energia"];
const botaoCalcular = form["botao-calcular"];É importante notar que estou utilizando a sigla “El” no final do nome das variáveis para deixar claro que essas variáveis são uma referência ao elemento como um todo e não ao valor daquele campo.
Além dos campos referentes aos inputs, também recuperamos uma referência ao botão do formulário.
Esse botão possui o type=”submit”, o que significa que, após ser clicado, ele enviará o formulário preenchido.
Para visualizarmos o comportamento desse botão, primeiro vamos definir a função responsável por controlar a página (calcularGasto), que por enquanto estará vazia, e em seguida, vamos definir um EventListener para o nosso botão.
const form = document.getElementsByTagName("form")[0];
const consumoAparelhoEl = form["consumo-aparelho"];
const periodoConsumoEl = form["periodo-consumo"];
const horasDiariasUsoEl = form["horas-diarias-uso"];
const diasUsoMesEl = form["dias-uso-mes"];
const precoEnergiaEl = form["preco-energia"];
const botaoCalcular = form["botao-calcular"];
function calcularGasto() {}
botaoCalcular.addEventListener("click", calcularGasto);Com o .addEventListener(“click”, calcularGasto), estamos adicionando ao nosso botão a capacidade de escutar um evento (o clique sobre ele) e, após isso, reagir chamando a função calcularGasto.
Vamos preencher alguns valores na nossa calculadora de ar-condicionado:
Se clicarmos sobre o botão de Calcular as informações que inserimos serão apagadas.
Isso acontece porque, por padrão, o evento de submit associado ao botão Calcular tenta enviar as informações do formulário e recarregar a página.
No entanto, nossa intenção é que, ao pressionarmos o botão Calcular, o gasto do ar-condicionado seja calculado e exibido ao lado, sem recarregar a página e apagar as informações já inseridas.
Para alcançar esse resultado, precisamos modificar o comportamento padrão dessa ação de submit vinculada ao botão.
Conforme observado em nosso código, adicionamos ao botão um EventListener que, quando clicado, chama a função calcularGasto().
Ao associar uma função a um evento, podemos passar um parâmetro na definição da função, que representará o objeto contendo as informações do evento. Neste caso, chamaremos esse objeto de evt.
function calcularGasto(evt) {}
botaoCalcular.addEventListener("click", calcularGasto);Assim, podemos acessar esse parâmetro dentro da função e utilizar o método preventDefault. Isso impede o comportamento padrão do evento, que, neste caso, seria enviar o formulário e recarregar a página.
function calcularGasto(evt) {
evt.preventDefault();
}
botaoCalcular.addEventListener("click", calcularGasto);Feito isso, podemos extrair os dados do formulário preenchido pelo usuário e calcular o gasto do ar-condicionado com JavaScript.
Para isso, definiremos novas variáveis que obtêm o valor (value) de cada um dos campos que referenciamos anteriormente.
function calcularGasto(evt) {
evt.preventDefault();
const consumoAparelho = consumoAparelhoEl.value.replace(",", ".");
const periodoConsumo = periodoConsumoEl.value;
const consumoDiarioAparelho =
periodoConsumo === "mes" ? consumoAparelho / 30 : consumoAparelho / 365;
const horasDiariasUso = horasDiariasUsoEl.value.replace(",", ".");
const diasUsoMes = diasUsoMesEl.value;
const precoEnergia = precoEnergiaEl.value.replace(",", ".");
}É importante observar que, para consumoAparelhoEl, horasDiariasUsoEl e precoEnergiaEl, além de utilizar o método value para obter o valor referente a cada um desses campos, também empreguei o método replace passando como argumentos a vírgula e o ponto.
O método replace é utilizado para substituir parte de uma string por outra. Neste caso, se o usuário digitar os valores utilizando vírgula (,), o replace irá substituir a vírgula por ponto (.).
Isso é fundamental para que o JavaScript consiga realizar os cálculos corretamente, já que o padrão numérico em JavaScript utiliza o ponto como separador decimal.
Para periodoConsumo e diasUsoMes, esse tratamento não foi necessário. Isso se deve ao fato de que o valor de periodoConsumo é obtido através de um menu de seleção que só permite selecionar entre mês e ano. Além disso, o valor de diasUsoMes só pode ser inteiro, pois representa a quantidade de dias.
Adicionalmente, utilizei operadores ternários para determinar o consumo diário do aparelho, considerando a escolha do usuário entre mês e ano para o período de consumo.
Como só temos duas condições, verifiquei se periodo Consumo é igual a ‘mes’. Se essa expressão for verdadeira, dividimos consumoAparelho por 30; se for falsa, dividimos por 365.
Esse tratamento é importante porque o usuário pode definir se a informação de consumo do seu aparelho está sendo dada em meses ou anos. No entanto, para o cálculo do gasto do consumo de ar-condicionado, precisamos estipular o consumo diário.
Com os valores dos campos do formulário devidamente obtidos e tratados, podemos agora realizar o cálculo do gasto do ar-condicionado. A fórmula para esse cálculo é simples: multiplicamos o consumo diário pelas horas diárias de uso, pelos dias de uso no mês e pelo preço da energia.
Vamos atribuir esse resultado à variável custo.
function calcularGasto(evt) {
evt.preventDefault();
const consumoAparelho = consumoAparelhoEl.value.replace(",", ".");
const periodoConsumo = periodoConsumoEl.value;
const consumoDiarioAparelho =
periodoConsumo === "mes" ? consumoAparelho / 30 : consumoAparelho / 365;
const horasDiariasUso = horasDiariasUsoEl.value.replace(",", ".");
const diasUsoMes = diasUsoMesEl.value;
const precoEnergia = precoEnergiaEl.value.replace(",", ".");
const custo =
consumoDiarioAparelho * horasDiariasUso * diasUsoMes * precoEnergia;
}
Com o custo calculado, agora só precisamos atualizar essa informação para que ela seja exibida na nossa página.
Faremos isso localizando o elemento com o ID “consumo” e, em seguida, atualizando o texto desse elemento para exibir o valor calculado (custo) formatado com duas casas decimais e usando a vírgula como separador decimal.
function calcularGasto(evt) {
evt.preventDefault();
const consumoAparelho = consumoAparelhoEl.value.replace(",", ".");
const periodoConsumo = periodoConsumoEl.value;
const consumoDiarioAparelho =
periodoConsumo === "mes" ? consumoAparelho / 30 : consumoAparelho / 365;
const horasDiariasUso = horasDiariasUsoEl.value.replace(",", ".");
const diasUsoMes = diasUsoMesEl.value;
const precoEnergia = precoEnergiaEl.value.replace(",", ".");
const custo =
consumoDiarioAparelho * horasDiariasUso * diasUsoMes * precoEnergia;
const consumoEl = document.getElementById("consumo");
consumoEl.innerText = custo.toFixed(2).replace(".", ",");
}Utilizamos o método getElementById para obter a referência ao elemento HTML com o ID “consumo” e armazenamos na variável consumoEl.
Em seguida, atualizamos o valor desse elemento com o valor da variável custo, utilizando o método toFixed(2) para garantir que o número tenha duas casas decimais e o método replace para substituir os pontos por vírgulas novamente.
Dessa forma, o código completo ficará assim:
const form = document.getElementsByTagName("form")[0];
const consumoAparelhoEl = form["consumo-aparelho"];
const periodoConsumoEl = form["periodo-consumo"];
const horasDiariasUsoEl = form["horas-diarias-uso"];
const diasUsoMesEl = form["dias-uso-mes"];
const precoEnergiaEl = form["preco-energia"];
const botaoCalcular = form["botao-calcular"];
function calcularGasto(evt) {
evt.preventDefault();
const consumoAparelho = consumoAparelhoEl.value.replace(",", ".");
const periodoConsumo = periodoConsumoEl.value;
const consumoDiarioAparelho =
periodoConsumo === "mes" ? consumoAparelho / 30 : consumoAparelho / 365;
const horasDiariasUso = horasDiariasUsoEl.value.replace(",", ".");
const diasUsoMes = diasUsoMesEl.value;
const precoEnergia = precoEnergiaEl.value.replace(",", ".");
const custo =
consumoDiarioAparelho * horasDiariasUso * diasUsoMes * precoEnergia;
const consumoEl = document.getElementById("consumo");
consumoEl.innerText = custo.toFixed(2).replace(".", ",");
}
botaoCalcular.addEventListener("click", calcularGasto);Agora, ao inserirmos os valores corretamente na nossa calculadora de gasto do ar-condicionado e clicarmos no botão Calcular, teremos o resultado sendo exibido corretamente na página.
Nessa aula, você aprendeu como calcular o gasto do ar-condicionado com JavaScript, permitindo descobrir quanto irá gastar na conta de energia com esse aparelho.
É claro que sobre esse valor incidem impostos e outras taxas cobradas pelas companhias de energia, mas essa calculadora proporciona uma estimativa aproximada do gasto que o ar-condicionado representará em sua conta.
Além de ser uma ferramenta útil para avaliar os gastos nesses tempos de calor, essa calculadora de gastos com ar-condicionado em JavaScript também oferece a oportunidade de exercitar e praticar os conceitos que você já aprendeu sobre JavaScript.
Para acessar publicações de JavaScript, clique aqui!
Expert em conteúdos da Hashtag Treinamentos. Auxilia na criação de conteúdos de variados temas voltados para aqueles que acompanham nossos canais.
Quer sair do zero no Python e virar uma referência na sua empresa? Inscreva-se agora mesmo no Python Impressionador