title: Pomodoro Timer in Basic JavaScript
body: <p>I am a beginner in JavaScript and new on stackoverflow, am working on a project Pomodoro Timer to build something like this 
  <a href="http://codepen.io/GeoffStorbeck/full/RPbGxZ/" rel="nofollow">http://codepen.io/GeoffStorbeck/full/RPbGxZ/</a></p>
  
  <p>But am stuck on its functionality on how to make the session countdown and wait for the breaklength countdown before it starts counting again, this is how far I have gone <a href="http://codepen.io/Lumexralph/pen/qbqJKq/" rel="nofollow">http://codepen.io/Lumexralph/pen/qbqJKq/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var breakLength = 5,
    session = 20; //starts the time on break
  var show = document.getElementById('displayBreak'); //get the elements to show the time
  show.textContent = breakLength; //puts the var as the textcontent
  
  var showSession = document.getElementById('displaySession'); //get the elements to show the time
  showSession.textContent = session; //puts the var as the textcontent
  
  var sessionCountdown = document.getElementById('sessionCount'); // for counting session
  sessionCountdown.textContent = session;
  
  function subtraction() {
    //to increase the starting variable
    breakLength -= 1;
    var displayLength = document.getElementById('displayBreak');
    displayLength.textContent = breakLength;
  }
  
  function addition() {
      //to increase the starting variable
      breakLength += 1;
      var displayLength = document.getElementById('displayBreak');
      displayLength.textContent = breakLength;
    }
    /*functions to add and reduce the session time*/
  
  function sessionSubtraction() { // to reduce sessiontime
    session -= 1;
    //for session div
    var holdSession = document.getElementById('displaySession');
    holdSession.textContent = session;
    //for session countdown
    var holdSessionCount = document.getElementById('sessionCount');
    holdSessionCount.textContent = session;
  }
  
  function sessionAddition() { // to reduce sessiontime
      session += 1;
      //for session div
      var holdSession = document.getElementById('displaySession');
      holdSession.textContent = session;
      //for session count
      var holdSessionCount = document.getElementById('sessionCount');
      holdSessionCount.textContent = session;
    }
    //function to start the countdown
  
  function countdown() {
    var sessionData = document.getElementById('sessionCount').textContent;
    sessionData--;
    setTimeout('countdown()', 1000);
  }
  
  //add event listener click
  var timeCount = document.getElementById('sessionCount');
  timeCount.addEventListener('click', countdown, false);
  //adding event hlisteners for lengthbreak
  var showBreak = document.getElementById('plusButton');
  showBreak.addEventListener('click', addition, false);
  
  var showBreak = document.getElementById('minusButton');
  showBreak.addEventListener('click', subtraction, false);
  
  //event for session
  var sessionLength = document.getElementById('minusSession');
  sessionLength.addEventListener('click', sessionSubtraction, false);
  
  var sessionLength = document.getElementById('plusSession');
  sessionLength.addEventListener('click', sessionAddition, false);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id='displayBreak'&gt;&lt;/div&gt;
  &lt;p&gt;Break Length&lt;/p&gt;
  &lt;button type='button' id='minusButton'&gt;minus&lt;/button&gt;
  &lt;!--decreases the stored variable--&gt;
  &lt;button type='button' id='plusButton'&gt;plus&lt;/button&gt;
  &lt;!--increses the stored variable--&gt;
  &lt;p&gt;Session Length&lt;/p&gt;
  &lt;div id='displaySession'&gt;&lt;/div&gt;
  &lt;button type='button' id='minusSession'&gt;minus&lt;/button&gt;
  &lt;!--decreases the stored variable--&gt;
  &lt;button type='button' id='plusSession'&gt;plus&lt;/button&gt;
  &lt;!--increses the stored variable--&gt;
  &lt;p&gt;Session&lt;/p&gt;
  &lt;div id='sessionCount'&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>