diff --git a/models/battleground.js b/models/battleground.js
index d7d0a80..69e84bf 100644
--- a/models/battleground.js
+++ b/models/battleground.js
@@ -47,11 +47,12 @@ var BattleGround = (function() {
   BattleGround.prototype.update = function() {
     var self = this;
     this.cellsElement.innerHTML = '';
-    this.area.forEach(function(el) {
+    this.area.forEach(function(el,index) {
       var cell = document.createElement('div');
       var cellElement = el.render();
 
       cell.classList.add('game__cells__item');
+      cell.setAttribute('data-index',index + 1);
       cell.appendChild(cellElement);
       self.cellsElement.appendChild(cell);
     });
diff --git a/script.js b/script.js
index a03ba69..aa1cd75 100644
--- a/script.js
+++ b/script.js
@@ -21,3 +21,18 @@ var fnc = function(e) {
 };
 
 document.addEventListener('keydown', fnc);
+
+// add event listener CASE 1
+const gameCells = document.querySelectorAll('.game__cells__item');
+gameCells.forEach((element, index) => {
+  element.addEventListener('mouseover', () => {
+    console.log(`You just moused over an element number ${index}`);
+  });
+});
+
+// add event listener CASE2
+const gameWrapper = document.querySelector('.game__cells');
+gameWrapper.addEventListener('mouseover', event => {
+  let index = event.target.getAttribute('data-index');
+  console.log(`You just moused over an element number ${index}`);
+});