title: Enable button when counter reaches zero
body: <p>I have a button its disabled and i want to put a counter inside it, what i want to do is when the counter reaches zero it get enabled, how can i do that? in the code below the counter doesn't appear inside the button and i don't want the reset button i just want the button to be enabled when it reaches zero, here is what i have tried so far:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function Countdown()
  {
      this.start_time = "00:30";
      this.target_id = "#timer";
      this.name = "timer";
      this.reset_btn = "#reset";
  }
  
  Countdown.prototype.init = function()
  {
  this.reset();
  setInterval(this.name + '.tick()',1000)
  }
  
  Countdown.prototype.reset = function()
  {
      $(this.reset_btn).hide();
      time = this.start_time.split(":");
      //this.minutes = parseInt(time[0]);
      this.seconds = parseInt(time[1]);
      this.update_target();
  }
  
  Countdown.prototype.tick = function()
  {
      if(this.seconds &gt; 0) //|| this.minutes &gt; 0)
      {
          if(this.seconds == 0)
          {
             // this.minutes = this.minutes - 1;
              this.seconds = 59
          } else {
          this.seconds = this.seconds - 1;
          }
      }
      this.update_target()
  }
  
  Countdown.prototype.update_target = function()
  {
      seconds = this.seconds;
      if (seconds == 0) $(this.reset_btn).show();
      else if(seconds &lt; 10) seconds = "0" + seconds;
      $(this.target_id).val(this.seconds)
  }
  
  timer = new Countdown();
  timer.init();
  
  $(document).ready(function(){
      $("#reset").click(function(){
          //timer = new Countdown();  
          timer.reset();
      });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.hidden {
      display: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;button type="text" id="timer" disabled&gt;Counter should be inside me, and enable me when it reaches 0&lt;/button&gt;
           &lt;button id="reset"&gt;Reset&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>