javascript Counter Programming

Define the variable named count and set the initial value to zero

let count = 0;
const value = document.querySelector("#value");
 

In the above statements, we have defined a variables named value. The value of the value variable is set/initialized as the HTML element with ID value. such as <span id="value">0</span>

const btns = document.querySelectorAll(".btns");
 

In the above statement, we have defined a variables named btns as array. The value of the btns array is set/initialized as the HTML elements with class = “btn”. such as

<button class="btn">Reset</button>

            
              btns.forEach((btn)=>{
                btn.addEventListener("click", (e)=>{
                  const styles = e.currentTarget.classList;
                  if(styles.contains("decrease")){
                    count--;
                  }else if(styles.contains("increase")){
                    count++;
                  }else{
                    count = 0;
                  }
                  if (count > 0) {
                    value.style.color = "green";
                  }
                  if (count < 0) {
                    value.style.color = "red";
                  }
                  if (count === 0) {
                    value.style.color = "#222";
                  }
                  value.textContent.count;

                });
              });
            
          

Copy Code

        
          // set inital value to zero
          let count = 0;
          // select value and buttons
          const value = document.querySelector("#value");

          const btns = document.querySelectorAll(".btn");

          btns.forEach(function (btn) {
            btn.addEventListener("click", function (e) {
              const styles = e.currentTarget.classList;
              if (styles.contains("decrease")) {
                count--;
              } else if (styles.contains("increase")) {
                count++;
              } else {
                count = 0;
              }

              if (count > 0) {
                value.style.color = "green";
              }
              if (count < 0) {
                value.style.color = "red";
              }
              if (count === 0) {
                value.style.color = "#222";
              }
              value.textContent = count;
            });
          });