script.js 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  1. var audio = new Audio(
  2. "http://oringz.com/oringz-uploads/sounds-1054-suppressed.mp3"
  3. );
  4. var state = "session";
  5. var time_left = 1500;
  6. var session_time = 1500;
  7. var break_time = 300;
  8. var running = false;
  9. var intervalTimer = 0;
  10. $(document).ready(function () {
  11. $("#pomodoro-clock").on("click", function () {
  12. running = !running;
  13. timer();
  14. });
  15. $(".clickable").on("click", function () {
  16. if (!running) {
  17. var id = $(this).attr("id");
  18. if (id === "session-plus") {
  19. session_time += 60;
  20. $("#session-display").text(fancyTime(session_time));
  21. resetTimeLeft();
  22. } else if (id === "session-minus") {
  23. session_time -= 60;
  24. $("#session-display").text(fancyTime(session_time));
  25. resetTimeLeft();
  26. } else if (id === "break-plus") {
  27. break_time += 60;
  28. $("#break-display").text(fancyTime(break_time));
  29. resetTimeLeft();
  30. } else if (id === "break-minus") {
  31. break_time -= 60;
  32. $("#break-display").text(fancyTime(break_time));
  33. resetTimeLeft();
  34. }
  35. }
  36. });
  37. });
  38. function timer() {
  39. clearInterval(intervalTimer);
  40. if (running) {
  41. intervalTimer = setInterval(function () {
  42. time_left--;
  43. if (time_left <= 0) {
  44. audio.play();
  45. if (state === "session") {
  46. time_left = break_time;
  47. state = "break";
  48. $("#state").text("Break");
  49. $("#progress-bar").removeClass("progress-bar-success");
  50. $("#progress-bar").addClass("progress-bar-danger");
  51. } else {
  52. time_left = session_time;
  53. state = "session";
  54. $("#state").text("Session");
  55. $("#progress-bar").addClass("progress-bar-success");
  56. $("#progress-bar").removeClass("progress-bar-danger");
  57. }
  58. }
  59. updateDisplay();
  60. }, 1000);
  61. }
  62. }
  63. function updateDisplay() {
  64. $("#timer").text(fancyTime(time_left));
  65. var percentage;
  66. if (state === "session") {
  67. percentage = ((session_time - time_left) / session_time) * 100;
  68. } else {
  69. percentage = ((break_time - time_left) / break_time) * 100;
  70. }
  71. $("#progress-bar").css({
  72. width: percentage + "%",
  73. });
  74. }
  75. function fancyTime(seconds) {
  76. var minutes = Math.floor(seconds / 60);
  77. var remainder = seconds % 60;
  78. if (minutes === 0) {
  79. minutes = "0";
  80. }
  81. if (remainder === 0) {
  82. remainder = "00";
  83. }
  84. if (remainder > 0 && remainder < 10) {
  85. remainder = "0" + remainder;
  86. }
  87. return minutes + ":" + remainder;
  88. }
  89. function resetTimeLeft() {
  90. if (state === "session") {
  91. time_left = session_time;
  92. } else {
  93. time_left = break_time;
  94. }
  95. updateDisplay();
  96. }