CSS problema com loop (erro de logica)

Wagner Leandro · 8 de novembro de 2020

Citação

Eu quero fazer um site que mostre os dados de quantos listros você bebe ao dia! Eu criei uma div com um input pra você adicionar quantos L(litros)/ml você bebeu. com a informação que a pessoa passou, iria passar para o while enquanto ${a quantidade de agua que a pessoa bebeu} fosse menor que 2000 litros(quantidade de agua recomendada por dia). Mas o while está pegando a informação e fazendo um loop até 2000, e não era isso que eu queria fazer, eu sei q loop é pra repetir! mas acontece isso.

eu coloquei um break e está funcionando. Mas não está adicionando os valores, tipo, se eu adiciono que bebi 100ml vai aparecer que você bebeu 100ml, mas quando vou adicionar outro valor, tipo 1000ml, vai aparecer 1000 e não 1100, ou seja, não está somando os valores
como posso pegar os valores de um while e colocar dentro de uma variavel e somar?
Obs: eu sou bem iniciante

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" >
    <link rel="stylesheet" type="text/css" href="http://localhost/beber-agua/css/index.css">
</head>
<body onload="data()">
    <div id="menu">
                    <div id="logo">
                        <h1>Beber água</h1>
                        <img class="a" src="/beber-agua/imgs/logo.png">
                    </div>
                <ul>
                    <li><a class="tempo"href="">Tempo 00:00:00 Data: 00/0</a></li>
                </ul>
            </div>
        <div id="home">
            <h2>Estatísticas</h2>
                <div id="meta">
                    <p class="name-p">Meta</p>
                    <p class="media-meta">0/2000L</p>
                    <div class="barra"></div>
                    <div class="barra-meta"></div>
                </div>
            </div>
            
                <div class="add_agua" onload="remover()">
                    <h2>Beber Água</h2>
                    <p>Bebi: <input type="number" class="ml" name="ml" maxlength="40"> ML</p>
                    <input type="submit" class="btn-btn" onclick="js()" name="btn" value="Adicionar" id="botão">
                    <input type="submit" class="btn-btn" onclick="cancelar()" name="btn" value="Cancelar" id="botão">
                    <p class="res"></p>
                </div>
                <div id="parabens">
                    <h2 style="background: none; margin-top: 56px; " class="btn-parabens">Parabéns!<br> Você bebeu 2000L!<br>Até amanhã!</h2>
                    <input type="submit" class="btn-btn" onclick="resetar_parabens()" name="btn" value="Resetar" id="botão">
                </div>
            <input type="submit" value="Add" onclick="add_remove()" class="add-btn">
            <div id="add-agua">
                
            </div>


    <script type="text/javascript">

        /*iniciar none  add*/ document.querySelector(".add_agua").style.display = "none"
        /*iniciar none  parabens*/ document.querySelector("#parabens").style.display = "none"
        function data_fixa() {
            var temp = new Date
            var min_fix = temp.getMinutes()
            var horas_fix = temp.getHours()
            var dia_fix = temp.getDay()+1
            var mes_fix = temp.getMonth()+1
        }
        //DATA
        function data() {
            var temp0 = document.querySelector('.tempo')
            var tempo = new Date
            var horas = tempo.getHours()
            var min = tempo.getMinutes()
            var seg = tempo.getSeconds()
            var dia = tempo.getDay()+1
            var mes = tempo.getMonth()+1
            var ano = tempo.getYear()
            temp0.innerHTML = `Tempo: ${horas}:${min}:${seg} Data: ${dia}/${mes}`

            /// desaparecer add agua

        } setInterval(data, 1000) // atualizar
        function add_remove() {
            //aparecer/desaparecer
            document.querySelector('#home').style.opacity = '0.3'
            document.querySelector('.add_agua').style.opacity = '1.0'
            document.querySelector(".add_agua").style.display = "block"
        }
        function cancelar() {
            document.querySelector(".add_agua").style.display = "none"
            document.querySelector('#home').style.opacity = '1.0'
        }
        function resetar_parabens() {
            var rel = Number(0)
            document.querySelector('.media-meta').innerHTML = "0/2000L"
            document.querySelector('#home').style.opacity = '1'
            document.querySelector("#parabens").style.display = "none"
            document.querySelector('.barra-meta').style.width = "1%"
        }

        function js() {
            var res = document.querySelector('.res')
            var ml = Number(document.querySelector('.ml').value)
            var meta = document.querySelector('.barra-meta')
            var media_meta = document.querySelector('.media-meta')
            if (ml == "" || ml.length == 0) {
                res.innerHTML = "Ml inválido"
                event.preventDefault()
                return false
            }
            if (ml < 0 || ml.length < 0 || ml == 0 ) {
                res.innerHTML = `ML inválido`
                event.preventDefault()
                return false
            }else{
            var rel = Number(0)
            //var ml = Number([])
            while(rel < 2000){
                rel=(rel+(ml))
                media_meta.innerHTML = `${rel}/2000L`
                document.querySelector(".add_agua").style.display = "none"
                document.querySelector('#home').style.opacity = '1'
                
                if (rel>249){
                    meta.style.width = "6%"
                }
                if (rel>599){
                    meta.style.width = "13%"
                }
                if (rel>999){
                    meta.style.width = "24%"
                }
                if (rel>1249){
                    meta.style.width = "31%"
                }
                if (rel>1499){
                    meta.style.width = "37%"
                }
                if(rel>=2000){
                    meta.style.width = "48%"
                    document.querySelector('#home').style.opacity = '0.2'
                    document.querySelector("#parabens").style.display = "block"
                }
                break
            } 

            //media_meta.innerHTML = `${rel}`
        }
    }


        
        // INICIO FOTO

    </script>


</body>
</html>

Adriano_web · 8 de novembro de 2020

@Wagner Leandro Resolvi o problema atribuindo um <span> dentro do elemento <p> com a classe media-meta e coloquei essa clase dentro dele. Eu mexi em alguns nomes de classes e id's apenas, segue o código do HTML:

<html>
  <head>
    <meta charset="UTF-8">
    <script src="js/script.js"></script>
  </head>
  <!-- Removi o ouvinte de tratamento de evento onload
    -- no <body> e adicionarei no código do script -->
  <body>
    <div id="menu">
      <div id="logo">
        <h1>Beber água</h1>
	    <img class="a" src="/beber-agua/imgs/logo.png">
      </div>
      <!-- Removi a lista e deixei apenas a tag âncora -->
      <a class="tempo" href="#">Tempo 00:00:00 Data: 00/0</a>  
    </div>
    <div id="estatisticasInfo">  <!-- ID alterado antes era #home -->
      <h2>Estatísticas</h2>
      <div id="meta">
        <p class="name-p">Meta</p>
      
        <!-- Adicionado um <span> com a classe .media-meta abaixo -->
        <p><span class="media-meta"></span>/2000L</p>  
        <div class="barra"></div>
        <div class="barra-meta"></div>
      </div>
    </div>
    
    <!-- Remove o onload que estava no <div> sem nenhuma função -->
    <div class="add_agua" onload="remover()">
      <h2>Beber Água</h2>
      <p>Bebi: <input type="number" class="ml" name="ml" maxlength="40"> ML</p>
      
      <!-- 1. removi os ouvintes de tratamento de eventos onclick() 
        -- nos input, adicionarei no código do script 

        -- 2. Alterei os valores dos atributos com id="botão" pois ambos eram iguais
        -- e isso era um erro semântico o de adicionar é "botaoAdd" e remover "botaoRemove -->
      <input type="submit" class="btn-btn" name="btn" value="Adicionar" id="botaoAdd">
      <input type="submit" class="btn-btn" name="btn" value="Cancelar" id="botaoRemove">
      <p class="res"></p>
    </div>
    <div id="parabens">
      <h2 style="background: none; margin-top: 56px; " class="btn-parabens">Parabéns!<br> Você bebeu 2000L!<br>Até amanhã!</h2>
      
      <!-- Alterei o id abaixo para "botaoReset" e ouvinte de evento no código JS -->
      <input type="submit" class="btn-btn" name="btn" value="Resetar" id="botaoReset">
    </div>
    
    <!-- Ouvinte de evento no código JS --> 
    <input type="submit" value="Add" class="add-btn">
    <div id="add-agua"></div>
  </body>
</html>

No JavaScript eu alterei algumas coisas, adicionei elementos em cache e defini alguns novos nomes para as variáveis e funções.

Segue o código do script:

window.onload = function() {
  // Defini elementos em cache para serem
  // usados mais tarde nesse script
  var tempoElm = document.querySelector(".tempo"),  // O tempo
  infoDadosLitros = document.getElementById("estatisticasInfo"),  // Antes id home
  valorEAlcanceLitros = document.querySelector(".media-meta"),  // Meta de alcance
  progressoDeMeta = document.querySelector(".barra-meta"),  // Progresso do usuário
  congrats = document.getElementById("parabens"),  // Box com a mensagem de parabéns
  btnAddTabelaLitros = document.querySelector(".add-btn"),  // Botão para abrir o 
  // calculador de litros
  exibirLitros = document.querySelector(".add_agua"),  // Box para o usuário inserir litros
  btnAddInfoLitros = document.getElementById("botaoAdd"),  // Adicionar quantos litros bebeu
  btnRemoveInfoLitros = document.getElementById("botaoCancel"),  // Cancelar a inserção de litros
  btnResetMensagemParabens = document.getElementById("botaoReset");
  valorEAlcanceLitros.innerHTML = 0;  // Padrão do <span class="media-meta" é o valor 0
  exibirLitros.style.display = "none";  // Não exibir box para o usuário inserir litros
  congrats.style.display = "none";  // Não exibir box com a mensagem de parabéns
	
  // antes function data()
  function dataInfo() {
    
    // Variáveis com informações do tempo
    var t = new Date(),
    m = t.getMinutes(),
    h = t.getHours(),
    d = t.getDay() + 1,
    m = t.getMonth() + 1,
    s = t.getSeconds();
    
    // Inserir no interior do elemento com a classe .tempo
    tempoElm.innerHTML = `Tempo: ${h}:${m}:${s} Data: ${d}/${m}`;
    window.setInterval(dataInfo, 1000);
  }
  dataInfo();  // Chamar a função dataInfo()
	
  // Função para add box de calcular litros
  // antes function add_remove()
  function addCampoQntAgua() {
    exibirLitros.style.opacity = 1.0;
    exibirLitros.style.display = "block";
    infoDadosLitros.style.opacity = 0.3;
  }
	
  // Função de remover box de calcular litros
  function cancelar() {
    exibirLitros.style.display = "none";
    infoDadosLitros.style.opacity = 1.0;
  }
	
  // Resetar a mensagem de parabéns
  function resetarCongrats() {
    this.parentNode.style.display = "none";  // Oculta o "pai" do botão de reset
    // seria no caso o <div id="parabens">
    
    metaDeAlcanceLitros.innerHTML = 0;  // <span class="media-meta">0</span>
    infoDadosLitros.style.opacity = 1;  // Remove transparência dos dados de litros
    progressoDeMeta.style.width = "1%";  // O progresso volta a ser 1%
  }
	
  // Antes function js() < sem o parâmetro "e" 
  function calculoLitros(e) {
    // Cria variáveis. A "msgErroRes" era apenas "res"
    var msgErroRes, ml;
    // Atribui valores a elas
    msgErroRes = document.querySelector(".res");
    ml = Number(document.querySelector(".ml").value);
    
    // Se ml.value estiver vazio ou for menor que 0
    if (!ml || Number(ml) < 0) {
      msgErroRes.innerHTML = "Ml inválido";
      e.preventDefault();
      return false;
    } else {  // Se não
      
      var rel = 0;  // Declara a variável do contador
      while(rel < 2000) {  // Enquanto rel for menor que 2000
        rel = rel + ml;  // Faz um laço de rel + ml
        // Soma e exibe no HTML
        valorEAlcanceLitros.innerHTML = Number(valorEAlcanceLitros.innerHTML) + Number(rel);
        exibirLitros.style.display = "none";  // Não exibe informações dos litros 
        infoDadosLitros.style.opacity = 1;  // Sem transparência
				
        if (Number(valorEAlcanceLitros.innerHTML) > 249) {
          progressoDeMeta.style.width = "6%";
        }
       
        if (Number(valorEAlcanceLitros.innerHTML) > 599) {
          progressoDeMeta.style.width = "13%"; 
        }
					
        if (Number(valorEAlcanceLitros.innerHTML) > 999) {
          progressoDeMeta.style.width = "24%"; 
        }
				
        if (Number(valorEAlcanceLitros.innerHTML) > 1249) {
          progressoDeMeta.style.width = "31%"; 
        }	
				
        if (Number(valorEAlcanceLitros.innerHTML) > 1499) {
          progressoDeMeta.style.width = "37%"; 
        } 
				
        if (Number(valorEAlcanceLitros.innerHTML) > 2000) {
          progressoDeMeta.style.width = "48%";
          infoDadosLitros.style.opacity = 0.2;
          congrats.style.display = "block";
        }
        break;
      }
    }
  }
	
  // Adiciona funções
  btnAddTabelaLitros.onclick = addCampoQntAgua;
  btnAddInfoLitros.onclick = function() {calculoLitros(event)};
  btnRemoveInfoLitros.onclick = cancelar;
  btnResetMensagemParabens.onclick = resetarCongrats;
}

Wagner Leandro · 8 de novembro de 2020

@Adriano_web Tenho 15 anos. Eu tive essa ideia do nada(eu bebo bem pouca água por isso quis fazer isso! ainda vou fazer algum som sonoro de 2 em 2 hrs(exemplo) pra mim lembrar de beber agua)! Estudei bem pouco programação! manjo bem do front-end! sou um garoto muito esforçado! quero ter um futuro com isso. obrigado man

eu já estava desanimado

obrigadao de coração mesmo mano! não entendi muito o codigo, mas vou estudar ele a noite todaa pra entender! muito obrigado dnv! Deus lhe abençoe!

Você tem quantos anos de esperiência com programação? poderia mim dar alguma dica pra quem está começando ? lhe agradeço muito!!

tenho 3 meses de experiencia em back-end!

mim aprofundei dms no front-end (quase 1 ano)

Adriano_web · 8 de novembro de 2020

@Wagner Leandro

Fico feliz que com essa idade - por mais que escolas não ensinem absolutamente nada sobre programação - existam jovens que nem você buscando conhecimento desse tipo, muito importante para carreira profissional.

Eu tenho 5 anos de estudos(apenas front-end por enquanto). Eu comecei vendo vídeo-aulas no YouTube depois comecei a ler documentações e livros sobre. Estou lendo atualmente o livro JavaScript O Guia Definitivo de David Flanagan, aprendo muito com ele, mas ele só ensina até o ES5. Hoje há muitas novas versões, já temos o ES6, ES7 e o ES8 com ES9 já se especula. Contudo, acredito que não exista desenvolvedor que não seja aprendiz, pois sempre lançam tecnologias novas no mercado e estamos constantemente adquirindo novos conhecimentos.

Pode se dizer que sou como você, iniciante. Ainda não comecei a trabalhar nessa área, mas acredito que isso aconteça algum dia, ainda irei para faculdade, mas estou me consumindo de conhecimento bem antes para depois não ter dúvidas, igual a você provavelmente também está fazendo.

Recomendo fortemente o site w3schools.com

Esse site me ajudou de verdade, sem ele eu estaria dependendo do MDN e não gosto(sinceramente) com ele eu me enriqueci nos tutoriais diversos que tinham e tem até hoje. A forma de mostrar os exemplos e os famosos "quizzes" e exercícios me reforçou com esse site mesmo.

Um professor que me ajudou foi o Jaison Schimidt ele é sim um sênior nessa área, fiz um curso dele na devMedia que me ajudou também.

Hoje escrevo os meus códigos praticamente como o do site w3schools, sempre coloco ponto e vírgula no final de uma instrução:

var x = "Olá";

Sempre escrevo identificadores de variáveis e id's HTML com notação de camelo.

var meuNome = document.getElementById("nomeCompleto");

E sempre escrevo sem caracteres especiais como till, acento etc.

Wagner Leandro · 8 de novembro de 2020

@Adriano_web Muito obrigado. Mim ajudou bastante.

Entrar

CSS problema com loop (erro de logica)

Posts recomendados

Wagner Leandro

Adriano_web

Wagner Leandro

Adriano_web

Wagner Leandro

Crie uma conta ou entre para comentar

Criar uma conta

Entrar

Quem está navegando aqui 0 usuários estão online

Últimos tópicos

Livros

Cursos

Conteúdo recente

Sobre o Clube do Hardware

Direitos autorais

Mais

Fórum

Atividades

Artigos

Análises

Livros

Cursos