Online HTML Editor/Compiler By FSIBLOG

Test Code (Try This Code For Testing):

HTML

<div class="container">
    <h2>Counter App</h2>
    <p>Current Count: <span id="count">0</span></p>
    <button onclick="increment()">Increment</button>
    <button onclick="decrement()">Decrement</button>
</div>

CSS

.container {
    padding: 2rem;
    border: 2px solid #d4d4d4;
    border-radius: 0.5rem;
    background-color: #f9fafb;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
}

h2 {
    color: #1f2937;
    margin-bottom: 1rem;
}

p {
    font-size: 1.125rem;
    color: #4b5563;
    margin-bottom: 1.5rem;
}

button {
    background-color: #000000;
    color: #ffffff;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    font-size: 1rem;
    margin: 0 0.5rem;
    transition: background-color 0.3s ease, transform 0.1s ease;
}

button:hover {
    background-color: #1f2937;
    transform: translateY(-2px);
}

JAVASCRIPT

let count = 0;
const countDisplay = document.getElementById('count');

function updateDisplay() {
    if (countDisplay) {
        countDisplay.textContent = count;
    }
}

function increment() {
    count++;
    updateDisplay();
}

function decrement() {
    count--;
    updateDisplay();
}

document.addEventListener('DOMContentLoaded', () => {
    updateDisplay();
});