Resumo da Live TikTok 24082024 – Desvendando o Código

Olá Pessoal!

Na Live do dia 24/08/2024 foram abordados os seguintes temas:

JavaScript
Laço For
Função;
Escopo;
Mini Projeto Veterinário.

ANOTACAO
if(condicao){ //verdadeiro
    //bloco de comandos
}else if(condicao){

   //bloco de comandos
}else{
    //bloco de comandos

}


FUNCAO
const soma = function (a, b){
    return console.log(a + b);
}
soma(50, 400);



ESCOPO
function exemploEscopo(){

  var  b = 3;
    if(b == 3){
        var escopoVar = "Aqui é o VAR";
        let escopoLet = "Aqui é o LET";
        const escopoConst = "Aqui é a CONST";
        console.log(escopoVar)
        console.log(escopoLet)
        console.log(escopoConst)
    }
        console.log(escopoVar)
       // console.log(escopoLet)
       // console.log(escopoConst)
}

exemploEscopo()


ESCOPO2
const numeros = [1,2,3,4];

numeros.push(99);
console.log(numeros);

var b = 3;

if(b == 3){
    numeros.push(100);
}
console.log(numeros);



MINI PROJETO 

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/estilo.css">
    <title>Mini Projeto </title>
</head>
<body>
    <img src="img/imagem.jpg" alt="">
    <h1>Veterinário JS</h1>

    <form>
        <p>Valor da Vacina
            <input type="numero"
            id="inValor">
        </p>

        <p>Possui Convênio
            <input type="radio"
             name="produto" id="rbSim"> Sim

             <input type="radio"
             name="produto" id="rbNao" checked> Não
        </p>

        <p class="oculta" id="pConvenio"
         >Convênio:

         <select id="selConvenio">
            <option value="amigo">Amigo</option>
            <option value="saude">Saúde Animal                
            </option>
         </select>
        </p>

        <input type="submit"
         value="Calcular Desconto">

    </form>

    <h3 id="outDesconto">         </h3>
    <h3 id="outPagar"></h3>
<script src="js/script.js"></script>
</body>
</html>


CSS
img{ width: 100%; border-radius: 15px;}
body{ background-color: rgb(222,232,241);}
.oculta{display: none;}
.exibe-linha{display: block;}



JAVASCRIPT
const frm = document.querySelector('form');
const convenio =
 document.querySelector('#pConvenio');

const resp1 =
 document.querySelector('#outDesconto');

 const resp2 =
 document.querySelector('#outPagar');

frm.addEventListener('submit',function(e){
    e.preventDefault()

const valor = Number(frm.inValor.value);

let desconto;

if(frm.rbSim.checked){

    if(frm.selConvenio.value == 'amigo'){
        desconto = calcularDesconto(valor, 20);
    }else{
        desconto = calcularDesconto(valor, 50);
    }

}else{
    desconto = calcularDesconto(valor, 10);
}

resp1.innerText = 
`Desconto R$: ${desconto.toFixed(2)}`

resp2.innerText = 
` A Pagar R$: ${(valor - desconto).toFixed(2)}`

 });

 const calcularDesconto =
  (valor, taxa) => valor * (taxa/100);
  
//  const calcularDesconto =
//   function (valor, taxa){
//      return valor * (taxa/100)}

frm.rbSim.addEventListener('change', ()=>{
convenio.className = 'exibe-linha'

});

frm.rbNao.addEventListener('change', ()=>{
    convenio.className = 'oculta'
})