How to make a dark mode button?

Asked

Viewed 78 times

0

I tried to create a simple code from a button that, when clicked, leaves the bottom of the page in dark mode.

const btn = document.querySelector(".button");
btn.addEventListener("click", (evt) => {
  evt.preventDefault();
  let body = document.querySelector("body");
  let contador = 0;
  body.classList.add("dark")
  contador += 1;
  if (contador == 2) {
    contador = 0;
    body.classList.remove("dark");
  }
})
.button {
  margin: 10% 49%;
  padding: 10px 15px;
  background-color: transparent;
  border: none;
  border-radius: 5px;
  transition: 600ms all;
  border: 2px solid rgb(240, 240, 240);
}

.button:hover {
  background: rgb(240, 240, 240);
  box-shadow: 2px 2px 7px 0 gray;
}

.section {
  margin: 10% 20%;
  background: rgb(240, 240, 240);
  padding: 10px 15px;
  border-radius: 10px;
}

.section__h1 {
  font-weight: lighter;
  letter-spacing: 1.25px;
}

.section__p {
  color: #808080;
}

.dark {
  transition: 400ms all;
  background: #1d2731;
  color: rgb(240, 240, 240)
}
<!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">
  <link rel="stylesheet" href="style.css">
  <title>texte</title>
</head>

<body>
  <button class="button">Dark Mode</button>
  <section class="section">
    <h1 class="section__h1">Lorem ipsum </h1>
    <p class="section__p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac nulla eleifend, interdum dolor eget, pretium leo. Sed interdum magna eget diam facilisis, vitae vulputate felis lobortis</p>
  </section>
  <script src="script.js"></script>
</body>

</html>

javascript html css

  • when the event callback is invoked, the variable contador is initialized at 0, you add 1, then the expression contador == 2 always returns false and instructions inside the if are never executed. Suggestion, put this excerpt let contador = 0; immediately below the instruction const btn = document.querySelector(".button");

1 answer

0

Basically as the friend previously reported, you need to set the value of the variable let contador = 0; before calling the click event, so you can work with the variable value during the event. :

  const btn = document.querySelector(".button");
  let contador = 0;
  btn.addEventListener("click", (evt) => {
  evt.preventDefault();
  let body = document.querySelector("body");

  body.classList.add("dark")
  contador += 1;
  if (contador == 2) {
    contador = 0;
    body.classList.remove("dark");
  }
})

His logic regarding the callback event is correct and functional in this way, the contador begins with 0 and upon receiving the click, it activates the Dark style and together receives the value 1. Upon receiving a new click to return to the original style it gets +1, having value 2, then that’s where I fall in your if and removes styling, and together transforms the counter into 0 again.

This way the code is already functional.

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.