hhl_project/script.js

let step = 0;

function serveFood() {
    switch(step) {
        case 0:
            document.querySelector('.chef-hand').style.opacity = '1';
            setTimeout(() => {
                document.querySelector('.rice').style.opacity = '1';
                document.querySelector('.chef-hand').style.opacity = '0';
            }, 500);
            break;
        case 1:
            document.querySelector('.chef-hand').style.opacity = '1';
            setTimeout(() => {
                document.querySelector('.meat').style.opacity = '1';
                document.querySelector('.chef-hand').style.opacity = '0';
            }, 500);
            break;
        case 2:
            document.querySelector('.chef-hand').style.opacity = '1';
            setTimeout(() => {
                document.querySelector('.rice-mirror').style.opacity = '1';
                document.querySelector('.chef-hand').style.opacity = '0';
            }, 500);
            break;
        case 3:
            document.querySelector('.chef-hand').style.opacity = '1';
            setTimeout(() => {
                document.querySelector('.meat-mirror').style.opacity = '1';
                document.querySelector('.chef-hand').style.opacity = '0';
            }, 500);
            break;
        case 4:
            document.querySelector('.rice').style.opacity = '0';
            document.querySelector('.meat').style.opacity = '0';
            document.querySelector('.rice-mirror').style.opacity = '0';
            document.querySelector('.meat-mirror').style.opacity = '0';
            step = -1;
        default:
            step = -1;
            break;
    }
    step++;
    console.log(step);
}