Answer to Question #303409 in HTML/JavaScript Web Application for taufiq umar

Question

Answer to Question #303409 in HTML/JavaScript Web Application for taufiq umar

Answers>

Programming & Computer Science>

HTML/JavaScript Web Application

Question #303409

Achieve the given functionality using JS.

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.

Expert's answer

<!DOCTYPE html>
<html>
<head></head>
<body>
    <style>
        .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;
        }
    </style>
    <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>
    <script>
        const counterValue = document.querySelector('#counterValue'),
              descreaseBtn = document.querySelector('#descreaseBtn'),
              resetBtn = document.querySelector('#resetBtn'),
              increaseBtn = document.querySelector('#increaseBtn');
            
        function onReset() {
            counterValue.innerHTML = 0
        }
        function onDecrement() {
            if (+counterValue.innerHTML % 2 == 1) {
                counterValue.innerHTML = +counterValue.innerHTML - 1;
            } else {
                counterValue.innerHTML = +counterValue.innerHTML - 2
            }
        }
        function onIncrement() {
            if (+counterValue.innerHTML % 2 == 1) {
                counterValue.innerHTML = +counterValue.innerHTML + 10;
            } else {
                counterValue.innerHTML = +counterValue.innerHTML + 5;
            }
        }
    </script>
</body>
</html>

Learn more about our help with Assignments: Programming & Computer Science

Comments

No comments. Be the first!

Answer to Question #303409 in HTML/JavaScript Web Application for taufiq umar

Comments

Leave a comment

Related Questions