Click game

by Marcel Ferdinand

HTML

<div><span id="timer"></span></div>
<span id="number"></span>
<span id="status"></span>

<div id="meterCon">
  <span id="meterBar"></span>
</div>
<div>
  <a id="btn" href="javascript:void(0)">HAJAR</a>
  <a style="display:none;" id="btn2" href="javascript:void(0)">HAJAR</a>
</div>

CSS

#meterCon {
  height: 200px;
  width: 20px;
  background: gray;
  padding: 10px;
  position: relative;
}

#meterBar {
  display: block;
  height: 0%;
  width: 20px;
  bottom: 0;
  position: absolute;
  background: green;
}

#btn,
#btn2 {
  display: block;
  padding: 10px;
  width: 100px;
  text-decoration: none;
  background: red;
  color: white;
  text-align: center;
}

JavaScript

var timer = 10;
var i = 0;
var status = 0;
$(function() {
  $('#timer').html(timer);
  $('#btn').click(function() {
    $(this).hide();
    $('#btn2').show();
    dec();
    if (i >= 100) {
      alert('Selamat anda menang')
    } else {
      i += 5;
      // $("#number").html(i);
      $('#meterBar').css('height', i + '%');
      if (i == 100) {
        alert('Selamat anda menang')
      }
    }
  });
  $('#btn2').click(function() {
    if (i >= 100) {
      return false;
    } else {
      i += 2;
      $('#meterBar').css('height', i + '%');
      if (i == 100) {
         return false;
      }
    }
  });
});

function dec() {

  timer--;
  $('#timer').html(timer);
  checkInc();

}

function checkInc() {
  if (timer <= 0) {
    $('#timer').html(0);
    $('#btn').hide();

    $('#btn2').hide();
    if (i < 50) {
      alert('Selamat anda mendapatkan voucher 10%')
    } else if (i >= 50 && i < 99) {
      alert('Selamat anda mendapatkan voucher 20rb')
    } else {
      alert('Selamat anda mendapatkan voucher 15%')
    }
  } else {
    window.setTimeout(function() {
      dec();
    }, 1000);
  }
}