【JavaScript】QRコードで神経衰弱やったら思ったよりも簡単で草だった

この記事を三行にまとめると

QRコードで神経衰弱できんじゃね？
実際にやってみた
思ったよりは難しくなかった

この記事は以下の動画の中に出てきたサンプルコードを載せたものです。コピペなどが必要なときに使ってください。

QRCode.jsについて

QRCode.jsは以下のページからダウンロードできます。
QRCode.js

HTML

<div id="qrcodes">
  <div data-word="spade"></div>
  <div data-word="spade"></div>
  <div data-word="clover"></div>
  <div data-word="clover"></div>
  <div data-word="heart"></div>
  <div data-word="heart"></div>
  <div data-word="diamond"></div>
  <div data-word="diamond"></div>
  <div data-word="ace"></div>
  <div data-word="ace"></div>
  <div data-word="joker"></div>
  <div data-word="joker"></div>
  <div data-word="jack"></div>
  <div data-word="jack"></div>
  <div data-word="queen"></div>
  <div data-word="queen"></div>
  <div data-word="king"></div>
  <div data-word="king"></div>
</div>
<div class="button">
  <button id="shuffle">Shuffle</button>
</div>

CSS

#qrcodes {
  margin-top: 20px;
  display: grid;
  place-content: center;
  grid-template-columns: repeat(6, 100px);
  column-gap: 10px;
  row-gap: 10px;
}
div[data-word] {
  cursor: pointer;
  position: relative;
}
div[data-word]:active {
  top: 2px;
}
strong {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: crimson;
  background: #fff;
  padding: 0px 5px;
  opacity: 0;
}
.hold strong {
  opacity: 1;
}
.hold img {
  opacity: 0.4;
}
#shuffle {
  width: 650px;
  height: 40px;
  margin-top: 20px;
}
.selected {
  outline: 4px solid red;
  outline-offset: -4px;
}
.button {
  text-align: center;
}

JavaScript

const cards = document.querySelectorAll('#qrcodes div');
let selected = '';

cards.forEach((card) => {

  // QRコードを生成
  new QRCode(card, {
    text: card.dataset.word,
    width: 100,
    height: 100,
  });
  card.removeAttribute('title');

  // 正解したときに単語を表示するためのstrongタグ
  div = document.createElement('strong');
  div.append(card.dataset.word);
  card.append(div);

  card.onclick = () => {
    if(card.classList.contains('selected') || card.classList.contains('hold')) {
      return;
    }

    // クリックしたdivにselectedクラスを付与する
    card.classList.add('selected');

    // 一枚目を選択したときはselectedに値を入れて処理終了
    if(selected == '') {
      selected = card.dataset.word;
      return;
    }

    // 二枚目を選択したとき
    selects = document.querySelectorAll('.selected');
    selects.forEach((select) => {

      // selectedクラスをはずす
      select.classList.remove('selected');

      // 一枚目と二枚目の単語が同じならholdクラスを付与する
      if(card.dataset.word == selected) {
        select.classList.add('hold');
      }
    });

    selected = '';
  }
})

const container = document.getElementById('qrcodes');
const shuffle = document.getElementById('shuffle');

// カードをシャッフルする
shuffle.onclick = () => {
  cards.forEach((card) => {
    i = Math.floor(Math.random() * container.children.length);
    container.appendChild(container.children[i]);

    card.classList.remove('hold');
  });
}