Home

Karaoke with Async/Await

--- START --------------------------------------------


const karaoke = document.getElementById('lyrics');
const heroes = {
    line1: '<p><span>1</span> I, I will be king</p>',
    line2: '<p><span>2</span> And you, you will be queen</p>',
    line3: '<p><span>3</span> Though nothing will drive them away</p>',
    line4: '<p><span>4</span> We can beat them, just for one day</p>',
    line5: '<p><span>5</span> We can be heroes, just for one day</p>',
};

const delay = (ms = 2000) => new Promise((resolve) => setTimeout(resolve, ms));

async function addLine() {
    karaoke.innerHTML += '<p>--- START --------------------------------------------</p>';
    await delay();
    karaoke.innerHTML += heroes.line1;
    await delay();
    karaoke.innerHTML += heroes.line2;
    await delay();
    karaoke.innerHTML += heroes.line3;
    await delay();
    karaoke.innerHTML += heroes.line4;
    await delay();
    karaoke.innerHTML += heroes.line5;
    await delay();
    karaoke.innerHTML += '<p>--- END ----------------------------------------------</p>';
    console.log('lyrics written to page');
}
addLine();