freeCodeCamp Zipline: Build a Pomodoro Clock

freeCodeCamp Zipline: Build a Pomodoro Clock.markdown

freeCodeCamp Zipline: Build a Pomodoro Clock

A Pen by Jacob C. Ting on CodePen.

License.

index.html

<audio id="audio" src="http://soundbible.com/grab.php?id=1746&type=mp3" preload="auto"></audio>

<div class="container">

  <div class="col-md-12 timers">

    <h3>The Infinity Work Clock...</h3>

    <div class="col-md-4 breakTime">

      <button class="btn" id="upFun">More Fun</button>
      <p id="fun">5</p>
      <button class="btn" id="downFun">Less Fun</button>

    </div>

    <div class="col-md-4 infinity">

      <p class="state">It only seems like forever!</p>
      <p class="quote">Infinity and beyond!
        </>
        <p class="time"></p>

    </div>

    <div class="col-md-4  infinityTime">

      <button class="btn" id="upInfinity">More Work</button>
      <p id="infinity">25</p>
      <button class="btn" id="downInfinity">Less Work</button>

    </div>

  </div>

</div>

<div class="col-md-12 details">
  <p class="huge">
    ...is a never ending work and break timer.
  </p>
  <p class="big">
    Click the clock to start your never ending work journey.
  </p>
  <p class="medium">
    Adjust the speed of your journey with the buttons.
  </p>
  <p class="small">
    Your journey will be accompanied by random Protoss quotes!
  </p>
  <p class="tiny">
    Follow my journey with the buttons below...
  </P>
</div>


<div class='row social'>
  <div class='col-md-4'>
    <a href="mailto:jcobting@email.com" target='_blank'>
      <button class='btn btn-block'><i class="fa fa-envelope"></i> E-mail
      </button>
    </a>
  </div>
  <div class='col-md-4'>
    <a href="https://twitter.com/jacobting" target="_blank">
      <button class='btn btn-block'><i class="fa fa-twitter"></i> Twitter
      </button>
    </a>
    </a>
  </div>

  <div class='col-md-4'>
    <a href="https://www.linkedin.com/in/jacobting" target="_blank">
      <button class='btn btn-block'><i class="fa fa-linkedin"></i> LinkedIn
      </button>
    </a>
  </div>

  <div class='col-md-4'>
    <a href="https://github.com/jacobgithub" target="_blank">
      <button class='btn btn-block'><i class="fa fa-github"></i> GitHub
      </button>
    </a>
  </div>

  <div class='col-md-4'>
    <a href="http://www.facebook.com/jacobcting" target="_blank">
      <button class='btn btn-block'><i class="fa fa-facebook"></i> Facebook
      </button>
    </a>
  </div>

  <div class='col-md-4'>
    <a href="http://www.freecodecamp.com/jacobgithub" target="_blank">
      <button class='btn btn-block'><i class="fa fa-fire"></i> Free Code Camp
      </button>
    </a>
  </div>
</div>


<div class="navbar navbar-inverse navbar-fixed-bottom" role="navigation">
  <div class="container">
    <div class="navbar-text pull-left">
      Created by Jacob C. Ting using <a href="http://codepen.io" target="_blank">CodePen.io</a> for <a href="http://www.freecodecamp.com" target="_blank">freeCodeCamp.com</a> check out my other work <a href="http://www.roflcopterdown.com" target="_blank">here</a>.
    </div>
  </div>

  <div class="navbar navbar-inverse navbar-fixed-bottom" role="navigation">
    <div class="navbar-text pull-left">
      Created by Jacob C. Ting using <a href="http://codepen.io" target="_blank">CodePen.io</a> for <a href="http://www.freecodecamp.com/challenges/zipline-build-a-pomodoro-clock" target="_blank">freeCodeCamp.com</a> check out my other work <a href="http://www.roflcopterdown.com"
      target="_blank">here</a>.
    </div>
  </div>

</div>

script.js

var quotes = [];
quotes.push('My life for Auir!');
quotes.push('En Taro Tassadar!');
quotes.push('I fear no enemy!');
quotes.push('For the Khala is my strength!');
quotes.push('I fear not death.');
quotes.push('I hunger for battle...');
quotes.push('For our strength is eternal.');

$(document).ready(function() {

  var infinityTime = 25;
  var funTime = 5;

  var minutes = 25;
  var seconds = 0;

  var stopped = false;
  var ticking;

  $('.time').html(minutes + ":0" + seconds);

  function count() {

    if (minutes === 0 && seconds === 1) {
      document.getElementById('audio').play();
    }

    if (minutes === 0 && seconds === 0) {
      if ($('.state').html() === 'It only seems like forever!') {
        $('.state').html('The fun never ends!');
        $('.quote').text(quotes[Math.floor(Math.random() * quotes.length)]);
        minutes = funTime;
        $('.time').html(minutes + ":0" + seconds);

      } else if (minutes === 0 && seconds === 0) {
        ($('.state').html() === 'The fun never ends!')
        $('.state').html('It only seems like forever!');
        $('.quote').text(quotes[Math.floor(Math.random() * quotes.length)]);
        minutes = infinityTime;
        $('.time').html(minutes + ":0" + seconds);
      }
    } else {
      if (seconds === 0) {
        seconds = 60;
        minutes--
      }
      seconds--;
      if (seconds < 10) {
        $('.time').html(minutes + ":0" + seconds);
      } else {
        $('.time').html(minutes + ":" + seconds);
      }
    }
  }

  $('#downFun').click(function() {
    if (stopped === false) {
      if (funTime > 1) {
        funTime--;
        $("#fun").html(funTime);
        $('.state').text('It only seems like forever!');

        $(".time").html(infinityTime + ":00");

        seconds = 0;
        minutes = infinityTime;
      }
    }
  });
  $('#upFun').click(function() {
    if (stopped === false) {
      funTime++;
      $("#fun").html(funTime);
      $('.state').text('It only seems like forever!');
      $(".time").html(infinityTime + ":00");
      seconds = 0;
      minutes = infinityTime;
    }
  });
  $('#downInfinity').click(function() {
    if (stopped === false) {
      if (infinityTime > 1) {
        infinityTime--;
        $("#infinity").html(infinityTime);
        $(".time").html(infinityTime + ":00");
        $('.state').text('It only seems like forever!');
      }
      seconds = 0;
      minutes = infinityTime;
    }
  });
  $('#upInfinity').click(function() {
    if (stopped === false) {
      infinityTime++;
      $("#infinity").html(infinityTime);
      $(".time").html(infinityTime + ":00");
      $('.state').text('It only seems like forever!');
      seconds = 0;
      minutes = infinityTime;
    }
  });

  $('.infinity').click(function() {
    if (stopped === false) {
      ticking = setInterval(count, 1000);
      stopped = true;
    } else if (stopped === true) {
      clearInterval(ticking);
      stopped = false;
    }
  });

});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

html,
body {
  color: #D1D0CE;
  text-align: center;
  margin: 0 auto;
  font-family: 'Roboto Condensed', Georgia, sans-serif;
  background: transparent url("http://www.roflcopterdown.com/imgs/backgrounds/stardust.png");
}

.details {
  margin-top: 0px
}

.huge {
  margin-bottom: 0px
}

.big {
  margin-bottom: 0px;
  font-size: 18px
}

.medium {
  margin-bottom: 0px;
  font-size: 17px
}

.small {
  margin-bottom: 0px;
  font-size: 13px
}

.tiny {
  font-size: 12px
}

.social {
  margin-top: 150px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 150px;
}

a {
  color: #D1D0CE;
}

.state {
  text-align: center;
}

.state {
  display: none;
}

p {
  font-size: 30px;
}

h1 {
  font-size: 50px;
}

h3 {
  font-size: 45px;
}

.btn {
  background: transparent;
  box-shadow: 0px 0px 0px 3px #D1D0CE;
  margin-top: 5px;
  margin-bottom: 5px;
}

.col-md-4 {
  margin-top: 10px;
  margin-bottom: 5px;
}

.infinity {
  border-radius: 5%;
  cursor: pointer;
  box-shadow: 0px 0px 0px 2px #D1D0CE;
}

.pull-left {
  float: left;
}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet" />