xwxwwv

8/31/2015 - 4:14 PM

<head>
  <title>
    God of Time
  </title>
  <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Press+Start+2P">
</head>

<body>
  <div class="container-fixed">

  <div class="jumbotron text-center">
    <div>
    <h1 id="jumbotron-font">CLOCKGOD</h1>
      <p>created for freeCodeCamp</p>
    </div>
  </div>

  <div id="main-row" class="row">

    <div id="work-length" class="col-xs-3 text-center">
      
      <div id="setting-container" class="text-center">
        <div class="setting" id="work-session">
          <!-- jQuery sets work session time here -->
        </div>
      </div>

      <div class="btn-group">
        <button id="less-work" type="button" class="btn btn-danger">
          LESS
          <p class="button-sub">work</p>
        </button>
        <button id="more-work" type="button" class="btn btn-danger">
          MORE
          <p class="button-sub">work</p>
        </button>
      </div> <!-- end of button group -->
    </div> <!-- end of first column -->

    <div id="counter-container" class="col-xs-6 text-center">
      <div class="btn-group">
        <button id="pauseClock" type="button" class="btn btn-danger">
          PAUSE
        </button>
        <button id="startClock" type="button" class="btn btn-lg btn-danger">
          START
        </button>
        <button id="resetClock" type="button" class="btn btn-danger">
          RESET
        </button>
      </div>
      <div id="counter">
        <!-- jQuery sets time remaining here-->
      </div>
    </div> <!-- end of second column -->

    <div id="break-length" class="col-xs-3 text-center">
      <div id="setting-container" class="text-center">
        <div class="setting" id="break-session">
          <!-- jQuery sets break session time here-->
        </div>
      </div>
        <div class="btn-group">
          <button id="less-break" type="button" class="btn btn-danger">
            LESS
            <p class="button-sub">break</p>
          </button>
          <button id="more-break" type="button" class="btn btn-danger">
            MORE
            <p class="button-sub">break</p>
          </button>
        </div>
  </div> <!--end of third column -->


  </div> <!-- end of main-row -->
  </div> <!--end of fixed container -->

</body>

script.js

$(document).ready(function() {

  var workSession = 25;
  var breakSession = 5;
  var paused = false;
  var timeObject = {};
  var breakTimeObject = {};
  var piano = Synth.createInstrument('piano');

  //function declarations 

  var runClock = function (runTime) {
    $('#pauseClock').prop("disabled",false);
    piano.play('E', 2, 3);
    breakTimeObject.breakTime = true;
    $(this).prop("disabled",true);
    var runTime = workSession * 60;
    var time = runTime,
      minutes, seconds;
    intervalVar = setInterval(function() {
      minutes = parseInt(time / 60, 10);
      seconds = parseInt(time % 60, 10);
      minutes = minutes < 10 ? "0" + minutes : minutes;
      seconds = seconds < 10 ? "0" + seconds : seconds;
        if (time === 0) {
          if (breakTimeObject.breakTime === false)
             {time = runTime;
              piano.play('E', 2, 3);
              $('body').css('background-image', 'url(https://farm7.staticflickr.com/6180/6261058381_2a9c4692a8_b.jpg');
              breakTimeObject.breakTime = true;
              }
          else {time = breakSession * 60;
               piano.play('E', 3, 3);
               $('body').css('background-image', 'url(https://farm1.staticflickr.com/544/18603154355_75f9aaf3db_k.jpg)');
               breakTimeObject.breakTime = false;
               }
        } 
        else {
        time--;
        timeObject.time = time;
        }
      $('#counter').text(minutes + ':' + seconds);
      }, 1000); 
  };
  
  var resumeClock = function (runTime) {
    $(this).prop("disabled",true);
    var runTime = timeObject.time;
    var time = runTime,
      minutes, seconds;
    intervalVar = setInterval(function() {
      minutes = parseInt(time / 60, 10);
      seconds = parseInt(time % 60, 10);
      minutes = minutes < 10 ? "0" + minutes : minutes;
      seconds = seconds < 10 ? "0" + seconds : seconds;
        if (time === 0) {
          if (breakTimeObject.breakTime === false)
             {time = runTime;
              piano.play('E', 2, 3);
              $('body').css('background-image', 'url(https://farm7.staticflickr.com/6180/6261058381_2a9c4692a8_b.jpg');
              breakTimeObject.breakTime = true;
              }
          else {time = breakSession * 60;
               piano.play('E', 3, 3);
               $('body').css('background-image', 'url(https://farm1.staticflickr.com/544/18603154355_75f9aaf3db_k.jpg)');
               breakTimeObject.breakTime = false;
               }
        } 
        else {
        time--;
        timeObject.time = time;
        }
      $('#counter').text(minutes + ':' + seconds);
      }, 1000); 
  };
  
   function pauseClock(time) {
      if (paused === false) {
        clearInterval(intervalVar);
        paused = true;} 
      else {
        resumeClock();
        paused = false;
      }
  };
  
  
  function resetClock() {
    $('#pauseClock').prop("disabled",true);
    clearInterval(intervalVar);
    $('body').css('background-image', 'url(https://farm7.staticflickr.com/6180/6261058381_2a9c4692a8_b.jpg');
    $('#startClock').prop("disabled",false);
    $('#counter').text(workSession + ":00");
  };

  function lessBreak() {
    if (breakSession === 1)
    {(breakSession = breakSession)}
    else{ 
    breakSession--;
    $('#break-session').text(breakSession);
    }

  };

  function moreBreak() {
    breakSession++;
    $('#break-session').text(breakSession);
  };

  function lessWork() {
    if (workSession === 1) {workSession = workSession}
    else {workSession--;
    $('#work-session').text(workSession);}
  };

  function moreWork() {
    workSession++;
    $('#work-session').text(workSession);
  };

  //starting values
  $('#work-session').text(workSession);
  $('#break-session').text(breakSession);
  $('#counter').text(workSession + ":00");

  //buttons 
  $('#less-break').click(lessBreak);
  $('#more-break').click(moreBreak);
  $('#pauseClock').click(pauseClock);
  $('#pauseClock').prop("disabled",true);
  $('#startClock').click(runClock);
  $('#resetClock').click(resetClock);
  $('#less-work').click(lessWork);
  $('#more-work').click(moreWork);
  //end buttons

}); //close document ready function

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/audiosynth/1.0.0/audiosynth.js"></script>

style.css

body {
  background-image: url(https://farm7.staticflickr.com/6180/6261058381_2a9c4692a8_b.jpg);
  font-family: "Press Start 2P", serif;
}

.jumbotron {
  min-width: 400px;
  color: white;
  opacity: 0.9;
  margin: 50px 100px 50px 100px;
  border-radius: 100px;
  background-image: url(https://farm4.staticflickr.com/3887/14242891598_ecb786a11b_k.jpg);
}


#jumbotron-font {
  font-family: "Press Start 2P", serif;
}

#counter-container {
  background-image: url(https://img.4plebs.org/boards/adv/image/1426/88/1426880962347.png);
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 400px auto;
}

#counter {
  height: 400px;
  width: 400px;
  font-size: 45px;
  padding-top: 175px;
  padding-left: 90px;
}

#setting-container {
  background-image: url(https://img.4plebs.org/boards/adv/image/1426/88/1426880962347.png);
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 250px auto;
}

.setting {
  height: 250px;
  width: 250px;
  padding-top: 110px;
  padding-right: 20px;

}

.btn {
  padding: 15px
}

.button-sub {
  font-size: 10px;
}

.container-fixed {
  min-width: 1000px;
  max-width: 1000px;
  margin: 0px auto;
}

#work-session {
  font-size: 50px;
}

#break-session {
  font-size: 50px;
}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />

xwxwwv.markdown

Rendered
Source

xwxwwv

A Pen by Daniel McNinch on CodePen.

License.

Cacher is the code snippet organizer for pro developers

We empower you and your team to get more done, faster

xwxwwv

xwxwwv