match

by zxzc0

HTML

<div id="co">
  <div class="word" id="">x</div>
  <div class="word" id="">x</div>
  <div class="word" id="">x</div>
  <div class="word" id="">x</div>
  <div class="word" id="">x</div>
  <div class="word" id="">x</div>
</div>

CSS

*{
    box-sizing: border-box;
}
body {
  background-color: #21262D;
  color: #fff;
}

#co {
  max-width: 700px;
  margin: 50px auto;
}

.word {
  display: inline-block;
  max-width: 150px;
  min-width: 60px;
  margin: 5px;
  border: 1px solid #ccc;
  padding: 5px;
  text-align: center;
  cursor: pointer;
}

.word:hover {
  border: 1px solid #fff;
}

JavaScript

let words = [{
  q: 'historia',
  w: 'history'
}, {
  q: 'nauki humanistyczne',
  w: 'humanities'
}, {
  q: 'Polish',
  w: 'język polski'
}, {
  q: 'nauki społeczne',
  w: 'social sciences'
}, {
  q: 'przedmioty ścisłe',
  w: 'science subjects'
}, {
  q: 'religia',
  w: 'religious education'
}, {
  q: 'medioznawstwo',
  w: 'media studies'
}, {
  q: 'technika',
  w: 'design and technology'
}, {
  q: 'psychologia sportu',
  w: 'sports psychology'
}, {
  q: 'ekonomia',
  w: 'economic education'
}, {
  q: 'nauka o ochronie środowiska',
  w: 'environmental science'
}, {
  q: 'przedmioty artystyczne',
  w: 'arts subjects'
}, {
  q: 'chemia',
  w: 'chemistry'
}, {
  q: 'podwójna lekcja',
  w: 'double lesson'
}, {
  q: 'biologia',
  w: 'biology'
}, {
  q: 'WF, wychowanie fizyczne',
  w: 'PE / physical education'
}, {
  q: 'fizyka',
  w: 'physics'
}, {
  q: 'matematyka (matma)',
  w: 'mathematics (maths)'
}, {
  q: 'muzyka',
  w: 'music'
}, {
  q: 'informatyka',
  w: 'IT / information technology'
}, {
  q: 'języki obce',
  w: 'foreign languages'
}, ];