Answer to Question #302700 in HTML/JavaScript Web Application for chethan

Question #302700

Counter

The goal of this coding exam is to quickly get you off the ground with Conversions and Conditional Statements.

Use the below reference image.

https://assets.ccbp.in/frontend/content/dynamic-webapps/counter-op.gif

HTML

<!DOCTYPE html>

<html>

<body>

<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>

CSS

.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;

}

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() {
            counterValue.innerHTML -= 1;
        }
        function onIncrement() {
            counterValue.innerHTML = +counterValue.innerHTML + 1;
        }
    </script>
</body>
</html>

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

Comments

No comments. Be the first!

Answer to Question #302700 in HTML/JavaScript Web Application for chethan

Comments

Leave a comment

Related Questions