const counterElement = document.querySelector('#counter-value')
const incrementButton = document.querySelector('#btn-increment')
const decrementButton = document.querySelector('#btn-decrement')

function updateCounter(value) {
    counterElement.textContent = `Counter: ${value}`
}

incrementButton.addEventListener('click', async () => {
    const res = await fetch('/api/increment', { method: 'POST' })
    const data = await res.json()
    updateCounter(data)
})

decrementButton.addEventListener('click', async () => {
    const res = await fetch('/api/decrement', { method: 'POST' })
    const data = await res.json()
    updateCounter(data)
})

async function main() {
    const res = await fetch('/api/value')
    const data = await res.json()
    updateCounter(data)
}

main()