Pomodoro Clock

Developer
Thomas Vaeth
Size
3,136 Kb
Views
32,384
  1. Pomodoro Clock Previews
  2. Pomodoro Clock HTML Codes
  3. Pomodoro Clock CSS Codes
  4. Pomodoro Clock JS Codes

How do I make an pomodoro clock?

Pomodoro Clock for FreeCodeCamp.. What is a pomodoro clock? How do you make a pomodoro clock? This script and codes were developed by Thomas Vaeth on 24 September 2022, Saturday.

Pomodoro Clock Previews
IQ Test

Pomodoro Clock - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pomodoro Clock</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="site-wrapper"> <div class="site-wrapper-inner"> <div class="cover-container"> <div class="inner cover"> <p class="cover-heading task"></p> <p class="cover-heading break"></p> <p class="cover-heading clock"></p> <p class="lead information"></p> <p class="lead"> <button class="btn btn-lg btn-default set-task">Set Task Timer</button> <button class="btn btn-lg btn-default set-break">Set Break Timer</button> <button class="btn btn-lg btn-default start-task">Start Task</button> <button class="btn btn-lg btn-default start-break">Start Break</button> <button class="btn btn-lg btn-default stop">Stop</button><br> <button class="btn btn-default add-task">+</button> <button class="btn btn-default subtract-task">-</button> <button class="btn btn-default add-break">+</button> <button class="btn btn-default subtract-break">-</button> </p> </div> </div> </div> </div> <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Pomodoro Clock - Script Codes CSS Codes

.break,
.start-task,
.start-break,
.stop,
.reset,
.set-break,
.add-break,
.subtract-break,
.information { display: none;
}
.add-task,
.subtract-task,
.add-break,
.subtract-break { margin-top: 5px;
}
a,
a:focus,
a:hover { color: #fff;
}
button:focus { outline: 0 !important;
}
.btn-default,
.btn-default:hover,
.btn-default:focus { color: #333; text-shadow: none; background-color: #fff; border: 1px solid #fff;
}
.task,
.break,
.clock { font-size: 144px; font-weight: 600;
}
html,
body { height: 100%; background-image: url("https://cdn-images-1.medium.com/max/2000/1*7CJukab5KyjVDnTtutWtaw.jpeg"); background-size: cover; background-color: #333;
}
body { color: #fff; text-align: center; text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.site-wrapper { display: table; width: 100%; height: 100%; /* For at least Firefox */ min-height: 100%; -webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5); box-shadow: inset 0 0 100px rgba(0,0,0,.5);
}
.site-wrapper-inner { display: table-cell; vertical-align: top;
}
.cover-container { margin-right: auto; margin-left: auto;
}
.inner { padding: 30px;
}
.cover { padding: 0 20px;
}
.cover .btn-lg { padding: 10px 20px; font-weight: bold;
}
@media (min-width: 768px) { .site-wrapper-inner { vertical-align: middle; } .cover-container { width: 100%; }
}
@media (min-width: 992px) { .cover-container { width: 700px; }
}

Pomodoro Clock - Script Codes JS Codes

$(document).ready(function() { $('.task').html(taskTimer + clock); $('.break').html('0' + breakTimer + clock);
});
var taskTimer = 25;
var breakTimer = 5;
var clock = ':00';
$('.add-task').on('click', function() { taskTimer++; if (taskTimer > 0) { $('.set-task, .subtract-task').removeAttr('disabled'); } if (taskTimer < 10) { $('.task').html('0' + taskTimer + clock) } else { $('.task').html(taskTimer + clock); }
});
$('.subtract-task').on('click', function() { taskTimer--; if (taskTimer === 0) { $('.set-task, .subtract-task').attr('disabled', 'disabled'); } if (taskTimer < 10) { $('.task').html('0' + taskTimer + clock) } else { $('.task').html(taskTimer + clock); }
});
$('.set-task').on('click', function() { $('.task, .set-task, .add-task, .subtract-task').hide(); $('.break, .set-break, .add-break, .subtract-break').show();
});
$('.add-break').on('click', function() { breakTimer++; if (breakTimer > 0) { $('.set-break, .subtract-break').removeAttr('disabled'); } if (breakTimer < 10) { $('.break').html('0' + breakTimer + clock) } else { $('.break').html(breakTimer + clock); }
});
$('.subtract-break').on('click', function() { breakTimer--; if (breakTimer === 0) { $('.set-break, .subtract-break').attr('disabled', 'disabled') } if (breakTimer < 10) { $('.break').html('0' + breakTimer + clock) } else { $('.break').html(breakTimer + clock); }
});
$('.set-break').on('click', function() { $('.break, .set-break, .add-break, .subtract-break').hide(); $('.start-task, .task').show();
});
var minutesLeft;
var secondsLeft = 0;
var timeSetup;
function taskClock() { $('.clock, .information').css('color', 'white'); $('.information').text('Left in Task'); $('.information').show(); secondsLeft--; if (minutesLeft < 10 && secondsLeft < 10) { $('.clock').html('0' + minutesLeft + ':0' + secondsLeft); } else if (minutesLeft < 10) { $('.clock').html('0' + minutesLeft + ':' + secondsLeft); } else if (secondsLeft < 10) { $('.clock').html(minutesLeft + ':0' + secondsLeft); } else { $('.clock').html(minutesLeft + ':' + secondsLeft); } if (minutesLeft <= 1 && secondsLeft === 0 || minutesLeft < 1) {	$('.clock, .information').css('color', 'red'); } if (secondsLeft < 0) { if (minutesLeft === 0 && secondsLeft < 0) { taskTimer = 0; clearInterval(timeSetup); $('.clock').html('00:00'); $('.stop, .information').hide(); $('.start-break').show(); } else { minutesLeft--; secondsLeft = 60; taskClock(); } }
}
function breakClock() { $('.clock, .information').css('color', 'white'); $('.information').text('Left in Break'); $('.information').show(); secondsLeft--; if (minutesLeft < 10 && secondsLeft < 10) { $('.clock').html('0' + minutesLeft + ':0' + secondsLeft); } else if (minutesLeft < 10) { $('.clock').html('0' + minutesLeft + ':' + secondsLeft); } else if (secondsLeft < 10) { $('.clock').html(minutesLeft + ':0' + secondsLeft); } else { $('.clock').html(minutesLeft + ':' + secondsLeft); } if (minutesLeft <= 1 && secondsLeft === 0 || minutesLeft < 1) {	$('.clock, .information').css('color', 'red'); } if (secondsLeft < 0) { if (minutesLeft === 0 && secondsLeft < 0) { taskTimer = 0; clearInterval(timeSetup); $('.clock').html('00:00'); $('.information').hide(); $('.stop').text('Reset'); } else { minutesLeft--; secondsLeft = 60; breakClock(); } }
}
$('.start-task').on('click', function() { $('.task, .start-task, .subtract-break').hide(); $('.clock, .stop').show(); timeSetup = setInterval( function() {taskClock()}, 1000); minutesLeft = taskTimer; taskClock();
});
$('.start-break').on('click', function() { $('.task, .start-break, .subtract-break').hide(); $('.clock, .stop').show(); timeSetup = setInterval( function() {breakClock()}, 1000); minutesLeft = breakTimer; breakClock();
});
$('.stop').on('click', function() { $('.stop, .clock, .information').hide(); $('.stop').text('Stop'); $('.task, .set-task, .add-task, .subtract-task').show(); clearInterval(timeSetup); taskTimer = 25; $('.task').html(taskTimer + clock) breakTimer = 5; $('.break').html('0' + breakTimer + clock); minutesLeft = taskTimer; secondsLeft = 0; $('.clock').html('');
});
Pomodoro Clock - Script Codes
Pomodoro Clock - Script Codes
Home Page Home
Developer Thomas Vaeth
Username thomasvaeth
Uploaded September 24, 2022
Rating 3
Size 3,136 Kb
Views 32,384
Do you need developer help for Pomodoro Clock?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Thomas Vaeth (thomasvaeth) Script Codes
Name
Local Weather
Flexbox Sticky Navigation
Wikipedia Viewer
Instafetch.js Example
Personal Portfolio Webpage
Flexbox Grid Animation
Button Split Mixin
Image Loop on Hover
Button Offset Mixin
Button Draw on Hover Mixin
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!