Material Idle 0.1

by Margus Martsepp

HTML

<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div id="mineral" class="mineral">
  <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">Bronze</button>
  <div class="mdl-progress mdl-js-progress"></div>
</div>

<div id="mineral2" class="mineral material-icons mdl-badge mdl-badge--overlap mdl-badge--no-background">
  <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">Silver</button>
</div>
<div id="mineral3" class="mineral material-icons mdl-badge mdl-badge--overlap mdl-badge--no-background">
  <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">Gold</button>
</div>

JavaScript

$(function() {
  bronze = 0;
  silver = 0;
  gold = 0;

  $("#mineral2 button").prop('disabled', true);
  $("#mineral2 button").hide();
  $("#mineral3 button").prop('disabled', true);
  $("#mineral3 button").hide();

  $("#mineral button").click(function() {
    bronze += 1;
    document.querySelector("#p1").MaterialProgress.setProgress(bronze*5%);
    if (bronze > 10) {
      $("#mineral2 button").show();
    }
    if (bronze > 19) {
      silver += 1;
      bronze = bronze % 20;
      if (silver > 9) {
      	$("#mineral2 button").prop('disabled', false);
      }
      document.querySelector("#mineral2").setAttribute('data-badge', silver);
    }
    document.querySelector("#mineral").setAttribute('data-badge', bronze);
  });
  $("#mineral2 button").click(function() {
    silver += 1;
    if (silver > 10) {                          
      $("#mineral3 button").show();
    }
    if (silver > 19) {
      gold += 1;
      silver = silver % 20;
      if (gold > 9) {
      	$("#mineral3 button").prop('disabled', false);
      }
      document.querySelector("#mineral3").setAttribute('data-badge', gold);
    }
    document.querySelector("#mineral2").setAttribute('data-badge', silver);
  });
  $("#mineral3 button").click(function() {
    gold += 1;
    document.querySelector("#mineral3").setAttribute('data-badge', gold);
  });
});