title: How can I make it so on keydown my decks of cards swap?
body: <p>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(&quot;keydown&quot;, 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.</p>
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
  
    &lt;div class="main"&gt;
      &lt;div class="stack" id="card-stack"&gt;
  
  
        &lt;div class="card"&gt;What food do you like?
          &lt;br&gt;ウォット・フード・ドー・ユー・ライク?
          &lt;br&gt;英語で答えてください。
          &lt;br&gt;好きな食べ物は何ですか?
          &lt;br&gt;「アイ・ライク _______.」
        &lt;/div&gt;
        &lt;div class="card"&gt;What color do you like?
          &lt;br&gt;英語で答えてください
          &lt;br&gt;好きな色は何ですか？
          &lt;br&gt;「アイ・ライク _______.」
        &lt;/div&gt;
        &lt;div class="card"&gt;What game do you like?
          &lt;br&gt;英語で好きなゲームを言う
          &lt;br&gt;I like _______.
          &lt;br&gt;「アイ・ライク _______.」
        &lt;/div&gt;
        &lt;div class="card"&gt;友だちをさそう
          &lt;br&gt;Let's have a staring contest!
          &lt;br&gt;「レッツ にらめっこ！」
        &lt;/div&gt;
        &lt;div class="card"&gt;先生にききましょう。
          &lt;br&gt;Do you like video game?
          &lt;br&gt;先生、ビデオーゲームが好きですか？
          &lt;br&gt;「先生,ドー・ユー・ライク・ビデオー・ゲーム?」
        &lt;/div&gt;
        &lt;div class="card"&gt;友だちにききましょう。
          &lt;br&gt;好きな漢字は何ですか？
          &lt;br&gt;英語で言おう
          &lt;br&gt;What kanji do you like?
          &lt;br&gt;ウォット・かんじ・ドー・ユー・ライク?」
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;style&gt;
  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; */
  }
  
  
    &lt;/style&gt;
  
    &lt;script&gt;
      let stack = document.querySelector(".stack");
  
      [...stack.children].reverse().forEach(i =&gt; 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(() =&gt; {
          card.style.animation = "";
          stack.prepend(card);
        }, 300);
      }
  
    &lt;/script&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>