title: How to stop and reset my countdown timer?
body: <p>I'm trying to make my countdown timer do the following 4 things </p>
  
  <ol>
  <li>When 'start' is clicked, change button to 'stop'</li>
  <li>When 'stop' is clicked, stop the timer</li>
  <li>When timer is stopped, show 'start' button</li>
  <li>When 'reset' is clicked, reset the timer</li>
  </ol>
  
  <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>$(document).ready(function() {
    var counter = 0;
    var timeleft = 5;
  
    function nf(num) {
      var s = '0' + num;
      return s.slice(-2);
    }
  
    function convertSeconds(s) {
      var min = Math.floor(s / 60);
      var sec = s % 60;
      return nf(min, 2) + ' ' + nf(sec, 2);
    }
  
    function setup() {
      var timer = document.getElementById("timer");
      timer.innerHTML = (convertSeconds(timeleft - counter));
  
      var interval = setInterval(timeIt, 1000);
  
      function timeIt() {
        counter++;
        timer.innerHTML = (convertSeconds(timeleft - counter));
        if (counter == timeleft) {
          clearInterval(interval);
        }
      }
    }
    $("#timer-button").click(function() {
      setup();
    });
  });</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;</code></pre>
  </div>
  </div>
  </p>