Simple map

by Alex Alexandrov

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="map">
  <div class="town"></div>
  <div class="town"></div>
  <div class="town"></div>
  <div class="town"></div>
  <div class="town"></div>
  <div class="town"></div>
</div>

<p>Всего стран: <span class="total"></span></p>
<p>Посетил: <span class="justmy"></span></p>
<p>Осталось посетить: <span class="simplemath"></span></p>

<button class="save__result">save</button>

CSS

.map {
  background: #ddd;
  max-width: 800px;
  margin: 0 auto;
  padding: 10px;
  text-align:center;
}
.map.active {
  pointer-events: none;
}
.town {
  padding: 10px;
  background: #222;
  display: inline-block;
  width: 100px;
  height: 100px;
  cursor: pointer;
}
.town:hover,
.town.active {
  background: #666;
}

JavaScript

$(".town").click(function() {
    $(this).toggleClass("active");
});

$(".save__result").click(function() {
    var total = $('.town').length;
    var justmy = $('.town.active').length;
    var simplemath = total - justmy;
    var activer = $('.town').hasClass('active');

    if (activer === true) {
        $(".map").addClass('active');
        $('.total').empty().text(total);
        $('.justmy').empty().text(justmy);
        $('.simplemath').empty().text(simplemath);
        $(".save__result").hide();
    } else {
        console.log('error');
    }
});