Skip to content

Instantly share code, notes, and snippets.

@Liight

Liight/index.html

Created December 3, 2018 19:34
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Liight/40cf11d4d7a237dab410fc02870fa1d0 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Liight/40cf11d4d7a237dab410fc02870fa1d0 to your computer and use it in GitHub Desktop.
Download ZIP
Pomodoro Clock (JQuery /JavaScript, BootStrap)[FCC]
Raw
index.html
<div id="main">
<!-- MESSAGES -->
<h2 id="message">Pomodoro Clock</h2>
<!-- SETUP BUTTONS -->
<section class="clock row">
<div class="col-xs-3"></div>
<!-- SESSION CONTROL -->
<div class="session col-xs-2">
<p>Session Time</p>
<button class="btn btn-minus" id="sessionMinus">-</button>
<span class="number" id="sessionNumber">25</span>
<button class="btn btn-plus" id="sessionPlus">+</button>
</div>
<!-- BUTTONS FOR START & RESET -->
<div class="col-xs-2" id="buttons">
<button id="start"><i class="fa fa-play fa-5x"></i></button>
<button id="reset"><i class="fa fa-rotate-left fa-5x"></i></button>
</div>
<!-- BREAK CONTROL -->
<div class="break col-xs-2">
<p>Break Time</p>
<button class="btn btn-minus" id="breakMinus">-</button>
<span class="number" id="breakNumber">0</span>
<button class="btn btn-plus" id="breakPlus">+</button>
</div>
<div class="col-xs-3"></div>
</section>
<!-- TIMER -->
<div id="timer">
<span id="minutes">25</span> :
<span id="seconds">00</span>
</div>
</div>
Raw
pomodoro-clock-jquery-javascript-bootstrap-fcc.markdown
Raw
script.js
// Helper Functions
function getElem(id) {
return document.getElementById(id);
}
function getValue(elem) {
return parseInt(elem.innerHTML);
}
// register variables
var bigTime; // time in seconds
var mode = "normal"; // normal vs cooldown
var color = "FFDB70";
var cooldownColor = "265E9A";
var textCoolDownColor = "#333";
var textNormalColor = "#F05A28";
var divisor = 300;
var mins;
var secs;
var countdownID;
var audio = new Audio("http://soundbible.com/mp3/Audience_Applause-Matthiew11-1206899159.mp3");
function playAudio() {
audio.play();
};
// register elements
var minutes = getElem("minutes");
var seconds = getElem("seconds");
var message = getElem("message");
var sessionTime = getValue("sesionNumber");
var breakTime = getValue("breakNumber");
// register session minus
var sessionMinus = getElem("sessionMinus");
// register session plus
var sessionPlus = getElem("sessionPlus");
// register break minus
var breakMinus = getElem("breakMinus");
// register break plus
var breakPlus = getElem("breakPlus");
// register start button
var start = getElem("start");
start.addEventListener("click", startTimer, false);
// register reset button
var reset = getElem("reset");
reset.addEventListener("click", resetTimer, false);
//Timer Elem
var minutesElem = getElem("minutes");
var secondsElem = getElem("seconds");
//Get VALUE;
var breakLength = getElem(breakTime);
var sessionLength = getElem(sessionTime);
// BREAK MINUS
breakMinus.onclick = function() {
if (breakLength > 0) {
breakPlus.removeAttribute("disabled");
breakLength = breakLength - 1;
breakNumber.innerHTML = breakLength;
}
if (breakLength == 0) {
breakMinus.setAttribute("disabled", "disabled");
}
};
// BREAK PLUS
breakPlus.onclick = function() {
if (breakLength < 60) {
breakMinus.removeAttribute("disabled");
breakLength = breakLength + 1;
breakNumber.innerHTML = breakLength;
}
if (breakLength === 60) {
breakPlus.setAttribute("disabled", "disabled");
}
};
// SESSION MINUS
sessionMinus.onclick = function() {
if (getValue(minutesElem) > 0) {
sessionLength = getValue(minutesElem) - 1;
sessionNumber.innerHTML = sessionLength;
if (sessionLength < 10) {
minutesElem.innerHTML = "0" + sessionLength;
} else {
minutesElem.innerHTML = sessionLength;
}
secondsElem.innerHTML = "00";
}
if (sessionLength < 1) {
startButton.setAttribute("disabled", "disabled");
}
};
// SESSION PLUS
sessionPlus.onclick = function() {
if (getValue(minutesElem) < 60) {
sessionLength = getValue(minutesElem) + 1;
sessionNumber.innerHTML = sessionLength;
getElem("start").removeAttribute("disabled");
if (sessionLength < 10) {
minutesElem.innerHTML = "0" + sessionLength;
} else {
minutesElem.innerHTML = sessionLength;
}
secondsElem.innerHTML = "00";
}
};
// COUNTER ================================================================
function counter(eventInfo) {
// calculate the minutes and seconds from bigTime
mins = Math.floor(bigTime / 60);
secs = bigTime - mins * 60;
// change the HTML to show new minutes and seconds
minutes.innerHTML = (mins < 10 ? '0' : '') + mins;
seconds.innerHTML = (secs < 10 ? '0' : '') + secs;
// switch modes when timer expires
if (bigTime === 0) {
if (mode === "normal") {
playAudio()
// go to cooldown
mode = "cooldown";
bigTime = getValue(breakNumber) * 60;
divisor = 30;
// change background color to cooldown
document.body.style.background = "#" + cooldownColor;
$("#timer").css('color', textCoolDownColor);
$("#message").css('color', textCoolDownColor);
} else {
resetTimer();
}
} else {
// decrement
bigTime = bigTime - 1;
}
}
// ACTIONS =============================================================
function startTimer(eventInfo) {
$('#sessionPlus').prop('disabled', true);
$('#sessionMinus').prop('disabled', true);
bgColor = color;
bigTime = getValue(sessionNumber) * 60; // get from app settings
divisor = 300;
// start the timer
countdownID = setInterval(function() {
counter();
}, 1000);
// show reset button
start.style.display = "none";
reset.style.display = "block";
}
function resetTimer(eventInfo) {
$('#sessionPlus').prop('disabled', false);
$('#sessionMinus').prop('disabled', false);
// stop timer
clearInterval(countdownID);
running = false;
// switch back to normal mode
mode = "normal";
$("#timer").css('color', textNormalColor);
$("#message").css('color', textNormalColor);
bigTime = getValue(sessionNumber) * 60;
bgColor = color;
// change styles to normal
sessionNumber.innerHTML = "25";
breakNumber.innerHTML = "0";
minutes.innerHTML = "25";
seconds.innerHTML = "00";
document.body.style.background = "#" + color;
// show start button
start.style.display = "block";
reset.style.display = "none";
// stop timer
clearInterval(countdownID);
}
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Raw
style.css
/* High Sat Blue 003DF5
Low Sat Yellow FFDB70 */
@font-face {
font-family: DeliciousRoman;
src: url(http://www.font-face.com/fonts/delicious/Delicious-Roman.otf);
font-weight:400;
}
body {
background: #FFDB70;
font-family: 'Open Sans';
padding-top: 50px;
}
/* HEADER */
header {
margin-top: 40px;
text-align: center;
}
/* MAIN */
#main {
padding-top: 40px;
text-align: center;
}
#message {
color: #F05A28;
font-size: 70px;
line-height: 1;
margin-bottom: 70px;
font-family: DeliciousRoman, Helvetica, Arial, sans-serif;
}
.clock {
font-size: 2em;
}
.session,
.break {
display: inline;
padding: 1em;
user-select: none;
text-align: center;
}
.btn {
font-size: 2em;
background: transparent;
outline: none;
border: none;
color: #FF6B6B;
cursor: pointer;
user-select: none;
}
.number {
position: relative;
font-size: 2em;
top: 0.25em;
}
#timer {
color: #F05A28;
font-size: 181px;
margin-bottom: 40px;
}
/* BUTTONS */
#buttons button {
background: TRANSPARENT;
border: none;
cursor: pointer;
font-size: 20px;
margin: auto;
padding: 30px;
height: 100%;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
#reset {
display: none;
}
Raw
styles
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment