# Simon light-up headache

**URL:** <https://forum.freecodecamp.org/t/simon-light-up-headache/179461>\
**Category:** General\
**Created:** [March 13, 2018, 8:16am UTC](https://forum.freecodecamp.org/t/simon-light-up-headache/179461 "2018-03-13T08:16:09Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Wynand](https://avatars.discourse-cdn.com/v4/letter/w/e68b1a/32.png) [@Wynand](https://forum.freecodecamp.org/u/Wynand)\
**Post date:** [March 13, 2018, 8:16am UTC](https://forum.freecodecamp.org/t/simon-light-up-headache/179461/1 "2018-03-13T08:16:09Z")

</div>

Hi guys and girls

In my Simon game I have a playSeq function that iterates through the computer array and plays the corresponding sound, like this:

```auto
async function playSeq(seq) {
      for (const value of seq) {
        await sleep(1500);
        soundPlayer(value);
      }
  };  
 
  function soundPlayer(seqCode) {
  switch (seqCode) {
    case 0:
       soundRed.load();
       soundRed.play();
      break;
    case 1:
       soundBlue.load();
       soundBlue.play();
      break;
    case 2:
       soundGreen.load();
       soundGreen.play();
      break;
    case 3:
       soundYellow.load();
       soundYellow.play();
      break;
  }    
}
 
  function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

```

This works fine to play the sounds of the computer sequence, but now I have no idea how to make the different color pads light up, I have tried putting a setInterval function within each case for the switch statement that adds a class for a second, but it is not working.

Any idea on how I can approach this problem?

---

<div class="post-metadata">

**Author:** ![Layer](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/layer/32/82898_2.png) [@Layer](https://forum.freecodecamp.org/u/Layer)\
**Post date:** [March 13, 2018, 11:59am UTC](https://forum.freecodecamp.org/t/simon-light-up-headache/179461/2 "2018-03-13T11:59:26Z")

</div>

Mh…point is the sound interrupt itself, highlight would need to be turned on and off. So you probably need to add a CSS class to highlight the pad and a setTimeout function to remove it for each case ^^  
By the way, are you sure of the async choice? I mean, you want the sequence to be played ‘in sequence’, as well as you don’t want your app to do something else meanwhile ^^

Hope it helps,  
-LyR-

---

<div class="post-metadata">

**Author:** ![Wynand](https://avatars.discourse-cdn.com/v4/letter/w/e68b1a/32.png) [@Wynand](https://forum.freecodecamp.org/u/Wynand)\
**Post date:** [March 13, 2018, 2:02pm UTC](https://forum.freecodecamp.org/t/simon-light-up-headache/179461/3 "2018-03-13T14:02:45Z")

</div>

Thank you for your reply. I couldn’t figure out any other way to iterate through the computer array and have it play the corresponding sound every 1.5 seconds. After countless hours I tried the FCC forum and somebody recommended the async function. At that point I’ve never even heard of async functions and promises, but I struggled with it a bit and figured my solution out…  
but now I feel so stuck and I’m starting to doubt I’ll ever get the hang of javascript and I’m seriously thinking of just giving up…

---

<div class="post-metadata">

**Author:** ![Layer](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/layer/32/82898_2.png) [@Layer](https://forum.freecodecamp.org/u/Layer)\
**Post date:** [March 13, 2018, 6:44pm UTC](https://forum.freecodecamp.org/t/simon-light-up-headache/179461/4 "2018-03-13T18:44:26Z")

</div>

Ah, don’t do it! I know the feeling, but there’s the other side of te coin: when you solve it you feel great! 😁

Anyway, dunno about the async stuff, but about scheduling in general you can have a look [here](https://javascript.info/settimeout-setinterval) (especially [this section](https://javascript.info/settimeout-setinterval#recursive-settimeout)).

Hope it helps,  
-LyR-

---

<div class="post-metadata">

**Author:** ![DanCouper](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dancouper/32/158608_2.png) [@DanCouper](https://forum.freecodecamp.org/u/DanCouper)\
**Post date:** [March 13, 2018, 6:50pm UTC](https://forum.freecodecamp.org/t/simon-light-up-headache/179461/5 "2018-03-13T18:50:52Z")

</div>

@Layer`setTimeout` is asynchronous: using `async` to create a `sleep` function is fitting here - it lets you schedule asynchrounous things like timeouts but write code that look synchronous - it makes it easer to read because you can write things one after the other, rather than in callbacks.

@Wynand assuming you select all your pads - like `const $allPads = document.querySelectorAll('.pad')`. And you select each individual pad as well - eg `$redPad = document.querySelector('.pad-red')`. Whatever your classes/ids are anyway, that’s just an example:

```auto
case 0:
  $allPads.forEach($pad => $pad.classList.remove('active');
  $redPad.classList.add('active');
  soundRed.load();
  soundRed.play();
  break;

```

So for each case, remove the `.active` class from all your pads, then add it to the current pad. Use CSS to colour it. Use animations/transitions in CSS if you want it to fade in/out or whatever.

---

<div class="post-metadata">

**Author:** ![Layer](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/layer/32/82898_2.png) [@Layer](https://forum.freecodecamp.org/u/Layer)\
**Post date:** [March 13, 2018, 7:40pm UTC](https://forum.freecodecamp.org/t/simon-light-up-headache/179461/6 "2018-03-13T19:40:42Z")

</div>

Ah yes yes, i meant that the code shoudn’t progress until the ‘delayed’ instruction were executed^^  
Thanks for clarify: i remember when i was working at that challenge i did something like the last code you wrote using `setInterval`, and the problem was that when the same pad was selected twice i coudn’t put a pause between them ( that’s why i went for two function calling each other with a setTimeout each ) but now i see i could have used promises to write it in a cleaner way^^

Thanks! 🙂  
-LyR-

---

<div class="post-metadata">

**Author:** ![IsaacAbrahamson](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/isaacabrahamson/32/30882_2.png) [@IsaacAbrahamson](https://forum.freecodecamp.org/u/IsaacAbrahamson)\
**Post date:** [March 13, 2018, 8:05pm UTC](https://forum.freecodecamp.org/t/simon-light-up-headache/179461/7 "2018-03-13T20:05:48Z")

</div>

I’ve edited your post for readability. When you enter a code block into the forum, precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See [this post](http://forum.freecodecamp.com/t/forum-code-formatting/25574) to find the backtick on your keyboard. The “preformatted text” tool in the editor (`</>`) will also add backticks around text.

![markdown_Forums](https://sea3.discourse-cdn.com/freecodecamp/uploads/default/original/3X/4/b/4b9a26f0c243380dd84935f4e29b92e3ecee8d05.gif)

---

<div class="post-metadata">

**Author:** ![Wynand](https://avatars.discourse-cdn.com/v4/letter/w/e68b1a/32.png) [@Wynand](https://forum.freecodecamp.org/u/Wynand)\
**Post date:** [March 14, 2018, 12:29pm UTC](https://forum.freecodecamp.org/t/simon-light-up-headache/179461/8 "2018-03-14T12:29:38Z")

</div>

Thank you so much @DanCouper ! You have practically helped me solved most of this project, thank you for putting in the effort to help me.

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 17, 2021, 8:24pm UTC](https://forum.freecodecamp.org/t/simon-light-up-headache/179461/9 "2021-01-17T20:24:22Z")

</div>

Closed on January 17, 2021, 8:24pm UTC