<!-- This is my creation of the Pomodoro Timer for the Free Code Camp Zipline! -->
<link href='https://fonts.googleapis.com/css?family=Oswald:700' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href='https://bootswatch.com/superhero/bootstrap.min.css' rel='stylesheet'>
<div class="container-fluid text-center">
<div class="panel panel-info">
<div class="panel-heading">
<h1>Pomodoro Timer</h1>
</div>
</div>
<div id="main" class="row">
<div id="control" class="row center-block">
<div id="break" class="col-sm-6">
<p id="blabel">
<h3>Break</p>
<button id="bminus" type="button" class="btn btn-info">-</button>
<span id="btime">2</span>
<button id="bplus" type="button" class="btn btn-info">+</button>
</div>
<div id="session" class="col-sm-6">
<p id="slabel"><h3>Session</p>
<button id="sminus" type="button" class="btn btn-info">-</button>
<span id="stime">15</span>
<button id="splus" type="button" class="btn btn-info">+</button>
</div>
</div>
<div id="timer" class="center-block">
<!-- <h1 id="timerStatus"></h1>
<h1 id="timerText">25:00<h1> -->
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-info" style="width: 0%"></div>
</div>
</div>
<div id="buttons" class="center-block">
<button id="start" type="button" class="btn btn-info">Start</button>
<button id="reset" type="button" class="btn btn-default">Reset</button>
<button id="stop" type="button" class="btn btn-danger">Stop</button>
</div>
</div>
</div>.progress {
height: 1.5em;
margin: 5% 30% 5% 30%;
}
.progress-bar {
overflow-x: visible;
white-space: nowrap;
color: black;
font-size: 1.25em;
}$(document).ready(function() {
var sessionLength = 25,
breakLength = 5,
timer,
audioPlayed = false;
var audio = new Audio("http://www.oringz.com/oringz-uploads/sounds-940-pizzicato.mp3");
$("#reset").on("click", function() {
sessionLength = 25;
breakLength = 5;
$(".progress-bar").css("width", 0);
$(".progress-bar").html("");
$("#btime").html(breakLength);
$("#stime").html(sessionLength);
});
function countdown() {
var sessionInSeconds = sessionLength * 60,
breakInSeconds = breakLength * 60,
currentSessionLength = sessionLength;
currentBreakLength = breakLength;
timer = setInterval(function() {
if (sessionInSeconds > 0) {
audioPlayed = false;
$("#blabel").removeClass("text-primary");
$("#slabel").addClass("text-primary");
breakInSeconds = breakLength * 60;
console.log(sessionInSeconds);
if (sessionInSeconds % 60 < 10)
$(".progress-bar").html(Math.floor(sessionInSeconds / 60) + ":0" + sessionInSeconds % 60);
else
$(".progress-bar").html(Math.floor(sessionInSeconds / 60) + ":" + sessionInSeconds % 60);
var progress = 100 - (sessionInSeconds / (currentSessionLength * 60) * 100);
$(".progress-bar").css("width", progress.toString() + "%");
console.log(progress.toString() + "%");
sessionInSeconds--;
} else {
if (!(audioPlayed)) {
audio.play();
audioPlayed = true;
}
$("#slabel").removeClass("text-primary");
$("#blabel").addClass("text-primary");
if (breakInSeconds > 0) {
console.log(breakInSeconds);
if (breakInSeconds % 60 < 10)
$(".progress-bar").html(Math.floor(breakInSeconds / 60) + ":0" + breakInSeconds % 60);
else
$(".progress-bar").html(Math.floor(breakInSeconds / 60) + ":" + breakInSeconds % 60);
var progress = (breakInSeconds / (currentBreakLength * 60) * 100);
$(".progress-bar").css("width", progress.toString() + "%");
breakInSeconds--;
} else {
audio.play()
sessionInSeconds = sessionLength * 60;
}
}
}, 1000);
};
$("#start").on("click", function() {
countdown();
$(this).prop("disabled", true);
});
$("#stop").on("click", function() {
clearInterval(timer);
$("#start").prop("disabled", false);
$("#slabel").removeClass("text-primary");
$("#blabel").removeClass("text-primary");
});
$("#bminus").on("click", function() {
breakLength--;
if (breakLength < 0)
breakLength = 0;
$("#btime").html(breakLength);
});
$("#sminus").on("click", function() {
sessionLength--;
if (sessionLength < 0)
sessionLength = 0;
$("#stime").html(sessionLength);
if ($("#start").prop("disabled") == false)
$(".progress-bar").html(sessionLength + ":00");
});
$("#bplus").on("click", function() {
breakLength++;
$("#btime").html(breakLength);
});
$("#splus").on("click", function() {
sessionLength++;
$("#stime").html(sessionLength);
if ($("#start").prop("disabled") == false)
$(".progress-bar").html(sessionLength + ":00");
});
});
// $(document).ready(fuction() {});
// // setup variables
// var sessionLength = 25,
// breakLength = 5,
// timer; // timer doesn't have value yet
// // setup reset
// $("reset").click(function() {
// // when reset clicked, reset session and break lenght to orginal
// sessionLenght = 25;
// breakLenght = 5
// // also change value of html to orginal
// $("sessionTime").html(sessionLength);
// $("breakTime").html(breakLength);
// });
// // countdown function
// function countdown() {
// //convert mins to seconds
// var sessionSecs = sessionLength * 60,
// breakSecs = breakLength * 60,
// currentSession = sessionLength,
// currentBreak = breakLength;
// //timer
// // setInterval() method repeats a given function at every given time-interval.
// // 1000 milliseconds = 1s
// timer = setInterval(function() {
// // *** Describe what's happening here
// if (sessionSecs > 0) {
// breakSecs = breakLength * 60;
// console.log(sessionSecs);
// // *** Describe what's happening here
// if (sessionSecs % 60 < 10)
// $(".progress-bar").html(Math.floor(sessionSecs / 60) + ":0" + sessionSecs % 60);
// // *** Describe what's happening here
// else
// $(".progress-bar").html(Math.floor(sessionSecs / 60) + ":" + sessionSecs % 60);
// // *** Describe what's happening here
// var progress = 100 - (sessionSecs / (currentSession * 60) * 100);
// $(".progress-bar").css("width", progress.toString() + "%");
// console.log(progress.toString() + "%");
// // *** Describe what's happening here
// sessionSecs--;
// } else {
// // *** Describe what's happening here
// if (breakSecs > 0) {
// console.log(breakSecs);
// // *** Describe what's happening here
// if (breakSecs % 60 < 10)
// $(".progress-bar").html(Math.floor(breakSecs / 60) + ":0" + breakSecs % 60);
// // *** Describe what's happening here
// else
// $(".progress-bar").html(Math.floor(breakSecs / 60) + ":" + breakSecs % 60);
// // *** Describe what's happening here
// var progress = (breakSecs / (currentBreak * 60) * 100);
// $(".progress-bar").css("width", progress.toString() + "%");
// // *** Describe what's happening here
// breakSecs--;
// } else {
// sessionSecs = sessionLength * 60;
// }
// }, 1000); // END timer
// } //END countdown function
// // Button behaviours below
// // all the ids and var names probably need to be updated
// $("#start").click(function() {
// countdown();
// $(this).prop("disabled", true);
// });
// $("#stop").click(function() {
// clearInterval(timer);
// $("#start").prop("disabled", false);
// $("#slabel").removeClass("text-primary"); //why do we need this
// $("#blabel").removeClass("text-primary"); //why do we need this
// });
// $("#breakMinusBtn").click(function() {
// breakLength--;
// if (breakLength < 0)
// breakLength = 0;
// $("#breakTime").html(breakLength);
// });
// $("#sessionMinusBtn").click(function() {
// sessionLength--;
// if (sessionLength < 0)
// sessionLength = 0;
// $("#sessionTime").html(sessionLength);
// if ($("#start").prop("disabled") == false)
// $(".progress-bar").html(sessionLength + ":00");
// });
// $("#breakPlusBtn").click(function() {
// breakLength++;
// $("#breakTime").html(breakLength);
// });
// $("#sessionPlusBtn").click(function() {
// sessionLength++;
// $("#sessionTime").html(sessionLength);
// if ($("#start").prop("disabled") == false)
// $(".progress-bar").html(sessionLength + ":00");
// });
