クリックすると増減する、簡単なJavaScriptカウンターの作成！【JavaScript基本】

<div class="counter">
	<div class="count">0</div>
	<button id="decrement">減らす</button>
	<button id="increment">増やす</button>
</div>

.counter {
    text-align: center;
}
.count {
    font-size: 48px;
    margin: 20px 0;
}
button {
    background-color: #007BFF;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 18px;
    margin: 5px;
    transition: all 0.3s;
}
button:hover {
    background-color: #0056b3;
}

document.addEventListener('DOMContentLoaded', function () {
    const countElement = document.querySelector('.count');
    const incrementButton = document.querySelector('#increment');
    const decrementButton = document.querySelector('#decrement');

    let count = 0;

    incrementButton.addEventListener('click', function () {
        count++;
        updateCount();
    });

    decrementButton.addEventListener('click', function () {
        if (count > 0) {
            count--;
            updateCount();
        }
    });

    function updateCount() {
        countElement.textContent = count;
    }
});