Javascript Dom Manipulation and Event Bubbling

by harshapache

HTML

<div id="myClassWrapper">
  <div class="myClass">
    Elem 1
  </div>

  <div class="myClass">
    Elem 2
  </div>

  <div class="myClass">
    Elem 3
  </div>
</div>

CSS

.myClass{
  border:2px solid #000;
  width:100%;
  margin-bottom:20px;
  height:100px;
}

.myClass.active{
  background:#95e387;
}

JavaScript

var selectedElements = 0;
var myClassWrapper = document.getElementById('myClassWrapper');
myClassWrapper.addEventListener("click", function(event){
 var isMyClassClicked = event.target.classList.contains("myClass");
 //var x = event.target.classList.contains("active");
 
 if(isMyClassClicked){
   var isActive = event.target.classList.contains("active");
   if(isActive){
   		//Do Unselect
      event.target.classList.remove("active");
      selectedElements--;
   }
   else{
      //Do Select
      //1.Check selectedElemnts not equal to 2
      if(selectedElements == 2) alert('You already selected two elements');
      if(selectedElements == 1){
      	//check neighbour has active or not
   var isNextElemActive = event.target.nextElementSibling ? event.target.nextElementSibling.classList.contains("active") : false;
        var isPrevElemActive = event.target.previousElementSibling ? event.target.previousElementSibling.classList.contains("active") : false;
        if(isNextElemActive || isPrevElemActive){
        	event.target.classList.add("active");
        	selectedElements++;
        }else{
        	alert("you can't select it");
        }
      }
      if(selectedElements == 0){
      	event.target.classList.add("active");
        selectedElements++;
      }
   }
 }
});