Skip to content

Instantly share code, notes, and snippets.

@benjaminadk
Last active May 21, 2017 16:27
Show Gist options
  • Save benjaminadk/f12370a56a6d289efd9770ecfa95e281 to your computer and use it in GitHub Desktop.
Save benjaminadk/f12370a56a6d289efd9770ecfa95e281 to your computer and use it in GitHub Desktop.
FCC Pomodoro Clock Project

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.

<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>
$(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
<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>
.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;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment