Sayna Sayna - 6 months ago 8
Javascript Question

Match A to B, correct match disappear, and timer and error count

Would appreciate some guidance with this matching activity. I illustrate with the basic

html
and
css
code below - this is the format that I want, meaning, I want the contents (words/numbers) of the boxes to be changeable in the
HTML
section, I just need help with the
javascript
.

Aim: to match A to B, so for example, when user clicks on
"aaaaaaaa"
and
"11111111"
then the match is correct and both boxes disappears. However if for example the user clicks on
"aaaaaaaa"
and
"33333333"
then it is recorded and counted as an error which is then displayed on the page.

Also, how to add a timer from the moment the page is loaded till all the matches are made and the activity is finished ?

<html>
<head>
<style>

#wordBx
{
width:168px;
height:168px;
border:1px grey solid;
text-align:center;
padding:1px;
float:left;
}

.word
{
width:165px;
height:40px;
border:1px grey solid;
}

#numBox
{
width:50%;
height:400px;
border:1px blue solid;
text-align:center;
margin:1px;
float:left;
overflow:hidden;
}

.numb
{
width:180px;
height:70px;
border:1px blue solid;
margin:2px;
float:left;
font-size:11pt;
}

</style>

</head>
<body>

<div class="wordBx">
<div class="word">aaaaaaaa</div >
<div class"word">bbbbbbbb</div >
<div class="word">cccccccc</div >
<div class="word">dddddddd</div >
</div>

<div id="numBox">
<div class="numb">11111111</div >
<div class="numb">22222222</div >
<div class="numb">33333333</div >
<div class="numb">44444444</div >
</div>


</body>
</html>

Max Max
Answer
var words = document.querySelectorAll('.word');
var numbers = document.querySelectorAll('.number');
var selectedWordIndex;
var selectedNumberIndex;
var timerInstance;

// Validate game settings
if (words.length !== numbers.length) {
    return console.error('Words list size should be same as numbers list');
}

// Register click event handlers on all words and numbers
for (var i = 0; i < words.length; i++) {
    words[i].setAttribute('data-index', i);
  words[i].addEventListener('click', function(event) {
        selectedWordIndex = this.dataset.index;
    checkMatching();
    });  
}

for (var i = 0; i < numbers.length; i++) {
    numbers[i].setAttribute('data-index', i);
    numbers[i].addEventListener('click', function(event) {
        selectedNumberIndex = this.dataset.index;
        checkMatching();
    });
}

function checkMatching() {
    // When user selection matches
    if (selectedWordIndex === selectedNumberIndex) {
    // Remove pair
    var word = document.querySelector('.word[data-index="' + selectedWordIndex + '"]')
    var number = document.querySelector('.number[data-index="' + selectedNumberIndex + '"]')
    word.parentNode.removeChild(word);
    number.parentNode.removeChild(number);

    // Reset selection
    selectedWordIndex = null;
    selectedNumberIndex = null;

    // Check if game is ended
    if (document.querySelectorAll('.word').length === 0) {
      // Remove blocks and stop the timer
        var words = document.querySelector('.words');
        var numbers = document.querySelector('.numbers');
        words.parentNode.removeChild(words);
        numbers.parentNode.removeChild(numbers);
        clearInterval(timerInstance);
    }
  } else if (selectedWordIndex && selectedNumberIndex) {
    // Register an error while selection does not match
    var errorCounter = document.querySelector('.errors .counter');
    errorCounter.innerHTML = parseInt(errorCounter.innerHTML, 10) + 1;
  }
}

function startTimer() {
    var display = document.querySelector('.time');
    var timer = 0, minutes, seconds;
    timerInstance = setInterval(function () {
        minutes = parseInt(timer / 60, 10);
        seconds = parseInt(timer % 60, 10);

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.innerHTML = minutes + ":" + seconds;

        timer++;
    }, 1000);
}

startTimer();

I have created JSFiddle with all of stuff you needed

JSFiddle (UPDATED)