Desenvolvimento de sistemas web Desenvolvimento de sistemas web Transcrição
Neste vídeo eu vou mostrar como foi feita a calculadora de consumo elétrico. Então a página já contem o link do CSS do Bootstrap, eu estou adicionando um classe MEDIDOR já com uma imagem previamente pronta no Photoshop, que é esta imagem do medidor que está aparecendo ai.
Então eu estou ajustando agora o tamanho para que fique um pouco mais confortável a visão e estou adicionado uma classe que vai conter uma barra horizontal animada simulando aquele efeito do medidor rodando.
Adicionei a parte do CSS da imagem que eu tinha adicionado no atributo Style e agora eu vou posicionar esta barra animada. Eu peguei uma cola para facilitar e é mais rápido. O link está na descrição, é só olhar a classe que será exibida. Você pode olhar no código fonte.
Eu estou posicionando agora esta barra animada, é uma barra feita puramente com CSS, não é um GIF, então eu estou ajustando posicionamento, ajustando altura, largura, e.. para que ela fique bem em cima da imagem original, então o que eu consegui lá no Chrome, os dados que eu consegui lá no Google Chrome agora eu coloquei no CSS mesmo.
O próximo passo agora é escolher uma fonte para mostrar os números do medidor. Então eu estou colocando uma fonte MonoSpace, monospace é aquela fonte que todos os caracteres ocupam o mesmo espaço, então eu adicionei uma classe chamada medição e esta classe medição vai conter esta fonte chamada VT323.
Agora vem a parte do posicionamento! É por tentativa e erro! não tem como! eu estou ai posicionando para baixo, encontrei um erro aqui.. resolvido, então agora é só posicionar mesmo e para auxiliar eu vou colocar uma borda vermelha neste elemento. Então com isso eu consigo saber quais são os limites dele. Como a contagem é feita também da direita para esquerda né, os números, então o alinhamento do texto será da direita para esquerda.
É tentativa erro! Não tem, não tem como. Se não fosse uma ferramenta como esta seria a tarde inteira tentando ajustar isso. Então, com estes dados ai do inspecionar do Google Chrome agora é só copiar e colar eles lá na parte do CSS do elemento medição. Prontinho!
Então é isso! E agora começar adicionar os inputs que vão receber os dados da potência do aparelho, da quantidade de dias, de horas, de minutos e segundos .. Minutos e segundos não! Horas e minutos que o aparelho fica ligado, e então calcular o valor que aparelho gasta.. tanto em kilowatts-hora como em dinheiro, real, moeda.
Então eu adicionei apenas ai os elementos e agora estou colocando um LOOP em um FOR do Javascript para que ele adicione de 0 a 30. Ele vai do 1 até menor que trinta e então colocou os dias de uso. Para que não ter que preencher manualmente o Javascript preencheu ai para mim. Então menor igual a trinta! Agora sim!
Seria a quantidade de dias de uso no mês. E agora o tempo de uso em horas, mais ou menos quantas horas você usa por dia aquele produto. Então vai de zero à 24. Também alterei o ID do elemento para drHORA e agora mais um elemento que será a quantidade de minutos. Então, minutos obviamente... estou copiando e colando, vou alterar a quantidade até 59, drMinutos... prontinho!
Agora ja está tudo preenchido automaticamente. Esta função que eu adicionei chamada PAD vai adicionar um zero antes... este número dois é a quantidade de dígitos então vai ficar 01, 02, 03 e assim por diante, para que fique até visualmente mais agradável.
Estou colocando 000. E então vou adicionar mais um elemento para ser o título da página. Vou dar uma estilizada nele, diminuir o tamanho da fonte para que fique com 24px. E, vou adicionar um espaçamento entre os elementos. Como este espaçamento ficou exagerado, então eu estou adicionado uma classe chamada espaçador e conteudo.espacador, ou seja, todos os elementos de classe espaçador vão ter aquela margem de 30 pixels.
Esta tabela agora que está sendo adicionada vai receber o resultado do cálculo. Então primeira coluna descrição, segunda valor.
E agora, total em Watts no mês, total consumido fica melhor! Já apareceu, olha!
Então este document.ready ele vai ser acionado quando a página terminar de carregar. Então toda vez que o TxtPotencia tiver uma tecla pressionada ele vai chamar uma função chamada calcularConsumo. E esta calcularConsumo que vai realmente fazer o cáculo.
Dentro do calcularConsumo eu estou colocando uma variável para cada elemento de entrada que seria a potencia, quantidade de dias, horas , minutos.. Então o resultado é.. potência em watts vezes horas, tem um errinho ali que para frente eu vou corrigir. Seriam minutos né?! Não vezes.. vezes dias, não vezes horas vezes horas. Então potencia vezes horas, vezes dias dividido por mil seria o cálculo do kilowatthora, por mes!
Agora adicionando o .change para quando selecionar algum elemento ele chamar novamente a funação calcularConsumo. Estou adicionado na tabela mais uma linha para que seja mostrado o resultado da medição. E também lá no relógio onde tem aqueles 5 zeros será exibido também o valor do quilowatts consumidos.
Então, olha lá! No relógio ele já está mostrando , 2 kilowatts-hora..
Eu estou também adicionado uma classe Seletor nos elementos para que fique mais fácil a alteração deles. então, toda vez que eu começo digitar e seleciono uma quantidade de horas ele já vai mostrando lá os números inteiros, porém na tabela ele mostra o número com decimais.
Eu encontrei o erro agora. Agora sim ele está funcionando corretamente. Então quando eu vou digitando ai ele já vai calculando automaticamente, ou quando eu vou mudando o cursor da setinha para cima e para baixo no teclado do mouse ele também aceita porque é um tipo NUMBER de elemento.
Adicionei agora mais um elemento que seria o preço do Kilowatt-hora. Então em fiz um cálculo aqui, na minha região está R$ 0,70. Então o que eu vou fazer? eu vou pegar o resultado.. que é a potencia vezes horas vezes dias divididos por mil e vou multiplicar pelo valor do kilowatt-hora, que seria no meu caso aqui R$ 0,70. Eu estou colocando este parseInt ai no começo para realmente caso passe algum valor que não seja inteiro ele transformar para inteiro e este toFixed() seria para colocar as duas casas decimais.
Então vamos fazer o cálculo, já está calculando, olha lá! Eu mexendo com a seta para cima e para baixo do teclado ele já vai calculando, já vai mostrando no relógio e já dá aquela impressão no relógio que está andando, que o relógio está correndo, como falam!
Eu estou adicionando mais um classe, chamada bar-horizontal-animada que vai funcionar da seguinte forma: Quando a gente carrega a página ela vai ficar sem barra rodando, vai ficar parado! E quando a gente alterar o relógio a barra do relógio começa a girar, dando aquele efeito de rotação.
Este spinner ai é só depois você entrar no código fonte pegar o código como foi feito é mais fácil de explicar, não é nada de outro mundo não.. Então olha! Carreguei a página, olha, está parado. É isso que eu queria, agora eu vou adicionar a este elemento, bar-horizontal eu vou adicionar toda vez que eu digitar algum valor, ou seja, que a classe calcularconsumo for acionada eu vou adicionar nela, eu vou adicionar nela animada... aquela bar-horizontal-animada.
Então com isso eu consigo fazer este efeito bacaninha. Está parado, quando eu mexo em alguma coisa, ele começa a andar. Então é isso, não tem nada de outro mundo, é apenas matemática, basta olhar o código fonte, a descrição , link link para acessar este medidor online está na descrição do vídeo, é.. basta entrar lá e inspecionar e ver como foi feito e inclusive sugerir alguma coisa. Espero que tenha gostado, alguma dúvida ou sugestão de melhoria deixe nos comentários! Até mais!
Descrição
veja como foi a programação da calculadora de consumo elétrico em kWh construída com bootstrap, jquery, html5 e css3.
Para ver o código fonte e a calculadora em funcionamento acesse o link abaixo:
https://adrianoaoli.com/eletronica/calculadora-consumo-eletrico.html?t=yt
Dúvidas e sugestões deixe nos comentários!
