title: How do I resume the countdown timer?
body: <p>I am working on a pomodoro clock project where the user can set a session length and a break length so the clock will count down until the user click Stop.</p>
  
  <p>I want the timer to resume after being paused whenever I click Start, but it keeps switching to the other session/break. </p>
  
  <p>I know that I need to calculate the remaining seconds at the time when it stops and then run the <code>startTimer()</code> again.But I haven't been able to figure it out yet.</p>
  
  <p>Any help appreciated! You can scroll down to the //====VIEW====//: <code>startTimer(seconds)</code> to see the logic from there.</p>
  
  <p>Here's my code:</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>//======MODEL======//
  //by default, session lasts 25min, break lasts 5 min
  var data = {
      session: 25,
      break: 5,
      isSession: true
  }
  
  
  //===== OCTOPUS=====//
  
  var octopus = {
      init: function() {
          //initialize the views
          settings.init();
          timer.init();
      },
      //========== SETTINGS==========//
      //get the time of session and break
      getCurrentSession: function() {
          return data.session;
      },
      getCurrentBreak: function() {
          return data.break;
      },
      // set the currently-selected time to the object passed in
      setCurrentSession: function(isSession) {
          data.isSession = isSession;
      },
  
      //increment or decrement the counter
      incrementSessionCounter: function() {
          data.session++;
          settings.render();
      },
      incrementBreakCounter: function() {
          data.break++;
          settings.render();
      },
      decrementSessionCounter: function() {
          data.session--;
          settings.render();
      },
      decrementBreakCounter: function() {
          data.break--;
          settings.render();
      }
  }
  //----- VIEW----//
  var settings = {
      init: function() {
          //display the default session and break with increment and decrement
          //listen to click function on either + or - to adjust the timer
          this.session = document.getElementById("displaySession");
          this.break = document.getElementById("displayBreak");
          this.incrementSession = document.getElementById("increaseSession");
          this.decrementSession = document.getElementById("decreaseSession");
          this.incrementBreak = document.getElementById("increaseBreak");
          this.decrementBreak = document.getElementById("decreaseBreak");
  
          this.incrementSession.addEventListener("click", function() {
              octopus.incrementSessionCounter();
          });
          this.decrementSession.addEventListener("click", function() {
              octopus.decrementSessionCounter();
          });
          this.incrementBreak.addEventListener("click", function() {
              octopus.incrementBreakCounter();
          });
          this.decrementBreak.addEventListener("click", function() {
              octopus.decrementBreakCounter();
          });
          this.render();
      },
      render: function() {
          // update the DOM elements with values from the current session and break
          var currentSession = octopus.getCurrentSession();
          var currentBreak = octopus.getCurrentBreak();
          this.session.textContent = currentSession;
          this.break.textContent = currentBreak;
      }
  }
  
  var timer = {
      init: function() {
          this.startTimer = document.getElementById("start");
          this.stopTimer = document.getElementById("stop");
          this.nextTimer = document.getElementById("next");
          this.render();
      },
  
      render: function() {
          var displayTimer = document.getElementById("countdown-timer");
          this.startTimer.addEventListener("click", function() {
              getDeadline();
          });
          this.nextTimer.addEventListener("click", function() {
              getDeadline();
          });
  
          this.stopTimer.addEventListener("click", function() {
              clearInterval(interval);
              delete interval;
          })
  
          let interval;
          //this function takes in the number of seconds and calculate the seconds left to reach the deadline
          function startTimer(seconds) {
  
              const now = Date.now();
              const then = now + seconds * 1000;
              interval = setInterval(function() {
  
                  const secondsLeft = (then - Date.now()) / 1000;
                  if (secondsLeft &lt; 0) {
                      clearInterval(interval);
                      getDeadline();
                      return;
                  }
  
  
                  displayTimeLeft(secondsLeft);
  
              }, 1000)
  
          }
          //this function takes in the number of leftover secs, convert it into mm:ss and display it on screen
          function displayTimeLeft(seconds) {
              var minutes = Math.floor(seconds / 60);
              var remainderSeconds = Math.round(seconds % 60);
              if (remainderSeconds &lt; 10) {
                  var display = `${minutes}: 0${remainderSeconds}`;
              } else
                  var display = `${minutes}: ${remainderSeconds}`;
  
              displayTimer.textContent = display;
  
          }
          //this function gets the input from data, depending on session or break
  
          function getDeadline() {
  
              clearInterval(interval);
              var time_input;
              if (data.isSession) {
                  time_input = octopus.getCurrentSession();
  
              } else {
                  time_input = octopus.getCurrentBreak();
  
              }
              data.isSession = !data.isSession;
  
  
              startTimer(time_input * 60);
  
          }
      }
  }
  
  octopus.init();</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;!-- View 1: the settings contain session length and break length--&gt;
  &lt;section&gt;
    &lt;div id="session"&gt;
      &lt;button type="button" id="increaseSession"&gt;+&lt;/button&gt;
      &lt;span id="displaySession"&gt;25&lt;/span&gt;
      &lt;button type="button" id="decreaseSession"&gt;-&lt;/button&gt;
    &lt;/div&gt;
    &lt;div id="break"&gt;
      &lt;button type="button" id="increaseBreak"&gt;+&lt;/button&gt;
      &lt;span id="displayBreak"&gt;5&lt;/span&gt;
      &lt;button type="button" id="decreaseBreak"&gt;-&lt;/button&gt;
    &lt;/div&gt;
    &lt;div&gt;&lt;button id="start"&gt;START&lt;/button&gt;
      &lt;button id="next"&gt;NEXT&lt;/button&gt;
      &lt;button id="stop"&gt;STOP&lt;/button&gt;&lt;/div&gt;
  &lt;/section&gt;
  &lt;!--View 2: the timer itself--&gt;
  &lt;div id="countdown-timer"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>