DOM&EVENT

le_wagon_race_pseudocode.js

// declare our event listener and wait for KEYUP
document.addEventListener("keyup", event => {
  // Someone press a key => Event
  console.log(event.keyCode)
  // check if the keycode is correct

  // if player1 keycode
  if (event.keyCode === 81) {

    const active = document.querySelector("#player1-race > .active")
    
    // check if win
    if (active.nextElementSibling === null) {
      alert("YOU WON!")
    } else {
      //   remove the .active class from the current target
      active.classList.remove("active")
      //   add the .active class to next element
      active.nextElementSibling.classList.add("active")
    }

  // if player2 keycode
  } else if (event.keyCode === 80) {
    
    const active = document.querySelector("#player2-race > .active")
    
    // check if win
    if (active.nextElementSibling === null) {
      alert("YOU WON!")
    } else {
      //   remove the .active class from the current target
      active.classList.remove("active")
      //   add the .active class to next element
      active.nextElementSibling.classList.add("active")
    }
  }

});

le_wagon_race_refactored.js

const winning_logic = () => alert("YOU WON!")

const move_your_wagon = (active) => {
  active.classList.remove("active")
  active.nextElementSibling.classList.add("active")
}

const check_if_win = (active) => active.nextElementSibling === null

const play = (active) => {
  if (check_if_win(active)) {
    winning_logic()
  } else {
    move_your_wagon(active)
  }
}

document.addEventListener("keyup", event => {

  if (event.keyCode === 81) {

    const active = document.querySelector("#player1-race > .active")
    play(active);

  } else if (event.keyCode === 80) {

    const active = document.querySelector("#player2-race > .active")
    play(active);

  }

});