How to increase, decrease and reset the counter in dynamic web application

Here we have counter application to increase, decrease and reset the counter by using HTML, CSS, and JavaScript, but I can’t getting to do how we can increase the counter and decrease the counter and reset the counter.

When the HTML button element with the id decreaseBtn is clicked, If the count is odd then decrease the counter value by -1 as shown in the image. If the count is even then decrease the counter value by -2 as shown in the image.
When the HTML button element with the id increaseBtn is clicked, If the count is odd then increase the counter value by 10 as shown in the image. If the count is even then increase the counter value by 5 as shown in the image.
When the HTML button element with the id resetBtn is clicked, Set counter value as 0.

The Output image is Counter app

let counterElement = document.getElementById("counterValue");

function onIncrement() {
  let previousCounterValue = counterElement.textContent;
  let updatedCounterValue = parseInt(previousCounterValue) + 1;
  if (updatedCounterValue > 0) {
    counterElement.style.color = "black";
  }
  else if (updatedCounterValue < 0) {
    counterElement.style.color = "black";
  }
  else {
    counterElement.style.color = "black";
  }
  counterElement.textContent = updatedCounterValue;
}

function onDecrement() {
  let previousCounterValue = counterElement.textContent;
  let updatedCounterValue = parseInt(previousCounterValue) - 1;
  if (updatedCounterValue > 0) {
    counterElement.style.color = "black";
  }
  else if (updatedCounterValue < 0) {
    counterElement.style.color = "black";
  }
  else {
    counterElement.style.color = "black";
  }
  counterElement.textContent = updatedCounterValue;
}

function onReset() {
  let counterValue = 0;
  counterElement.textContent = counterValue;
  counterElement.style.color = "black";
}

 @import url("https://fonts.googleapis.com/css2?family=Bree+Serif&family=Caveat:wght@400;700&family=Lobster&family=Monoton&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display+SC:ital,wght@0,400;0,700;1,700&family=Playfair+Display:ital,wght@0,400;0,700;1,700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&family=Source+Sans+Pro:ital,wght@0,400;0,700;1,700&family=Work+Sans:ital,wght@0,400;0,700;1,700&display=swap");

.counter-value {
    font-size: 36px;
    font-weight: 900;
}

.button {
    color: #ffffff;
    background-color: #0967d2;
    font-size: 14px;
    border-width: 0;
    border-radius: 4px;
    padding: 10px;
}

<!DOCTYPE html>
<html>

<head> </head>

<body>
    <p id="counterValue" class="counter-value">0</p>
    <button id="decreaseBtn" class="button" onclick="onDecrement()">DECREASE</button>
    <button id="resetBtn" class="button" onclick="onReset()">RESET</button>
    <button id="increaseBtn" class="button" onclick="onIncrement()">INCREASE</button>
</body>

</html>

Expected Output is Counter app

Answer

I am new to js so may not be best solution.

let count = 0;
const counter = document.getElementById("counterValue");

function isEven(num) {
    return num % 2 ? false : true;
}

function onDecrement() {
    if (isEven(count)) {
        count = count - 2;
    } else {
        count = count - 1;
    }
    counter.textContent = count;
}

function onReset() {
    count = 0;
    counter.textContent = count;
}

function onIncrement() {
    if (isEven(count)) {
        count = count + 5;
    } else {
        count = count + 10;
    }
    counter.textContent = count;
}

.counter-value {
  font-size: 36px;
  font-weight: 900;
}

.button {
  color: #ffffff;
  background-color: #0967d2;
  font-size: 14px;
  border-width: 0;
  border-radius: 4px;
  padding: 10px;
}

<!DOCTYPE html>
<html>

<head> </head>

<body>
  <p id="counterValue" class="counter-value">0</p>
  <button id="decreaseBtn" class="button" onclick="onDecrement()">DECREASE</button>
  <button id="resetBtn" class="button" onclick="onReset()">RESET</button>
  <button id="increaseBtn" class="button" onclick="onIncrement()">INCREASE</button>
</body>

</html>

Advertisement

Answer

I am new to js so may not be best solution.