<html>
<body>
     <div id="main">
        <div id="displayCounter"></div><br>
        <button id="increment"> + </button>
        <button id="decrement"> - </button>
        <button id="reset">Reset</button><br><br>
     </div>
</body>
</html>
#increment, #decrement, #reset{
 padding:10px 15px;
 font-size:18px;
 background: #56ccf2; 
  background: -webkit-linear-gradient(to right, #56ccf2, #2f80ed); 
  background: linear-gradient(to right, #56ccf2, #2f80ed);
  color:#f1f1f1;
  border:none;
  margin:5px;
}
#main{
  margin : 0 auto;
  text-align:center;
  padding:5% 10%;
}
#displayCounter{
  font-size:100px;
  font-family: impact;
  
}

var productCounter={
        count:0,									
		incrementCounter:function(){
      if(this.count<10){
	      return this.count = this.count + 1;
      }else{
        alert("maximum limit reached, you can buy only 10 items");
        return this.count;
      }
      
	    },
	    decrementCounter:function(){
		  	if (this.count>0){
		      return this.count = this.count - 1;
		    } else {
		      return this.count=0;
		    }
	    },
	    resetCounter:function(){
	      return this.count=0;
	    }	

};

var displayCout = document.getElementById('displayCounter');
displayCout.innerHTML=0;
document.getElementById('increment').onclick=function(){
displayCout.innerHTML=productCounter.incrementCounter();
}
document.getElementById('decrement').onclick=function(){
displayCout.innerHTML = productCounter.decrementCounter();
}
document.getElementById('reset').onclick=function(){
displayCout.innerHTML = productCounter.resetCounter();
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.