game.js

// Don't change or delete this line! It waits until the DOM has loaded, then calls
// the start function. More info:
// https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
document.addEventListener('DOMContentLoaded', start)

function start () {
  bindEventListeners(document.getElementsByClassName('board')[0].children)
}

function bindEventListeners (dots) {
  for (var i = 0; i < dots.length; i++) {
    // BIND YOUR EVENT LISTENERS HERE
    // The first one is provided for you
    dots[i].addEventListener('contextmenu', makeGreen)
    dots[i].addEventListener('click', makeBlue)
    dots[i].addEventListener('dblclick', hide, function (evt) {
      evt.bindEventListeners(hide)
    });
  }
}

function makeGreen (evt) {
  evt.preventDefault();
  resetClass (evt);
  evt.target.classList.toggle('green');
  updateCounts();
}

function makeBlue(evt) {
  resetClass (evt);
  evt.target.classList.toggle('blue');
  updateCounts();
}

function hide (evt) {
  resetClass (evt);
  evt.target.classList.toggle('invisible');
  updateCounts();
}

// function to reset count, as explained by the brilliant Sherly //

function resetClass (evt){
    if (evt.target.classList.contains('green')) {
      evt.target.classList.remove('green');
    } else if (evt.target.classList.contains('blue')){
      evt.target.classList.remove('blue');
    } else if (evt.target.classList.contains('invisible')){
      evt.target.classList.remove('invisible');
    }

}

function updateCounts () {
  var totals = {
    blue: 0,
    green: 0,
    invisible: 0
  }

  // WRITE CODE HERE TO COUNT BLUE, GREEN, AND INVISIBLE DOTS
  var addTotals =
    document.getElementsByClassName('board')[0].children;

    for (i=0; i<addTotals.length; i++) {
        if (addTotals[i].classList.contains('blue')) {
          totals.blue +=1
        } else if (addTotals[i].classList.contains('green')) {
          totals.green += 1
        } else if (addTotals[i].classList.contains('invisible')) {
          totals.invisible += 1
        }
    }

  // Once you've done the counting, this function will update the display
  displayTotals(totals)
}

function displayTotals (totals) {
  for (var key in totals) {
    document.getElementById(key + '-total').innerHTML = totals[key]
  }
}