Importante

Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!

1
resposta

Alguem pode me explicar esse codigo? não entendi direto, por exemplo o porque colocar.btn e #valor

javascript
Meus codigos: 
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

                <!--CSS-->
    <link rel="stylesheet" href="styles.css">

    <title>Contador</title>
</head>
<body>

    <div class="container">
        <h1>Contador</h1>
        <span id="valor">0</span>

        <div class="button">

            <button class="btn diminuir">Diminuir</button>
            <button class="btn resetar">Resetar</button>
            <button class="btn aumentar">Aumentar</button>

    </div>
            <!--JavaScript-->
    <script src="script.js"></script>
</body>
</html>

    let count = 0;

const valor = document.querySelector("#valor");
const btns = document.querySelectorAll(".btn");

btns.forEach(function (btn){
    btn.addEventListener("click", function (e){
        const styles = e.currentTarget.classList;
        if (styles.contains("diminuir")){
            count--;
        } else if (styles.contains("aumentar")){
            count++;
        } else{
            count = 0;
        }
        valor.textContent = count;
    });
});
1 resposta

Olá Luis, tudo bem? ".btn" é uma classe CSS, que é usada para selecionar vários elementos HTML que compartilham as mesmas propriedades de estilo. No caso desse código, três botões são selecionados com a classe "btn". Já o "#valor" é um identificador (ou ID) CSS, que é usado para selecionar um único elemento HTML. No caso desse código, um elemento com id "valor" é selecionado para exibir o valor atual do contador.