JSFiddle - React, Tailwind, and code Playground

by senthilkumar_snp

HTML

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    
   <div class="container">
     <div>TotalCount: <span class="total-count">1</span></div>
     <br/>
     <div class="adult">
       <div>Adult: <span class="adult-count">1</span></div>
       <span class="plus">+</span>
       <span class="minus disabled">-</span>
     </div>
     
     <div class="child">
       <div>Child: <span class="child-count">1</span></div>
       <span class="plus">+</span>
       <span class="minus disabled">-</span>
     </div>
     
     <div class="infant">
       <div>Infant: <span class="infant-count">1</span></div>
       <span class="plus">+</span>
       <span class="minus disabled">-</span>
     </div>
     
   </div>
    
  </body>

</html>

CSS

.container {
  border: 1px solid #ccc;
  min-height: 100px;
  padding: 20px;
}

.adult, .child, .infants {
  margin-bottom: 20px;
}

.fl {
  float: left;
}

.plus, .minus {
  border: 1px solid #ccc;
  padding: 0 10px;
  cursor: pointer;
  
}

.disabled {
  background: #ccc;
  color: #777;
  cursor: auto;
 
}

JavaScript

var maxPeople = 9;
 var adultCount=1;
 var childCount=0;
 var infantCount=0;
 var totalCount = adultCount;
 $('.adult-count').text(adultCount);
 $('.child-count').text(childCount);
 $('.child-count').text(childCount);
 $('.total-count').text(totalCount);
 
 
$('.adult .plus').on('click', function(){

   if(!$(this).hasClass('disabled')) {

     adultCount++;
     $('.adult-count').text(adultCount);
     calculateTotalPeople(adultCount,childCount,infantCount);

     if(adultCount==maxPeople){
       $(this).addClass('disabled');
       $('.adult .minus').removeClass('disabled');
     }
     else if(adultCount>1){
       $('.adult .minus').removeClass('disabled');
     }

   }

});


$('.adult .minus').on('click', function(){

   if(!$(this).hasClass('disabled')) {

     adultCount--;
     $('.adult-count').text(adultCount);
     calculateTotalPeople(adultCount,childCount,infantCount);

     if(adultCount==1){
       $(this).addClass('disabled');
       $('.adult .plus').removeClass('disabled');
     }
     else if(adultCount<maxPeople){
     	 $('.adult .plus').removeClass('disabled');
     }


   }

 });
 
 
 $('.child .plus').on('click', function(){

   if(!$(this).hasClass('disabled')) {

     childCount++;
     $('.child-count').text(childCount);
     calculateTotalPeople(adultCount,childCount,infantCount);

     if(childCount==maxPeople){
       $(this).addClass('disabled');
       $('.child .minus').removeClass('disabled');
     }
     else if(childCount>1){
       $('.child .minus').removeClass('disabled');
     }

   }

});


$('.child .minus').on('click', function(){

   if(!$(this).hasClass('disabled')) {

     childCount--;
     $('.child-count').text(childCount);
     calculateTotalPeople(adultCount,childCount,infantCount);

     if(childCount==0){
       $(this).addClass('disabled');
       $('.child .plus').removeClass('disabled');
     }
     else if(adultCount<maxPeople){
     	 $('.child .plus').removeClass('disabled');
     }


  ...