Skip to content

Instantly share code, notes, and snippets.

@Deityhub

Deityhub/index.html

Created February 13, 2018 17:23
Show Gist options
  • Save Deityhub/a3123927fedc367535ea8c162d7a9d89 to your computer and use it in GitHub Desktop.
Save Deityhub/a3123927fedc367535ea8c162d7a9d89 to your computer and use it in GitHub Desktop.
Download ZIP
Pomodoro Timer
Raw
index.html
<html lang="en"><head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Pomodoro Timer</title>
<meta name="description" content="Pomodoro Timer | Ojini Chizoba">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Dosis:300,400,600,700" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="space">
<div class="container">
<h1 class="title">P<span>o</span>m<span>o</span>d<span>o</span>r<span>o</span> Timer</h1>
<h2>Online timer based on the
<a href="https://en.wikipedia.org/wiki/Pomodoro_Technique" target="_blank">
Pomodoro Technique.</a>
</h2>
<div id="circleClock" class="circle-clock">
<div id="clockTime" class="clock-time">
<h3 id="timeLeft">25</h3>
</div>
<div id="status" class="status">Hello!</div>
<div id="clockStatus" class="reset">Start</div>
</div>
<div class="setters">
<div class="break-setter">
<p class="breakText">Break time</p>
<button id="breakPlus" onclick="alterBreak(+1)">+</button>
<span id="breakTime" class="break-time">5 min</span>
<button id="breakMinus" onclick="alterBreak(-1)">-</button>
</div>
<div class="work-setter">
<p class="workText">Work time</p>
<button id="workPlus" onclick="alterSession(+1)">+</button>
<span id="workTime" class="work-time">25 min</span>
<button id="workMinus" onclick="alterSession(-1)">-</button>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="row">
<ul class="list-inline">
<li class="contact">
<a href="mailto:judoc96@gmail.com" rel="nofollow" target="_blank">
<i class="fa fa-envelope"></i>
</a>
</li>
<li class="github">
<a href="https://github.com/deityhub" rel="nofollow" target="_blank">
<i class="fa fa-github"></i>
</a>
</li>
<li class="twitter">
<a href="https://twitter.com/deityhub" rel="nofollow" target="_blank">
<i class="fa fa-twitter"></i>
</a>
</li>
<li class="codepen">
<a href="https://codepen.io/deityhub/" rel="nofollow" target="_blank">
<i class="fa fa-codepen"></i>
</a>
</li>
<li class="freecodecamp">
<a href="http://www.freecodecamp.com/deityhub" rel="nofollow" target="_blank">
<i class="fa fa-fire"></i>
</a>
</li>
<p>Made with <span>♥</span> by Ojini Chizoba</p>
</ul>
</div>
</footer>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Raw
pomodoro-timer.markdown

Pomodoro Timer

This simple timer app applies the pomodoro technique, which involves creating a workflow and the time in-between rest

A Pen by Ojini Chizoba Jude on CodePen.

License.

Raw
script.js
var breakLength = 5,
sessionLength = 25,
timeLeft = sessionLength,
count = 0,
runTimer = false,
isBreak = false,
timerInterval,
breakSec;
var alarm = new Audio('http://www.orangefreesounds.com/wp-content/uploads/2016/06/Ringing-clock.mp3?_=1');
var secs = 60 * timeLeft;
$('#clockStatus').click(startTimer);
function secondsToHms(d) {
d = Number(d);
var h = Math.floor(d / 3600);
var m = Math.floor(d % 3600 / 60);
var s = Math.floor(d % 3600 % 60);
return (
(h > 0 ? h + ":" + (m < 10 ? "0" : "") : "") + m + ":" + (s < 10 ? "0" : "") + s
);
}
function alterSession(num){
if(!runTimer){
sessionLength += num;
sessionLength = sessionLength > 1 ? sessionLength : 1;
timeLeft = sessionLength;
secs = 60 * sessionLength;
$('#workTime').text(sessionLength + ' min');
$('#timeLeft').text(sessionLength);
btnReset();
isBreak = false;
}
}
function alterBreak(num){
if(!runTimer){
breakLength += num;
breakLength = breakLength > 1 ? breakLength : 1;
breakSec = 60 * breakLength;
if(isBreak){
timeLeft = breakLength;
breakSec = 60 * breakLength;
$('#timeLeft').text(breakLength);
}
$('#breakTime').text(breakLength + ' min');
}
}
function startTimer() {
if (count == 0) {
runTimer = true;
count += 1;
if(!isBreak){
countDown(sessionLength, secs);
$('#status').text('Timer running...');
$('#clockStatus').text('Pause');
}else{
breakTimer()
}
} else if (count == 1) {
btnReset();
count -= 1;
if(!isBreak){
$('#status').text('Timer paused');
}else{
$('#status').text('Break paused');
}
$('#clockStatus').text('Resume');
}
}
breakSec = 60 * breakLength;
function breakTimer(){
runTimer = true;
if(breakSec != 0){
if(isBreak){
$('#status').text('Break Time!');
timerInterval = setInterval(function(){
breakSec -= 1;
$('#timeLeft').text(secondsToHms(breakSec));
breakSec = breakSec
if(breakSec == 0){
alarm.play();
isBreak = false;
breakSec = 60 * breakLength;
clearInterval(timerInterval);
secs = 60 * sessionLength;
countDown(sessionLength, secs);
}
}, 1000)
}
}
}
function countDown(m, s){
$('#status').text('Timer running...');
timerInterval = setInterval(function(){
if(s != 0){
s -= 1;
$('#timeLeft').text(secondsToHms(s));
secs = s;
}else{
alarm.play();
isBreak = true;
$('#status').text('Break Time!');
btnReset()
secs = 60 * sessionLength;
breakTimer()
$('#timeLeft').text(secondsToHms(s));
}
}, 1000);
}
function btnReset(){
$('#status').text('Hello!');
runTimer = false;
clearInterval(timerInterval)
}
Raw
style.css
body {
font-family: Dosis;
color: #FFF;
box-sizing: border-box;
background-size: cover;
min-height: 100%;
max-width: 100%;
max-height: auto;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f2f6f8+0,d8e1e7+50,b5c6d0+51,e0eff9+100;Grey+Gloss+%232 */
background: #f2f6f8;
background: -moz-linear-gradient(top, #f2f6f8 0%, #d8e1e7 50%, #b5c6d0 51%, #e0eff9 100%);
background: -webkit-linear-gradient(top, #f2f6f8 0%, #d8e1e7 50%, #b5c6d0 51%, #e0eff9 100%);
background: linear-gradient(to bottom, #f2f6f8 0%, #d8e1e7 50%, #b5c6d0 51%, #e0eff9 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#f2f6f8', endColorstr='#e0eff9', GradientType=0);
}
/* Project Container */
.container {
width: 100%;
max-width: 1140px;
margin: 0 auto;
}
/* Project Title */
h1 {
color: #80ffaa;
font-size: 4em;
text-shadow: 4px 2px 4px rgba(100, 100, 100, 0.4);
text-align: center;
}
h1 span {
color: #ff8080;
text-shadow: 4px 2px 4px rgba(255, 0, 0, 0.4);
}
h2 {
color: #91b8d4;
text-align: center;
margin-top: -40px;
margin-bottom: 40px;
}
h2 a {
color: #ff8080;
}
/* Circle Timer */
.circle-clock {
text-align: center;
width: 250px;
height: 250px;
margin: auto;
border-radius: 60%;
border: 5px solid #80ffaa;
box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.5);
overflow: hidden;
background: #ff8080;
margin-bottom: 30px;
}
.clock-time {
font-size: 3em;
text-align: center;
}
.status{
font-size: 1.5em;
margin-top: -40px;
cursor: pointer;
}
.reset{
cursor: pointer;
margin-top: 8px;
}
/* Time Setters */
.break-setter,
.work-setter {
display: inline-block;
color: #FFF;
text-align: center;
font-size: 1.0em;
font-weight: 300;
width: 240px;
min-height: 100%;
max-width: 100%;
padding: 10px;
background: #91b8d4;
border: 5px solid #80ffaa;
border-radius: 10px;
box-shadow: 1px 1px 20px rgba(0, 0, 0, .5);
margin-bottom: 30px;
}
.break-setter p,
.work-setter p {
font-size: 2em;
margin-top: -5px;
margin-bottom: 10px;
}
.break-setter {
float: left;
margin-left: 100px;
}
.work-setter {
float: right;
margin-right: 100px;
}
button {
transition: 0.2s;
color: #80ffaa;
margin: 2px;
padding: 2px;
border-radius: 5px;
background: #ff8080;
border: 2px solid #80ffaa;
font-size: 2em;
padding: 0px 10px;
cursor: pointer;
width: 50px;
height: 50px;
line-height: 1.0;
}
.break-time,
.work-time {
font-size: 2em;
padding: 0 10px 0 10px;
cursor: pointer;
}
.setters {
margin-bottom: 30px;
}
/* Footer */
.footer {
background: #7EACCC no-repeat 50% 50%;
background-size: cover;
min-height: 100%;
max-width: 100%;
max-height: auto;
padding: 5px;
margin-top: 350px;
font-size: 1.4em;
text-align: center;
margin-left: auto;
margin-right: auto;
position: relative;
min-height: 100%;
border-top: 8px #80ffaa outset;
}
.footer p,
a {
color: #FFF;
text-decoration: none;
padding: 0px;
}
.footer ul li {
display: inline;
margin: 5px;
text-align: center;
}
.footer .fa {
color: #FFF;
text-align: center;
font-size: 1.3em;
border: 2px solid #FFF;
border-radius: 50%;
padding: 8px;
margin: 5px;
width: 40px;
height: 40px;
line-height: 1.4;
}
.footer .fa:hover {
transition: 0.3s;
text-shadow: 2px 1px 2px #333;
}
.footer .contact .fa:hover {
background-color: #e6b800;
}
.footer .linkedin .fa:hover {
background-color: #117BB7;
}
.footer .github .fa:hover {
background-color: #24478f;
}
.footer .twitter .fa:hover {
background-color: #007acc;
}
.footer .codepen .fa:hover {
background-color: #ff6600;
}
.footer .freecodecamp .fa:hover {
background-color: #009933;
}
.footer p span {
color: #80ffaa;
}
/* Media Queries */
@media screen and (max-width: 315px) {
.title {
font-size: 3.2em;
line-height: 0.8;
}
h2 {
line-height: 1.1;
padding-top: 10px;
}
.footer {
margin-top: 50px;
}
.footer ul {
padding-top: 10px;
margin: 0px;
}
.footer ul li {
width: 100%;
margin: auto;
}
.footer .fa {
font-size: 1.0em;
padding: 8px;
margin: 2px;
width: 25px;
height: 25px;
line-height: 1.2;
display: inline-block;
}
}
@media screen and (max-width: 650px) {
.title {
line-height: 0.8;
}
.circle-clock {
width: 200px;
height: 200px;
}
.clock-time {
font-size: 2.6em;
}
.space {
float: center;
}
.setters {
display: flex;
flex-direction: column;
justify-content: center !important;
}
.break-setter,
.work-setter {
margin: auto !important;
margin-bottom: 20px !important;
}
.footer {
margin-top: 20px !important;
}
}
@media screen and (max-width: 850px) {
.circle-clock {
width: 200px;
height: 200px;
}
div > h3{
font-size: 1em;
}
.break-setter,
.work-setter {
font-size: 0.8em;
width: 200px;
height: 100px;
margin-top: 30px;
}
.break-setter p,
.work-setter p {
margin-top: -5px;
margin-bottom: 10px;
}
.break-setter {
margin-left: 50px;
}
.work-setter {
margin-right: 50px;
}
button {
width: 40px;
height: 40px;
}
.footer {
margin-top: 350px;
}
.footer .fa {
font-size: 1.0em;
padding: 8px;
margin: 2px;
width: 25px;
height: 25px;
line-height: 1.2;
display: inline-block;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment