FCC Pomodoro Clock Project

fcc-pomodoro-clock-project.markdown

FCC Pomodoro Clock Project

Pomodoro Clock. Features an SVG I made. Its a clock that has three hands which spin at ten times minutes hours and seconds.

A Pen by Benjamin on CodePen.

License.

index.html

<div class='container'>
  <div class='row'>
    <div class='col s6'>
      <div class='card card1'>

        <h4 id='clockDisplay'>Work Session</h4>

        <p class='bigwork'></p>
        <form action='#'>
          <p class='range-field'>
            <input type='range' min='1' max='60' value='25' step='1' id='setWorkTime' class='width-50 tooltipped' data-position='bottom' data-delay='50' data-tooltip='Work Session Length Slider' />
          </p>
        </form>
      </div>
    </div>


    <div class='col s6'>
      <div class='card card2'>
        <h4 id='breakDisplay'>Break Session</h4>
<p class='bigbreak'></p>

        <form action='#'>
          <p class='range-field'>
            <input type='range' min='1' max='30' value='5' step='1' id='setBreakTime' class='tooltipped' data-position='bottom' data-delay='50' data-tooltip='Break Session Length Slider' />
          </p>
        </form>


        </card>
      </div>
    </div>
  </div>
  <div class='row'>
    <div class='col s6'>
      <div class='svgcont'>
        <?xml version="1.0" encoding="utf-8"?>
        <svg data-position='bottom' data-delay='50' data-tooltip='SVG Clock - Made with Boxy - Clock is set to ten times normal speed!!!' class='tooltipped' viewBox="133 127 236 232" xmlns="http://www.w3.org/2000/svg" xmlns:bx="https://boxy-svg.com">
  <defs>
    <path id="text-path-0" d="M 100.404 169.722 C 125.66 77.045 316.442 71.175 321.538 154.024" style="fill: none; stroke: red; stroke-width: 2;"/>
  </defs>
  <path id='bigH' d="M 254.572 251.255 C 254.572 252.111 254.331 252.911 253.914 253.591 L 253.914 323.199 L 257.178 323.199 L 250.106 337.343 L 243.034 323.199 L 246.298 323.199 L 246.298 253.591 C 245.881 252.911 245.64 252.111 245.64 251.255 C 245.64 248.788 247.639 246.789 250.106 246.789 C 252.573 246.789 254.572 248.788 254.572 251.255 Z" style="stroke: rgb(0, 0, 0); fill: rgba(199, 189, 189, 0.84);"/>
  <path id='outerClock' d="M 250 241.599 m -108.313 0 a 108.313 108.313 0 1 0 216.626 0 a 108.313 108.313 0 1 0 -216.626 0 Z M 250 241.599 m -96.708 0 a 96.708 96.708 0 0 1 193.416 0 a 96.708 96.708 0 0 1 -193.416 0 Z" style="fill: rgb(45, 66, 121); stroke: rgb(0, 0, 0);" bx:shape="ring 250 241.599 96.708 96.708 108.313 108.313 1@84184d08" bx:origin="0.493 0.497"/>
  <path id='midH' d="M 256.078 246.156 L 336.212 246.156 L 336.212 243.948 L 341.939 247.63 L 336.212 251.311 L 336.212 249.102 L 256.264 249.102 C 255.783 250.051 254.798 250.701 253.663 250.701 C 252.053 250.701 250.749 249.396 250.749 247.787 C 250.749 246.178 252.053 244.872 253.663 244.872 C 254.669 244.872 255.555 245.382 256.078 246.156 Z" style="stroke: rgb(15, 16, 15); fill: rgb(127, 104, 104);"/>
  <path id='smallH' d="M 251.966 246.021 C 251.966 246.875 251.273 247.568 250.419 247.568 C 249.565 247.568 248.872 246.875 248.872 246.021 C 248.872 245.538 249.093 245.107 249.44 244.823 L 249.44 155.994 L 251.397 155.994 L 251.397 244.822 C 251.744 245.106 251.966 245.537 251.966 246.021 Z" style="stroke: rgb(0, 0, 0); fill: rgb(255, 0, 0);"/>
  <path d="M 360.132 158.566 L 360.132 158.566 Z" style="fill: none; stroke: black;"/>
  <path d="M 360.132 157.179 C 360.132 157.179 360.132 157.179 360.132 157.179 Z" style="fill: none; stroke: black;"/>
</svg></div>
    </div>

<div class='col s5'>
<div class='input-field'>
  <textarea id='notes' class='materialize-textarea'></textarea>
  <label for='notes'>Session Notes</label>
  </div>
</div>
  </div>
  <div class='fixed-action-btn click-to-toggle'>
    <a class='btn-floating btn-large green darken-2 tooltipped' onclick='Materialize.showStaggeredList("#controls")' data-position='left' data-delay='50' data-tooltip='Controls'><i class="material-icons" style="font-size:36px;">settings</i></a>
    <ul id='controls'>
      <li><a class="tooltipped waves-effect waves-light btn-floating btn-large modal-trigger green darken-2"data-position='left' data-delay='50' data-tooltip='Information' data-href="#modal1"><i class="material-icons" style="font-size:36px;">info_outline</i></a></li>

      <li><a id='startButton' class='btn-floating waves-effect red darken-2 disabled tooltipped' data-position='left' data-delay='50' data-tooltip='Start'><i class="material-icons"style="font-size:24px;">play_circle_outline</i></a></li>
      <li><a id='pauseButton' class='tooltipped btn-floating waves-effect red darken-2 disabled' data-position='left' data-delay='50' data-tooltip='Pause'><i class="material-icons" style="font-size:24px;">pause_circle_outline</i></a></li>
      <li><a id='resetButton' class='tooltipped btn-floating waves-effect red darken-2 disabled' data-position='left' data-delay='50' data-tooltip='Reset'><i class="material-icons"style="font-size:24px;">undo</i></a> </li>
    </ul>
  </div>


</div>
<footer class='center'><h5>Design by Ben.Jam(In);</h6></footer>
<div id="modal1" class="modal">
  <div class="modal-content">
    <h1>Pomodoro Clock</h1>
    <p>A Pomodoro Clock is a productivity and time management tool used to structure work flow. Also, the user gains a sense of achievement by simply finishing a
      session. Pomodoro translates to TOMATO from its Italian origin</p>
    <h4>Instructions</h4>
    
    <ol>
      <li>Adjust 'Work Time' slider to desired length of work period (in minutes)</li>
      <li>Set 'Break Time' slider to desired break period</li>
      <li>Click 'Controls'</li>
      <li>'Play' begins your session</li>
      <li>At anytime you may 'Pause' or 'Reset' your session by pressing the coresponding button</li>
      <li>Remember: You must set your times before hitting play</li>
      <li>Enjoy the show</li>
    </ol>
 <h4 style='background-color:#c62828;'>Set 1min & 1min for site functionality</h4>
  </div>
    

  <div class="modal-footer">
    <a href="#!" class="modal-action modal-close waves-effect waves-green btn red darken-2"><i class="material-icons">close</i></a>
    
  </div>
</div>

script.js

$(document).ready(function(){
  //open modal on load  
  $('#modal1').modal();
  $('#modal1').modal('open');
  //$('.modal-trigger').leanModal();

  //declare variables
    //work variables
  var displaySecW;
  var displayMinW;
  var clickWorkTime;
  var workTime;
  var initDisplayW;
    //break variables
  var displaySecB;
  var displayMinB;
  var breakTime;
  var setBreakTime;
  var initDisplayB;
  var clickBreakTime;
 //jquery variables to cut down on queries
  var $startButton = $('#startButton');
  var $clockDisplay = $('#clockDisplay');
  var $breakDisplay = $('#breakDisplay');
  var $pauseButton = $('#pauseButton');
  var $resetButton = $('#resetButton');
  var $bigWork = $('.bigwork');
  var $bigBreak = $('.bigbreak');
   //clock variables
  var $outerClock = $('#outerClock');
  var $bigH = $('#bigH');
  var $midH = $('#midH');
  var $smallH = $('#smallH');
  //audio for fun
  var audio = new Audio('https://www.myinstants.com/media/sounds/dramatic-end.mp3');
  var intro = new Audio('https://www.myinstants.com/media/sounds/zelda_theme_snes-cut-mp3.mp3');
  var outro = new Audio('https://www.myinstants.com/media/sounds/ffxiv_level_up.mp3');
  //function to run when work session expires
  
  function switchTime(){
    clickBreakTime = setInterval(timerB,1000);
    
    function timerB(){
    breakTime -= 1;
    displayMinB = Math.floor(breakTime/60);
    displaySecB = (breakTime%60);
    
    if (displaySecB === 0 && displayMinB === 0){
            //when break is over
        clearInterval(clickBreakTime);
        $startButton.removeClass('disabled');
        $bigBreak.html('');
        $bigH.removeClass('bighand');
        $midH.removeClass('midhand');
        $smallH.removeClass('smallhand');
        $outerClock.removeClass('ring');
        $outerClock.addClass('rung');
        $clockDisplay.html('Work Session');
        $breakDisplay.html('Break Session');
        $startButton.addClass('disabled');
        $pauseButton.addClass('disabled');
        outro.play();
    } 
    else if (displaySecB >= 10){
      $bigBreak.html(displayMinB + ' : ' + displaySecB);
        }
      //the final ten seconds
    else if (displaySecB < 10 && displayMinB === 0){
     $bigBreak.html(' : ' + displaySecB);
    }
      //for when seconds are less then ten and minutes greater than 0
    else{
      $bigBreak.html(displayMinB + ' : 0' + displaySecB);
    }
    }//end of timerB
  } //end of switch funtion
  
  //when user moves slider
  $(document).on('change', '#setWorkTime', function(){
    $startButton.removeClass('disabled');

    workTime = ($(this).val()*60);
    initDisplayW = ($(this).val());
   
   $clockDisplay.html(initDisplayW + " Minute Work Session");
  
  
  //listen for start button

  $startButton.on('click',function(){
   intro.play();
   clearInterval(clickWorkTime);
   $bigH.addClass('bighand');
   $midH.addClass('midhand');
   $smallH.addClass('smallhand');
    //toggle buttons and inputs
  
  $('#setWorkTime').prop('disabled',true);
  $startButton.addClass('disabled');
  $resetButton.removeClass('disabled');
  $pauseButton.removeClass('disabled');
 //setup timer
  
  clickWorkTime = setInterval(timer, 1000);
 
  //timing function
  
  function timer(){
    workTime -= 1;
    displayMinW = Math.floor(workTime/60);
    displaySecW = (workTime%60);
    console.log(workTime);
    //logic for the clock
    //when time runs out
    if (displaySecW === 0 && displayMinW === 0){
      //should do something cool here like play a sound or graphics...
         audio.play();
         $clockDisplay.html("Break Time");
         $bigWork.html('');
         clearInterval(clickWorkTime);
         $outerClock.addClass('ring');

      //call breakTime
         switchTime();
    }
      //when seconds is greater than ten normal display
    else if (displaySecW >= 10){
      $bigWork.html(displayMinW + ' : ' + displaySecW);
        }
      //the final ten seconds
    else if (displaySecW < 10 && displayMinW === 0){
     $bigWork.html(' : ' + displaySecW);
    }
      //for when seconds are less then ten and minutes greater than 0
    else{
      $bigWork.html(displayMinW + ' : 0' + displaySecW);
    }
  }  //end timer function
    
    //pause button
    
    $pauseButton.on('click', function(){
         intro.pause();
        //timer and buttons
        clearInterval(clickBreakTime);
        clearInterval(clickWorkTime);
        $startButton.removeClass('disabled');
        $pauseButton.addClass('disabled');
        
      //clock
       $bigH.removeClass('bighand');
       $midH.removeClass('midhand');
       $smallH.removeClass('smallhand');
      });
    
    //reset button user must user slider
    
    $resetButton.on('click', function(){
      clearInterval(clickBreakTime);
      clearInterval(clickWorkTime);
      $breakDisplay.html("Break Session");
      $clockDisplay.html("Work Session");
      //user has to interact there is no default yet
      $pauseButton.addClass('disabled');
      $resetButton.addClass('disabled');
      $('#setWorkTime').prop('disabled',false);
      workTime = ($('#setWorkTime').val()*60);
      $bigH.removeClass('bighand');
      $midH.removeClass('midhand');
      $smallH.removeClass('smallhand');
      $bigBreak.html('');
      $bigWork.html('');
    });
    
    //end of start button click
    });
  
//end of change in work slider
});
  $(document).on('change', '#setBreakTime', function(){
   
    breakTime = ($(this).val()*60);
    initDisplayB = ($(this).val());
   
   $breakDisplay.html(initDisplayB + " Minute Break");
  }); //end break slider change 

   
     
 
});//doc ready 

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>

style.css

.backdrop{
  background-color:#455a64;
}

body{
  background-color:rgb(45, 66, 121);
}
.container{
  margin:50px auto 0;
  background-color:#b0bec5;
  border-radius: 5px;

}
.card1{
  margin-left: 30px;
  box-shadow: 5px 5px 10px;
  border-radius: 5px;
  margin-top:30px;

}
.card2{
  margin-right: 30px;
  box-shadow: 5px 5px 10px;
  border-radius: 5px;
  margin-top:30px;


}

input[type=range] + .thumb{
  background-color: #455a64;
}
input[type=range] + .thumb.active .value{
  color: white;
}
input[type=range]::-webkit-slider-thumb{
  background-color:#455a64;
  width: 20px;
  height: 20px;
  border:5px solid #388e3c;
}
input[type=range]::-webkit-slider-runnable-track {
  height: 6px;
  background: #455a64;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background-color:#5d4037;

}
.modal{
  height:100%;
}

.modal h1{
  background-color: #388e3c;
  color:white;
  text-align:center;
  }
.modal h4{
  background-color: rgb(45, 66, 121);
  color:white;
  text-align:center;
  margin-top: 10px;
}
.bigbreak{
  display:inline;
  font-size: 60px;
  margin-left:60px;
  color:#c62828;
  
}
.bigwork{
  display:inline;
  font-size: 60px;
  margin-left:60px;
  color:rgb(45, 66, 121);
}
#breakDisplay, #clockDisplay{
  background-color:#388e3c;
  color: white;
  padding: 10px 5px;
  text-align: center;
  font-size: 22px;
  border-radius: 5px 5px 0 0;

}

.svgcont{
  height: 200px;
  width: 200px;
  margin:50px auto;
  border-radius:50%;  

}
.fixed-action-btn{
  margin-bottom:80px;
  margin-right: 80px;
}

.btn-floating:hover{
  background-color:red;
}
h5{
  color:white;
  animation: ben 5s linear 0s 1 backwards;
  opacity:1;
  
}
@keyframes ben{
  0%{
    opacity:0;
    transform:scale(.1); }
  
  100%{
    opacity:1;}
}
.bighand{
  transform-origin:top center;
  animation: clock 430s linear 0s infinite;
  
}

@keyframes clock{
  100%{
    transform:rotate(360deg);
  }
}

.midhand{
  animation: clock2 36s linear 0s infinite;
  transform-origin:left center;
 
}

@keyframes clock2{
  100%{
    transform:rotate(360deg);
  }
}
.smallhand{
  animation: clock3 6s linear infinite;
  transform-origin:bottom center;
}
@keyframes clock3{
  100%{
    transform:rotate(360deg);
  }
}
.ring{
  transform-origin:center center;
  animation: implode 3s ease-in-out 1s forwards 1;
}

@keyframes implode{
  0%{
    transform:scale(1.1);
    fill:red;
  } 
50%{transform:scale(.001);
    rotatey(360deg);
    fill:orange;
  }
  100%{fill:#c62828;
  }
}
.rung{
  transform-origin:center center;
  animation: done 5s linear 0s forwards 1;
}
@keyframes done{
  0%{
    fill:yellow;
  }
  50%{
   transform: rotatey(360deg)
              scale(.01);
   fill:transparent;
  }
  100%{
    fill:rgb(45, 66, 121);
  }
}
.input-field{
  margin:120px 100px 0 0;
}
.input-field textarea:focus + label {
  color: #c62828 !important;
  font-size: 22px !important;
}

.row .input-field textarea:focus {
  border-bottom: 1px solid #c62828 !important;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css" rel="stylesheet" />