A naive approach to implementing the Ordered Server Counter

naive-approach.js

import material from 'materialize-css/dist/js/materialize';

let count = 0;

// Server simulation
async function processCommand() {
    count += 1;
    return count;
}

// Network delay simulation
async function serverDelay() {
    return new Promise(resolve => setTimeout(resolve, parseInt(Math.random() * 500)));
}

window.addEventListener('load', () => {
    document.getElementById("genToast").addEventListener('click', async () => {
   
        await serverDelay();
        let number = await processCommand()
        await serverDelay();
        
        material.toast({
            html: `<span style="font-size: 48px; padding: 2rem;">#${number}</span>`,
            displayLength: 1000
        });
    })
})