diff --git a/README.md b/README.md index ef4e7c2..2f103ce 100644 --- a/README.md +++ b/README.md @@ -496,6 +496,19 @@ In order to run this project you need: +
  • +
    +Pomodoro Timer +

    The Productivity Timer (Pomodoro Timer) is a simple yet effective timer application based on the Pomodoro technique. It helps users stay productive by alternating between focus intervals (e.g., 5 minutes) and short breaks (e.g., 2 minutes). The app provides visual cues through animations and sound alerts to signal transitions between focus and break periods. + +

    + +
    +
    • +

    (back to top)

    diff --git a/Source-Code/PomodoroTimer/index.html b/Source-Code/PomodoroTimer/index.html new file mode 100644 index 0000000..e228a97 --- /dev/null +++ b/Source-Code/PomodoroTimer/index.html @@ -0,0 +1,23 @@ + + + + + + Productivity Timer + + + +
    +

    Productivity Timer

    +
    + 25:00 +
    +
    + + +
    +

    Focus Session

    +
    + + + diff --git a/Source-Code/PomodoroTimer/script.js b/Source-Code/PomodoroTimer/script.js new file mode 100644 index 0000000..c7295e1 --- /dev/null +++ b/Source-Code/PomodoroTimer/script.js @@ -0,0 +1,54 @@ +const startBtn = document.getElementById('start-btn'); +const resetBtn = document.getElementById('reset-btn'); +const minutesDisplay = document.getElementById('minutes'); +const secondsDisplay = document.getElementById('seconds'); +const statusDisplay = document.getElementById('status'); + +let timerInterval; +let isFocusSession = true; // Start with a focus session +const focusTime = 5 * 60; // 5 minutes in seconds +const breakTime = 5 * 60; // 5 minutes in seconds +let timeRemaining = focusTime; + +const updateDisplay = () => { + const minutes = Math.floor(timeRemaining / 60); + const seconds = timeRemaining % 60; + minutesDisplay.textContent = String(minutes).padStart(2, '0'); + secondsDisplay.textContent = String(seconds).padStart(2, '0'); +}; + +const toggleSession = () => { + isFocusSession = !isFocusSession; + timeRemaining = isFocusSession ? focusTime : breakTime; + statusDisplay.textContent = isFocusSession + ? 'Focus Session' + : 'Break Session'; + updateDisplay(); +}; + +const startTimer = () => { + if (timerInterval) return; // Prevent multiple intervals + timerInterval = setInterval(() => { + if (timeRemaining > 0) { + timeRemaining -= 1; + updateDisplay(); + } else { + clearInterval(timerInterval); + timerInterval = null; + toggleSession(); + } + }, 1000); +}; + +const resetTimer = () => { + clearInterval(timerInterval); + timerInterval = null; + timeRemaining = isFocusSession ? focusTime : breakTime; + updateDisplay(); +}; + +startBtn.addEventListener('click', startTimer); +resetBtn.addEventListener('click', resetTimer); + +// Initialize display +updateDisplay(); diff --git a/Source-Code/PomodoroTimer/style.css b/Source-Code/PomodoroTimer/style.css new file mode 100644 index 0000000..0d2d44d --- /dev/null +++ b/Source-Code/PomodoroTimer/style.css @@ -0,0 +1,51 @@ +body { + font-family: Arial, sans-serif; + background-color: #f0f4f8; + color: #333; + text-align: center; + margin: 0; + padding: 0; +} + +.container { + max-width: 400px; + margin: 100px auto; + padding: 20px; + background: #fff; + border-radius: 10px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +} + +h1 { + margin-bottom: 20px; +} + +.timer-display { + font-size: 3rem; + margin: 20px 0; +} + +.controls button { + font-size: 1rem; + padding: 10px 20px; + margin: 5px; + border: none; + border-radius: 5px; + cursor: pointer; +} + +#start-btn { + background-color: #28a745; + color: white; +} + +#reset-btn { + background-color: #dc3545; + color: white; +} + +#status { + font-size: 1.2rem; + margin-top: 20px; + color: #555; +}