API tools faq
paste
Advertisement
Claudio51

Calculador de IMC

Claudio51
Jun 7th, 2025
243
0
Never
1
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 31.20 KB | None | 0 0
raw download clone embed print report
  1.  
  2. <!DOCTYPE html><!-- by [email protected] -->
  3. <html lang="pt-br">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Calculadora de IMC</title>
  8.     <style>
  9.         body{
  10.             background-color:#e3e4e0;
  11.         }
  12.         .tab{
  13.             font-family: 'Trebuchet MS', sans-serif;
  14.             background-color:#fff;
  15.             width: 300px;
  16.             margin: 5px auto;
  17.             border: 1px solid #ccc;
  18.             border-radius: 10px;
  19.             box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  20.             padding: 5px 20px 15px 20px;
  21.         }
  22.         #tabela{
  23.             display:none;
  24.         }
  25.         #tabCredito{
  26.             display:none;
  27.         }
  28.         #historico{
  29.             display: none;
  30.         }
  31.         #tabHistorico{
  32.             width:86%;
  33.             height:219px;
  34.             background-color:#eee7be;
  35.             border:1px solid #ccc;
  36.             padding:20px;
  37.             overflow: auto;
  38.             margin-bottom: 4px;
  39.             font-size: 0.8em;
  40.         }
  41.         label{
  42.             display: block;
  43.             margin-bottom: 10px;
  44.             text-align: center;
  45.         }
  46.         input[type="text"]{
  47.             width: 84%;
  48.             height: 25px;
  49.             margin-bottom: 10px;
  50.             right: 20px;
  51.             padding: 10px;
  52.             border: 1px solid #ccc;
  53.             float:left;
  54.         }
  55.         table,td{
  56.             border-color: #fff;
  57.             padding:0;
  58.         }
  59.         table{
  60.             width: 100%;
  61.         }
  62.         td{
  63.             width: 50%;  
  64.         }
  65.         .botao{
  66.             color: #fff;
  67.             height:35px;
  68.             font-size: 16px;
  69.             border-radius: 5px;
  70.             cursor: pointer;
  71.             width:48%;
  72.             padding:0;
  73.             margin-top:2px;
  74.         }
  75.         #calcular{
  76.             background-color: #4caf50;
  77.             border:1px solid #3e8341;
  78.             width: 100%;
  79.         }
  80.         #calcular:hover{
  81.             background-color:  #3e8341;
  82.         }
  83.         .novoCadastro{
  84.             background-color: #755;
  85.             border:1px solid #000;  
  86.         }
  87.         .novoCadastro:hover{
  88.             background-color:  rgb(85, 61, 61);
  89.         }
  90.         .botaoInferior{
  91.             background-color: #3e84ee;
  92.             border:1px solid #2220b6;  
  93.         }
  94.         .botaoInferior:hover{
  95.             background-color: #2220b6;
  96.         }
  97.         .fechar{
  98.             background-color: #f13131;
  99.             float:right;
  100.             border:1px solid #991b0a;
  101.         }
  102.         .fechar:hover{
  103.             background-color:  #991b0a;
  104.         }
  105.         #resultado{
  106.             margin-top: 10px;
  107.             font-size: 18px;
  108.             font-weight: bold;
  109.             background-color: #d5dee6;
  110.             border:1px solid #7db2e0;
  111.             border-radius: 5px;
  112.             padding: 15px 0px 15px 0px;
  113.             display: none;
  114.         }
  115.         h2, h1{
  116.             background-color: #eee;
  117.         }
  118.         .magrezaGrauIII, .obesidadeGrauII{
  119.            background-color:#ccc;
  120.            border:1px solid #aaa;
  121.         }
  122.         .magrezaGrauII,.obesidadeGrauI{
  123.            background-color:#ddd;
  124.            border:1px solid #bbb;
  125.         }
  126.         .magrezaGrauI,.sobrepeso{
  127.            background-color:#eee;
  128.            border:1px solid #ccc;
  129.         }
  130.         .normal{
  131.            border:1px solid #ddd;
  132.         }    
  133.         .obesidadeGrauIII{
  134.           background-color:#bbb;
  135.           border:1px solid #999;
  136.         }
  137.         .tabelaIMC{
  138.             padding:5px;
  139.             border-radius: 5px;
  140.             margin: 5px 0 5px 0;
  141.         }
  142.         .labelPeso, .labelAltura{
  143.             color:#ad0303;
  144.         }
  145.         .imagem{
  146.             position:relative;
  147.             float:left;
  148.             margin-top:-60px;
  149.         }
  150.         img{
  151.             width:70px;
  152.             height:50px;  
  153.             background-color: #eee;
  154.             border:none;  
  155.         }
  156.         a{
  157.             text-decoration: none;
  158.             color:#000;
  159.         }
  160.         .tabelaCredito{
  161.             width: 98%;
  162.             border-radius: 5px;
  163.             padding:5px 0 5px 5px;
  164.             margin:5px 0;
  165.         }
  166.         .link{
  167.             background-color: #eee;
  168.             border:1px solid #ccc;    
  169.         }
  170.     </style>
  171. </head>
  172. <body>
  173.     <div id="formulario" class="tab">
  174.         <center><h1>Calculadora de IMC</h1></center>
  175.         <center><h2>Cl&aacuteudio Brito</h2></center>
  176.        <div id="imagem" style="display:none;" >
  177.             <a href="https://youtu.be/mDaa9ty23e8" target="_blank"><img class="imagem" src="https://i.pinimg.com/564x/c9/ae/14/c9ae1482ccf3b4503d6c9fff41b999f1.jpg" /></a>
  178.         </div>
  179.         <table>
  180.             <tr>
  181.                 <td>
  182.                     <label for="peso" class="labelPeso">Peso max. 250</label>
  183.                     <input type="text" id="peso" placeholder="Digite aqui o peso" maxlength="4" inputmode="numeric" required
  184.                    oninput="validaPeso(this.value)"
  185.                    onclick="limpaResultado();this.value = '';">
  186.                 </td>
  187.                 <td>
  188.                     <label for="altura" class="labelAltura">Altura max. 2,99</label>
  189.                     <input type="text" id="altura" placeholder="Digite aqui a altura" inputmode="numeric" maxlength="4" required
  190.                        oninput="validaAltura(this.value);"
  191.                        onkeyup="alturaMaxima(this.value);"
  192.                        onclick="limpaResultado();this.value = '';" >
  193.                 </td>
  194.             </tr>
  195.             <tr>
  196.                 <td>
  197.                     <label for="nome">Nome</label>
  198.                     <input type="text" id="nome" maxlength="50" placeholder="Digite aqui o nome"
  199.                        oninput="formataNome(this.value)"
  200.                        onclick="this.value = '';">
  201.                 </td>
  202.                 <td>
  203.                     <label for="idade">Idade max. 130</label>
  204.                     <input type="text" id="idade" max="3" inputmode="numeric" maxlength="3" placeholder="Digite aqui a idade"
  205.                        oninput="validaIdade(this.value)"
  206.                        onkeyup="idadeMaxima(this.value)"
  207.                        onclick="this.value = '';" >
  208.                 </td>
  209.             </tr>
  210.             <tr>
  211.                 <td colspan="2">
  212.                     <button id="calcular" class="botao" >Calcular IMC</button>
  213.                 </td>
  214.             </tr>
  215.         </table>
  216.         <table>
  217.             <tr>
  218.                 <td>
  219.                     <button  class="botao novoCadastro" onclick="limpaConsulta()" >Limpar</button>
  220.                     <button class="botao botaoInferior" onclick="mostraHistorico()">Hist&oacuterico</button>
  221.                </td>
  222.                <td>
  223.                    <button class="botao botaoInferior" onclick="tabCredito()">Cr&eacuteditos</button>
  224.                    <button class="botao botaoInferior" onclick="mostrar()">Tabela</button>
  225.                </td>
  226.            </tr>
  227.        </table>
  228.        <center><div id="resultado"></div></center>
  229.    </div>
  230.    <div id="tabela" class="tab">
  231.        <center><h1>Tabela de IMC</h1></center>      
  232.        <p class="tabelaIMC obesidadeGrauIII">Acima de 40 Obesidade grau III</p>
  233.        <p class="tabelaIMC obesidadeGrauII">Entre 35 e 40 Obesidade grau II</p>
  234.        <p class="tabelaIMC obesidadeGrauI">Entre 30 e 34,9 Obesidade grau I</p>
  235.        <p class="tabelaIMC sobrepeso">Entre 25 e 29,9 Sobrepeso</p>
  236.        <p class="tabelaIMC normal">Entre 18,5 e 24,9 Normal</p>
  237.        <p class="tabelaIMC magrezaGrauI">Entre 17 e 18.4 Magreza grau I</p>
  238.        <p class="tabelaIMC magrezaGrauII">Entre 16 e 16,9 Magreza grau II</p>
  239.        <p class="tabelaIMC magrezaGrauIII">Abaixo de 15,9 Magreza grau III</p>    
  240.        <table>
  241.            <tr>
  242.                <td></td>
  243.                <td>
  244.                    <button class="botao fechar" onclick="fechar()">Fechar</button>
  245.                </td>
  246.            </tr>
  247.        </table>
  248.    </div>
  249.    <div id="tabCredito" class="tab">
  250.        <center><h1>Cr&eacuteditos</h1></center>
  251.        <p class="tabelaCredito">Criado em maio/2025 por Cl&aacuteudio Brito</p>
  252.        <p class="tabelaCredito">Contato - Whatsapp (81) 9 9924-6724</p>
  253.        <p class="tabelaCredito">Clique abaixo, e siga-me redes sociais</p>
  254.        <p class="tabelaCredito link"><a href="https://threads.net/@xavier.brito" target="_blank">Threads - Xavier Brito</a></p>
  255.        <p class="tabelaCredito link"><a href="https://www.instagram.com/xavier.brito/" target="_blank">Instagram - Xavier Brito</a></p>
  256.        <p class="tabelaCredito link"></a><a href="https://m.facebook.com/claudio.xavier.37669/" target="_blank">Facebook - Cl&aacuteudio Brito</a></p>
  257.        <p class="tabelaCredito link"><a href="https://youtube.com/@cteclaudiobritocaruaru-pe9889?si=JanZY_EJXQixKK3C" target="_blank">Youtube - CTE Cl&aacuteudio Brito</a></p>
  258.        <p class="tabelaCredito link"><a href="https://www.instagram.com/oficina.c.t.eletronica/" target="_blank">Instagram - Oficina C.T.Eletr&ocircnica</a></p>  
  259.        <table>
  260.            <tr>
  261.                <td></td>
  262.                <td>
  263.                    <button class="botao fechar" onclick="fechar()">Fechar</button>
  264.                </td>
  265.            </tr>
  266.        </table>
  267.    </div>
  268.    <div id="historico"class="tab">
  269.        <center><h1>Hist&oacuterico</h1></center>
  270.        <div id="tabHistorico"></div>
  271.        <table>
  272.            <tr>
  273.                <td>
  274.                    <button class="botao novoCadastro" onclick="limparHistorico()" >Limpar </button>                
  275.                    <button class="botao botaoInferior" onclick="salvarDados()" >Salvar </button>
  276.                </td>
  277.                <td>
  278.                    <button class="botao fechar" onclick="fechar()">Fechar</button>
  279.                </td>
  280.            </tr>
  281.        </table>
  282.    </div>
  283.    <script>
  284.        const botaoCalcular = document.getElementById("calcular");
  285.         const resultado = document.getElementById("resultado");
  286.         function limpaResultado(){
  287.             document.getElementById('resultado').innerText = '';
  288.             document.getElementById('resultado').style.display='none';
  289.         }      
  290.         /******************************************************************* /
  291.         /                                                                    /
  292.         /                                                                    /
  293.         /     CAMPO PESO                                                     /
  294.         /                                                                    /
  295.         /                                                                    /
  296.         /********************************************************************/
  297.         function validaPeso(peso){// oninput
  298.             let inputPeso = document.getElementById('peso');
  299.             document.getElementById('peso').value = peso.replace(/[^0-9,]/g,'').replace(/(\..*?)\..*/g,'$1');
  300.             if(peso>250){
  301.                 document.getElementById('peso').value = '';
  302.             };
  303.             if(peso.substr(0) === '0' || peso.substr(0) === ','){
  304.                 document.getElementById("peso").value = '';
  305.             };
  306.             if(peso.substr(3,1) === ','){
  307.                 inputPeso.maxLength = 5;    
  308.             }else{
  309.                 inputPeso.maxLength = 4;
  310.             };
  311.             inputPeso.addEventListener('input', function(event){
  312.                 let v =  this.value;
  313.                 let m = v.match(/,/g);
  314.                 if(m && m.length >1){
  315.                    this.value = v.substring(0, v.indexOf(',')+1)
  316.                    + v.substring(v.indexOf(',')+1).replace(/,/g,'');
  317.                 }
  318.             });
  319.         };
  320.         /******************************************************************* /
  321.         /                                                                    /
  322.         /                                                                    /
  323.         /     CAMPO ALTURA                                                   /
  324.         /                                                                    /
  325.         /                                                                    /
  326.         /********************************************************************/
  327.         function alturaMaxima(alt){// onkeyup
  328.             if(alt.startsWith(3) || alt.startsWith(4) || alt.startsWith(5) || alt.startsWith(6) || alt.startsWith(7) || alt.startsWith(8) || alt.startsWith(9)){
  329.                 document.getElementById("altura").value = '';
  330.             }
  331.              if(alt.startsWith('0')){
  332.                 document.getElementById("altura").value = '0,'+ alt.substr(2);
  333.             }
  334.         }
  335.         const zero = document.getElementById('altura');
  336.         zero.addEventListener('keydown',(e)=>{
  337.             const valor = zero.value;
  338.             const ehZero = e.key === '0';
  339.             if (valor.length === 2 && ehZero){
  340.                e.preventDefault();
  341.             }
  342.         })
  343.         function validaAltura(altura){// oninput
  344.             altura = altura.replace(/[^0-9]/g,'').replace(/(\..*?)\..*/g,'$1');
  345.             altura = altura.replace(/\B(?=(\d{1})+(?!\d))/g, ",");
  346.             document.getElementById("altura").value = altura;
  347.             let inputAltura = document.getElementById('altura');
  348.             inputAltura.addEventListener('input', function(event){
  349.                 let v =  this.value;
  350.                 let m = v.match(/,/g);
  351.                 if(m && m.length >1){
  352.                    this.value = v.substring(0, v.indexOf(',')+1)
  353.                    + v.substring(v.indexOf(',')+1).replace(/,/g,'');
  354.                 }
  355.             });
  356.         }
  357.         /******************************************************************* /
  358.         /                                                                    /
  359.         /                                                                    /
  360.         /     CAMPO NOME                                                     /
  361.         /                                                                    /
  362.         /                                                                    /
  363.         /********************************************************************/
  364.         function formataNome(nome){// oninput
  365.             nome = nome.replace(/[^a-zA-Z ]/g,'');
  366.             nome = nome.toUpperCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '').replace(/\s+/g, ' ');
  367.             document.getElementById('nome').value = nome;
  368.             if(nome.startsWith(' ')){
  369.                 document.getElementById('nome').value = '';
  370.             };
  371.         }
  372.         /******************************************************************* /
  373.         /                                                                    /
  374.         /                                                                    /
  375.         /     CAMPO IDADE                                                    /
  376.         /                                                                    /
  377.         /                                                                    /
  378.         /********************************************************************/
  379.         function idadeMaxima(old){// onkeyup
  380.             if(old.startsWith('0')){
  381.                     document.getElementById("idade").value = '0,'+ old.substr(2);
  382.             }
  383.         }      
  384.         const zeroIdade = document.getElementById('idade');
  385.         zeroIdade.addEventListener('keydown',(e)=>{  
  386.             const valorIdade = zeroIdade.value;
  387.             const ehZeroIdade = e.key === '0';
  388.             if (valorIdade.startsWith('0') && valorIdade.length === 2 && ehZeroIdade){
  389.                e.preventDefault();
  390.             }
  391.         });
  392.         function validaIdade(idade){// oninput
  393.             if(idade.startsWith('0')){
  394.                 idade = idade.replace(/[^0-9,]/g,'').replace(/(\..*?)\..*/g,'$1');
  395.             }else{
  396.                 idade = idade.replace(/[^0-9]/g,'').replace(/(\..*?)\..*/g,'$1');
  397.             }
  398.             document.getElementById("idade").value = idade;
  399.             if(idade>130){
  400.                 document.getElementById('idade').value = '';
  401.             };
  402.             let inputIdade = document.getElementById('idade');
  403.             inputIdade.addEventListener('input', function(event){
  404.                 let v =  this.value;
  405.                 let m = v.match(/,/g);
  406.                 if(m && m.length >1){
  407.                    this.value = v.substring(0, v.indexOf(',')+1)
  408.                    + v.substring(v.indexOf(',')+1).replace(/,/g,'');
  409.                 }
  410.             });
  411.         }        
  412.         /******************************************************************* /
  413.         /                                                                    /
  414.         /                                                                    /
  415.         /    INICIO DO PROCESSO DO CALCULAR O IMC E SALVAR AS INFORMACOES    /
  416.         /                                                                    /
  417.         /                                                                    /
  418.         /*** funcao que calcula o IMC calculando o peso e a altura  *********/
  419.         botaoCalcular.addEventListener("click", (e) =>{
  420.             e.preventDefault();
  421.             const peso2 = document.getElementById("peso");
  422.             const altura2 = document.getElementById("altura");
  423.             const nome = document.getElementById("nome").value;
  424.             const idade = document.getElementById("idade").value;
  425.             // pega a data atual numa variavel
  426.             let dataAtual = new Date().toLocaleString();
  427.             // array que vai coletar as informacoes salvas e as novas
  428.             let arrayHistorico = [];
  429.             if(peso2.value < 2){
  430.                alert("Peso m\u00ednimo 2 que \u00e9 o mesmo que 2 kg");
  431.                return false;
  432.            }
  433.            if(altura2.value.startsWith('0')){
  434.                if(altura2.value.substr(0) === '0,' || altura2.value.substr(2,1) === '1' || altura2.value.substr(2,1) === '2' || altura2.value.substr(2,1) === '3'){
  435.                    alert("Altura m\u00ednima e 0,4 que \u00e9 o mesmo que 40 cm");
  436.                    return false;
  437.                }
  438.            }
  439.            if(nome !== '' && nome.length < 2){
  440.                alert("Nome precisa ter pelo menos dois caracteres");
  441.                return false;
  442.            }
  443.            if(idade !== ''){
  444.                if(idade.substr(0) === '0,'){
  445.                    alert("Idade inv\u00e1lida");
  446.                    return false;
  447.                }  
  448.            }
  449.            // se houver valor nos campos peso e altura, entra aqui
  450.            if(peso2.value !== '' && altura2.value !== ''){              
  451.                //  permite um valor flutuante no campo peso e troca a virgula pelo ponto
  452.                const peso = parseFloat(document.getElementById("peso").value.replace(",","."));            
  453.                //  permite um valor flutuante no campo altura e troca a virgula pelo ponto
  454.                const altura = parseFloat(document.getElementById("altura").value.replace(",","."));                
  455.                // caucula o IMC
  456.                const imc = peso / (altura * altura);                
  457.                // se o campo peso e altura estiverem preenchidos, mostra o resultado, segunda validacao
  458.                if(peso2.value.length>=1 && altura2.value.length>=1){
  459.                    // mostra a div do resultado
  460.                    document.getElementById("resultado").style.display="block";
  461.                     // puxa a classificacao de acordo com o resultado do imc
  462.                     const classificacao = classificarIMC(imc);
  463.                     // mostra o resultado na div com virgula ao inves de ponto
  464.                     resultado.innerText = `IMC: ${imc.toFixed(2).replace(".",",")} - ${classificacao}`;
  465.                     // busca encontrar o local expecifico onde vai salvar as informacoes
  466.                     if(localStorage.myHistory){
  467.                         // caso o local exista, pega as informacoes contida e coloca no array que foi criado
  468.                         arrayHistorico = JSON.parse(localStorage.getItem('myHistory'));
  469.                     };
  470.                     // com as informacoes coletadas do local storage, agora acrescenta as informacoes dos campos no array
  471.                     arrayHistorico.push('<center style="color:brown;background-color:white;padding:5px 5px 5px 5px; border-radius:5px;">--- NOVO HIST&OacuteRICO ---</center>');
  472.                     arrayHistorico.push('Nome : ' + nome);
  473.                     arrayHistorico.push('Idade : ' + idade);
  474.                     arrayHistorico.push('Peso : ' + peso.toFixed(1).replace(".",","));
  475.                     arrayHistorico.push('Altura : ' + altura.toFixed(2).replace(".",","));
  476.                     // mostra apenas as duas casas decimais do resultado
  477.                     arrayHistorico.push('IMC : ' + imc.toFixed(2).replace(".",","));
  478.                     arrayHistorico.push(classificacao);
  479.                     arrayHistorico.push('Data : ' + dataAtual) ;
  480.                     // salva tudo como uma unica informacao, substituindo as informacoes antigas no local especifico
  481.                     localStorage.myHistory = JSON.stringify(arrayHistorico);
  482.                 }else{
  483.                 // se o campo peso ou altura estiverem em branco  
  484.                     alert("Campo em vermelho, em branco");
  485.                 }
  486.             }else{
  487.                 alert("Campo em vermelho, em branco");
  488.             }
  489.         });
  490.         /************************************************************************** /
  491.         /                                                                           /
  492.         /                                                                           /
  493.         /     ***** INICIO DO PROCESSO DE CLASSIFICACAO DO RESULTADO DO IMC *****   /
  494.         /                                                                           /
  495.         /                                                                           /                                                          
  496.         /*** funcao que classifica o estado de saude de acordo com o IMC encontrado */
  497.         function classificarIMC(imc){
  498.             if(imc < 16){
  499.                return "Magreza grau III";
  500.            }else if(imc >= 16 && imc < 17){
  501.                return "Magreza grau II";
  502.             }else if(imc >=17 && imc < 18.5){
  503.                return "Magreza grau I";
  504.             }else if(imc >= 18.5 && imc < 25){
  505.                return "Normal";
  506.             }else if(imc >= 25 && imc < 30){
  507.                return "Sobrepeso";
  508.             }else if(imc >= 30 && imc < 35){
  509.                return "Obesidade Gral I";
  510.             }else if(imc >= 35 && imc < 40){
  511.                return "Obesidade Gral II";
  512.             }else{
  513.                 return "Obesidade Gral III";
  514.             }
  515.         }
  516.         /************************************************************************** /
  517.         /                                                                           /
  518.         /                                                                           /
  519.         /    ************ INICIO DA FUNCAO DE LIMPAR A ACONSULTA ****************   /
  520.         /                                                                           /
  521.         /                                                                           /
  522.         /*** funcao que limpa a consulta nos campos ********************************/
  523.         function limpaConsulta(){
  524.             if(confirm ("Deseja limpar tudo?")){
  525.                 // seleciona todos os campos input
  526.                 const inputs = document.querySelectorAll('input');
  527.                 // faz uma varredura em todos os inputs
  528.                 inputs.forEach(input => {
  529.                     // atribui o valor branco para cada um deles
  530.                     input.value = '';
  531.                 })
  532.                 // chama a funcao que limpa o resultado
  533.                 limpaResultado();
  534.             }else{
  535.                  // se nao for confirmada, retorna sem limpar os campos
  536.                 return false;
  537.             }
  538.         }
  539.         /************************************************************************** /
  540.         /                                                                           /
  541.         /                                                                           /
  542.         /     ************** INICIO DA FUNCAO MOSTRAR HISTORICO ****************    /
  543.         /                                                                           /
  544.         /                                                                           /
  545.         /*** funcao que mostra o historico *****************************************/
  546.         function mostraHistorico(){
  547.         document.getElementById("formulario").style.display="none";
  548.         document.getElementById("historico").style.display="block";
  549.             // se houver informacao no local especifico do local storage, entra aqui
  550.             if(localStorage.myHistory !==''){
  551.                 // cria uma variavel para mostrar o conteudo do local storage numa div
  552.                 let resultDIV = document.getElementById('tabHistorico');
  553.                 // se houver um local especifico no local storage, coleta as informacoes, segunda validacao
  554.                 if(localStorage.myHistory){
  555.                     // apaga as informacoes na div onde vai mostrar as informacoes atualizadas
  556.                     resultDIV.innerHTML = "";    
  557.                     // pega as informacoes do local storage e coloca no array
  558.                     arrayHistorico = JSON.parse(localStorage.getItem('myHistory'));  
  559.                     // com um loop for, cria uma lista e coloca na variavel que vai mostrar as informacoes na div
  560.                     for(let i in arrayHistorico){
  561.                         let p = document.createElement("p");
  562.                         p.innerHTML = arrayHistorico[i];
  563.                         resultDIV.append(p);
  564.                     }  
  565.                 }
  566.             }else{
  567.                 // se nao houver informacao, mostra a mensgem
  568.                 alert('Nenhuma informa\u00e7\u00e3o gravada');
  569.                 // chama a funcao fechar
  570.                 fechar();
  571.             }          
  572.         };
  573.         /************************************************************************** /
  574.         /                                                                           /
  575.         /                                                                           /
  576.         /     ************** INICIO DA FUNCAO LIMPAR HISTORICO *****************    /
  577.         /                                                                           /
  578.         /                                                                           /
  579.         /*** limpa o historico no local storage ************************************/
  580.         function limparHistorico(){
  581.             if(confirm ("Deseja limpar o hist\u00f3rico?")){
  582.             // se for confirmada, apaga todas as informacoes no local especifico no local storage
  583.             localStorage.myHistory = "";
  584.             // refresh na pagina
  585.             location.reload();
  586.             }else{
  587.                 // se nao for confirmada, retorna sem apagar o historico
  588.                 return false;
  589.             }
  590.         }
  591.         /************************************************************************** /
  592.         /                                                                           /
  593.         /                                                                           /
  594.         /     ***************** INICIO DAS FUNCOES MENORES *********************    /
  595.         /                                                                           /
  596.         /                                                                           /
  597.         /*** funcao do botao mostrar tabela  ***************************************/
  598.          function mostrar(){
  599.             document.getElementById("tabela").style.display="block";
  600.             document.getElementById("formulario").style.display="none";
  601.         }
  602.         // funcao do botao mostrar credito
  603.         function tabCredito(){
  604.             document.getElementById("tabCredito").style.display="block";
  605.             document.getElementById("formulario").style.display="none";
  606.         }
  607.         // funcao do botao mostrar historico
  608.         function mostrarHistorico(){
  609.             document.getElementById("formulario").style.display="none";
  610.             document.getElementById("historico").style.display="block";
  611.         }
  612.         // funcao do botao fechar
  613.         function fechar(){
  614.             document.getElementById("tabela").style.display="none";
  615.             document.getElementById("tabCredito").style.display="none";
  616.             document.getElementById("historico").style.display="none";
  617.             document.getElementById("formulario").style.display="block";  
  618.         }
  619.         /************************************************************************** /
  620.         /                                                                           /
  621.         /                                                                           /
  622.         /     ******* INICIO DO PROCEDIMENTO PARA MOSTRAR A IMAGEM *************    /
  623.         /                                                                           /
  624.         /                                                                           /
  625.         /*** busca a imagem na internet ********************************************/
  626.         let image = document.createElement('img');
  627.         image.src="https://i.pinimg.com/564x/c9/ae/14/c9ae1482ccf3b4503d6c9fff41b999f1.jpg";
  628.         // mostra a div da imagem se estiver conectado a internet
  629.         image.onload = function(){
  630.             document.getElementById("imagem").style.display = "block";
  631.         }
  632.         // esconde a div da imagem se nao estiver conectado a internet
  633.         image.onerror = function(){
  634.             document.getElementById("imagem").style.display = "none";
  635.         }
  636.         /******************************************************************* /
  637.         /                                                                    /
  638.         /                                                                    /
  639.         /     SALVAR DADOS EM ARQUIVO TXT                                    /
  640.         /                                                                    /
  641.         /                                                                    /
  642.         /********************************************************************/
  643.         function salvarDados(){
  644.             if(confirm ("Deseja salvar o hist\u00f3rico em arquivo de texto?")){
  645.                 const dados = localStorage.getItem('myHistory');
  646.                 const blob = new Blob([dados],{type: 'text/plain'});
  647.                 const link = document.createElement('a');
  648.                 link.href = URL.createObjectURL(blob);
  649.                 link.download = 'dados_imc.txt';
  650.                 link.click();
  651.             }else{
  652.                 return false;
  653.             }
  654.         }
  655.     </script>
  656. </body>
  657. </html>
Advertisement
Comments
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!