title: Pause and start JS countdown timer
body: <p>I am trying to develop a centurion countdown timer for my website. It is a drinking game.</p>
  
  <p>The way the timer works is: It is a 60 second countdown timer. Everytime the timer hits 0 it will +1 a shot counter and restart. It will do this 100 times.</p>
  
  <p>The game is you must do 1 shot, every minute for 100 minutes. I am a beginner at JS and I am learning a lot, but I am seriously struggling to get this to work the way I want it to.</p>
  
  <p>All I need is a "Start" Button, a "Pause" button and a "Reset" button but I can't seem to find a way to make these buttons work without messing the timer up.</p>
  
  <p>Here is the HTML code:</p>
  
  <pre><code>&lt;div class="inner"&gt;
    &lt;h1 class="heading alt"&gt;Centurions Timer&lt;/h1&gt;
    &lt;p&gt;1 Shot. Every Minute. 100 Minutes.&lt;/p&gt;
    &lt;p&gt;___________________________________&lt;/p&gt;
    &lt;div id="timer"&gt;
      &lt;p id="seconds"&gt;60&lt;/p&gt;
      &lt;p id="shots"&gt;0&lt;/p&gt;
    &lt;/div&gt;
    &lt;input type="button" value="Start" onclick="timer()"&gt;
    &lt;input type="button" value="Pause" onclick="clearInterval(myTimer)"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and here is the JS code:</p>
  
  <pre><code>var seconds = 60;
  var shots = 0;
  var timer;
  var c = 60;
  
  function timer() {
      timer = setInterval(myTimer, 1000)
  }
  
  function myTimer() {
      document.getElementById("seconds").innerHTML = --c;
      if (c == 0) {
          shots = shots + 1;
          c = 60;
      }
      document.getElementById("shots").innerHTML = shots;
  }
  </code></pre>
  
  <p>If anyone could help me and show me what I am doing wrong and how I can make the code better, please do!</p>