'How can I make it so on keydown my decks of cards swap?

I followed a tutorial for the codes below. On click or touch the card decks, the keyframe animation will swap the cards. I am trying to add on keydown and make the card swap but I am unable to get it working. I tried replacing eventlistener("keydown", swap) and adding onkeydown the the div but was not successful. How can I add keydown (any key) and still use the click event to make the deck run the animation? Thank you. Sorry I am not very knowledgeable with codes.

<body>

  <div class="main">
    <div class="stack" id="card-stack">


      <div class="card">What food do you like?
        <br>ウォット・フード・ドー・ユー・ライク?
        <br>英語で答えてください。
        <br>好きな食べ物は何ですか?
        <br>「アイ・ライク _______.」
      </div>
      <div class="card">What color do you like?
        <br>英語で答えてください
        <br>好きな色は何ですか？
        <br>「アイ・ライク _______.」
      </div>
      <div class="card">What game do you like?
        <br>英語で好きなゲームを言う
        <br>I like _______.
        <br>「アイ・ライク _______.」
      </div>
      <div class="card">友だちをさそう
        <br>Let's have a staring contest!
        <br>「レッツ にらめっこ！」
      </div>
      <div class="card">先生にききましょう。
        <br>Do you like video game?
        <br>先生、ビデオーゲームが好きですか？
        <br>「先生,ドー・ユー・ライク・ビデオー・ゲーム?」
      </div>
      <div class="card">友だちにききましょう。
        <br>好きな漢字は何ですか？
        <br>英語で言おう
        <br>What kanji do you like?
        <br>ウォット・かんじ・ドー・ユー・ライク?」
      </div>
    </div>
  </div>

  <style>
body {
  display: grid;
  justify-content: center;
  align-items: top;
  background-color: clear;
}

h1 {
  margin: 0px;
  color: white;
  font-size: 30px;
}

.main {
  margin: 0px;
}

.stack {
  width: 600px;
  height: 400px;
  position: relative;
}

.card {
  width: 100%;
  min-height: 80%;
  background-color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  text-align: center;
  justify-content: center;
  align-items: center;
  border-radius: 1em;
  font-family: sans-serif;
  font-size: 2em;
  color: #000000;
  box-shadow: 0 5px 10px 0 #00000040, 0 5px 10px 0#00000020;
  transition: transform 20ms;
  cursor: pointer;
}

.card:nth-last-child(n + 4) {
  --y: calc(-50% + -30px);
  transform: translate(-50%, var(--y)) scale(0.9);
  box-shadow: 0 0 1px 1px #00000003;
}

.card:nth-last-child(3) {
  --y: calc(-50% + -15px);
  transform: translate(-50%, var(--y)) scale(0.95);
}

.card:nth-last-child(2) {
  --y: calc(-50%);
  transform: translate(-50%, var(--y)) scale(1);
}

.card:nth-last-child(1) {
  --y: calc(-50% + 15px);
  transform: translate(-50%, var(--y)) scale(1.05);
}

@keyframes swap {
  50% {
    transform: translate(-50%, calc(var(--y) - 250px)) scale(0.85) rotate(-5deg);
    animation-timing-function: ease-in;
  }

  100% {
    transform: translate(-50%, calc(var(--y) - 15px)) scale(0.85);
    z-index: -1;
  }
}

.top {
  display: flex;
  justify-content: left;



}

#gen {
  background-color: navy;
  width: 80px;
  height: 40px;
  border: none;
  color: white;
  padding: 0px 0px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  border-radius: 0.5em;
  font-size: 10px;
  margin: 0px 10px;
  cursor: pointer;
}

.text {
  color: #f2f2f2;
  font-size: 45px;
  font-weight: bold;
  padding: 8px 12px;
  position: absolute;
  bottom: 0px;
  width: 100%;
  text-align: center;
  /* -webkit-text-stroke: 2px red; */
  /* width and color */
  /* 1 pixel black shadow to left, top, right and bottom 
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; */
}


  </style>

  <script>
    let stack = document.querySelector(".stack");

    [...stack.children].reverse().forEach(i => stack.append(i));

    stack.addEventListener("click", swap)

    function swap(e) {
      let card = document.querySelector(".card:last-child");
      if (e.target !== card) return;
      card.style.animation = "swap 300ms forwards";

      setTimeout(() => {
        card.style.animation = "";
        stack.prepend(card);
      }, 300);
    }

  </script>
</body>

javascript keyframe

Solution 1:^[1]

I think I've found the answer. If I remove the e from (e) and comment out the "if (e.target !== card) return;" line, then everything works.

<body>

  <div class="main">
    <div class="stack" id="card-stack">


      <div class="card">What food do you like?
      </div>
      <div class="card">What color do you like?
      </div>
      <div class="card">What game do you like?
      </div>
      <div class="card">???????
      </div>
      <div class="card">??????????
      </div>
      <div class="card">???????????
      </div>
    </div>
    <div>
      <button class="button" id="next" onclick="swap()">swap</button>

    </div>
  </div>

  <style>
    body {
      display: grid;
      justify-content: center;
      align-items: top;
      background-color: clear;
    }

    h1 {
      margin: 0px;
      color: white;
      font-size: 30px;
    }

    .main {
      margin: 0px;
    }

    .stack {
      width: 600px;
      height: 400px;
      position: relative;
    }

    .card {
      width: 100%;
      min-height: 80%;
      background-color: white;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: grid;
      text-align: center;
      justify-content: center;
      align-items: center;
      border-radius: 1em;
      font-family: sans-serif;
      font-size: 2em;
      color: #000000;
      box-shadow: 0 5px 10px 0 #00000040, 0 5px 10px 0#00000020;
      transition: transform 20ms;
      cursor: pointer;
    }

    .card:nth-last-child(n + 4) {
      --y: calc(-50% + -30px);
      transform: translate(-50%, var(--y)) scale(0.9);
      box-shadow: 0 0 1px 1px #00000003;
    }

    .card:nth-last-child(3) {
      --y: calc(-50% + -15px);
      transform: translate(-50%, var(--y)) scale(0.95);
    }

    .card:nth-last-child(2) {
      --y: calc(-50%);
      transform: translate(-50%, var(--y)) scale(1);
    }

    .card:nth-last-child(1) {
      --y: calc(-50% + 15px);
      transform: translate(-50%, var(--y)) scale(1.05);
    }

    @keyframes swap {
      50% {
        transform: translate(-50%, calc(var(--y) - 250px)) scale(0.85) rotate(-5deg);
        animation-timing-function: ease-in;
      }

      100% {
        transform: translate(-50%, calc(var(--y) - 15px)) scale(0.85);
        z-index: -1;
      }
    }

    .top {
      display: flex;
      justify-content: left;



    }

    #gen {
      background-color: navy;
      width: 80px;
      height: 40px;
      border: none;
      color: white;
      padding: 0px 0px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      border-radius: 0.5em;
      font-size: 10px;
      margin: 0px 10px;
      cursor: pointer;
    }

    .text {
      color: #f2f2f2;
      font-size: 45px;
      font-weight: bold;
      padding: 8px 12px;
      position: absolute;
      bottom: 0px;
      width: 100%;
      text-align: center;
      /* -webkit-text-stroke: 2px red; */
      /* width and color */
      /* 1 pixel black shadow to left, top, right and bottom 
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; */
    }

  </style>

  <script>
    let stack = document.querySelector(".stack");

    [...stack.children].reverse().forEach(i => stack.append(i));

    stack.addEventListener("click", swap)
    document.addEventListener("keydown", swap)

    function swap() {
      let card = document.querySelector(".card:last-child");
      // if (e.target !== card) return;
      card.style.animation = "swap 300ms forwards";

      setTimeout(() => {
        card.style.animation = "";
        stack.prepend(card);
      }, 300);
    }

  </script>
</body>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	konsomepanchi

'How can I make it so on keydown my decks of cards swap?

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]