Drinks

by CJ Juarez

HTML

<br>
<div class="oneline" id="likes">
    Drinks&nbsp;
    <span class="figure">0</span>/5 &nbsp;
    <p hidden>Max!</p>
    &nbsp;<button class="reset">Reset</button>
</div>
<br>
<button type="button" class="like drink" >Coke</button>
<button type="button" class="like drink" >Sprite</button>
<button type="button" class="like drink" >Sarsi</button>
<button type="button" class="like drink" >Iced Tea</button>

CSS

p {
  color: white;
  background-color: red;
  width: 5%;
  border-radius: 5px;
}

.oneline {
 display: flex; 
}

.drink {
  height: 100px;
  width: 100px;
}

JavaScript

var clicks = 0; 
$(".like").click(function(){
	if(clicks < 5){
  	  clicks++;
  }
  $('.figure').html(clicks);
  
  if(clicks == 5){
         $("p").show();
  }
});

$(".reset").click(function(){
	clicks = 0;
	$(".figure").html(clicks);
  $("p").hide();
})