|
@@ -0,0 +1,105 @@
|
|
|
+var audio = new Audio(
|
|
|
+ "http://oringz.com/oringz-uploads/sounds-1054-suppressed.mp3"
|
|
|
+);
|
|
|
+
|
|
|
+var state = "session";
|
|
|
+var time_left = 1500;
|
|
|
+var session_time = 1500;
|
|
|
+var break_time = 300;
|
|
|
+var running = false;
|
|
|
+var intervalTimer = 0;
|
|
|
+
|
|
|
+$(document).ready(function () {
|
|
|
+ $("#pomodoro-clock").on("click", function () {
|
|
|
+ running = !running;
|
|
|
+ timer();
|
|
|
+ });
|
|
|
+
|
|
|
+ $(".clickable").on("click", function () {
|
|
|
+ if (!running) {
|
|
|
+ var id = $(this).attr("id");
|
|
|
+
|
|
|
+ if (id === "session-plus") {
|
|
|
+ session_time += 60;
|
|
|
+ $("#session-display").text(fancyTime(session_time));
|
|
|
+ resetTimeLeft();
|
|
|
+ } else if (id === "session-minus") {
|
|
|
+ session_time -= 60;
|
|
|
+ $("#session-display").text(fancyTime(session_time));
|
|
|
+ resetTimeLeft();
|
|
|
+ } else if (id === "break-plus") {
|
|
|
+ break_time += 60;
|
|
|
+ $("#break-display").text(fancyTime(break_time));
|
|
|
+ resetTimeLeft();
|
|
|
+ } else if (id === "break-minus") {
|
|
|
+ break_time -= 60;
|
|
|
+ $("#break-display").text(fancyTime(break_time));
|
|
|
+ resetTimeLeft();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+});
|
|
|
+
|
|
|
+function timer() {
|
|
|
+ clearInterval(intervalTimer);
|
|
|
+ if (running) {
|
|
|
+ intervalTimer = setInterval(function () {
|
|
|
+ time_left--;
|
|
|
+ if (time_left <= 0) {
|
|
|
+ audio.play();
|
|
|
+ if (state === "session") {
|
|
|
+ time_left = break_time;
|
|
|
+ state = "break";
|
|
|
+ $("#state").text("Break");
|
|
|
+ $("#progress-bar").removeClass("progress-bar-success");
|
|
|
+ $("#progress-bar").addClass("progress-bar-danger");
|
|
|
+ } else {
|
|
|
+ time_left = session_time;
|
|
|
+ state = "session";
|
|
|
+ $("#state").text("Session");
|
|
|
+ $("#progress-bar").addClass("progress-bar-success");
|
|
|
+ $("#progress-bar").removeClass("progress-bar-danger");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ updateDisplay();
|
|
|
+ }, 1000);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+function updateDisplay() {
|
|
|
+ $("#timer").text(fancyTime(time_left));
|
|
|
+ var percentage;
|
|
|
+ if (state === "session") {
|
|
|
+ percentage = ((session_time - time_left) / session_time) * 100;
|
|
|
+ } else {
|
|
|
+ percentage = ((break_time - time_left) / break_time) * 100;
|
|
|
+ }
|
|
|
+
|
|
|
+ $("#progress-bar").css({
|
|
|
+ width: percentage + "%",
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+function fancyTime(seconds) {
|
|
|
+ var minutes = Math.floor(seconds / 60);
|
|
|
+ var remainder = seconds % 60;
|
|
|
+ if (minutes === 0) {
|
|
|
+ minutes = "0";
|
|
|
+ }
|
|
|
+ if (remainder === 0) {
|
|
|
+ remainder = "00";
|
|
|
+ }
|
|
|
+ if (remainder > 0 && remainder < 10) {
|
|
|
+ remainder = "0" + remainder;
|
|
|
+ }
|
|
|
+ return minutes + ":" + remainder;
|
|
|
+}
|
|
|
+
|
|
|
+function resetTimeLeft() {
|
|
|
+ if (state === "session") {
|
|
|
+ time_left = session_time;
|
|
|
+ } else {
|
|
|
+ time_left = break_time;
|
|
|
+ }
|
|
|
+ updateDisplay();
|
|
|
+}
|