Function length

[Mackmiller]

What's the problem you're trying to solve?

I'm just trying to make sure my code is organized, it's operating fine. I'm just wondering if this function is okay as-is (super long) or if it's better practice to break it down into small functions?

Post any code you think might be relevant (one fenced block per file)

const populateScenarioBox = () => {
    //make response divs visible
    response1.style.display = "block"
    response2.style.display = "block"
    //populate divs with scenario info
    if (count == 1) {
        scenario.innerHTML = scenarioInfo[0][0]
        response1.innerHTML = scenarioInfo[0][1]
        response2.innerHTML = scenarioInfo[0][2]
    } else if (count == 2) {
        audio.play()
        //loop office sounds in background
        audio.loop = true;
        audio.volume = .2
        scenario.innerHTML = scenarioInfo[1][0]
        response1.innerHTML = scenarioInfo[1][1]
        response2.innerHTML = scenarioInfo[1][2]
        //rotate clock hand depending on number included in scenarioInfo array
        hourRotation(scenarioInfo[1][3])
    } else if (count == 3) {
        scenario.innerHTML = scenarioInfo[2][0]
        response1.innerHTML = scenarioInfo[2][1]
        response2.innerHTML = scenarioInfo[2][2]
        hourRotation(scenarioInfo[2][3])
        //for the scenarios that don't involve modals, run random num generator
        //5 chances throughout game for game to restart automatically
        randomNumber()
        console.log(number)
    } else if (count == 4) {
        scenario.innerHTML = scenarioInfo[3][0]
        response1.innerHTML = scenarioInfo[3][1]
        response2.innerHTML = scenarioInfo[3][2]
        hourRotation(scenarioInfo[3][3])
    } else if (count == 5) {
        scenario.innerHTML = scenarioInfo[4][0]
        response1.innerHTML = scenarioInfo[4][1]
        response2.innerHTML = scenarioInfo[4][2]
        hourRotation(scenarioInfo[4][3])
    } else if (count == 6) {
        scenario.innerHTML = scenarioInfo[5][0]
        response1.innerHTML = scenarioInfo[5][1]
        response2.innerHTML = scenarioInfo[5][2]
        hourRotation(scenarioInfo[5][3])
        randomNumber()
        console.log(number)
    } else if (count == 7) {
        scenario.innerHTML = scenarioInfo[6][0]
        response1.innerHTML = scenarioInfo[6][1]
        response2.innerHTML = scenarioInfo[6][2]
        hourRotation(scenarioInfo[6][3])
    } else if (count == 8) {
        scenario.innerHTML = scenarioInfo[7][0]
        response1.innerHTML = scenarioInfo[7][1]
        response2.innerHTML = scenarioInfo[7][2]
        hourRotation(scenarioInfo[7][3])
        randomNumber()
        console.log(number)
    } else if (count == 9) {
        scenario.innerHTML = scenarioInfo[8][0]
        response1.innerHTML = scenarioInfo[8][1]
        response2.innerHTML = scenarioInfo[8][2]
        hourRotation(scenarioInfo[8][3])
        randomNumber()
        console.log(number)
    } else if (count == 10) {
        scenario.innerHTML = scenarioInfo[9][0]
        response1.innerHTML = scenarioInfo[9][1]
        response2.innerHTML = scenarioInfo[9][2]
        hourRotation(scenarioInfo[9][3])
    } else {
        //end of game
        scenario.innerHTML = "<h5>PERFORMANCE EVALUATION:</h5>"
        if (points <= 20) {
            response1.innerHTML = "<strong>POOR</strong>"
            response1.style.color = "red"
            response2.innerHTML = "You made poor choices today from a work standpoint, but you put yourself first- that takes guts! But maybe a different job would be a better fit."
        } else if (points > 20 && points <= 40) {
            response1.innerHTML = "<strong>MEDIOCRE</strong>"
            response1.style.color = "yellow"
            response2.innerHTML = "You performed as an average employee today: working hard or hardly working."
        } else if (points > 40) {
            response1.innerHTML = "<strong>EXCELLENT</strong>"
            response1.style.color = "green"
            response2.innerHTML = "Stellar work today. You could ask for a raise, but let's be honest... it won't happen any time soon (if at all)."
        }
        //disable hover
        response1.style.backgroundColor = "#b2dfdb"
        response2.style.backgroundColor = "#b2dfdb"
        //console.log("game complete")
        //display restart button
        restartDiv.style.display = "inline-block"
        restart.style.display = "inline-block"
    }
}

If you see an error message, post it here. If you don't, what unexpected behavior are you seeing?

no unexpected behavior, I'm just wondering if this function is okay as-is (super long) or if it's better practice to break it down into small functions?

What is your best guess as to the source of the problem?

My guess is that it is fine as-is, but just wanted to check with you guys.

What things have you already tried to solve the problem?

I did try to use separate functions when initially building, but found it better to just store everything in the same function because I could

[Lizzwest]

In regards to project 1, if it is functional, legible code, you should be totally fine. IF you are done with your project and are just looking to clean your code up, go for it But, if you have not made the whole thing fully functional, I would suggest keeping it as is for now, build out the rest, and when you are done ( if there is still time) you can clean up the code. Hope this helps, let me know if you need clarity!

[tkolsrud]

Second Lizz's comment. Also, super long conditionals like that aren't even really that inefficient in terms of time/memory, so you're doing fine!

[Mackmiller]

okay, sounds good. thanks for both of your inputs!