Skip to content

Instantly share code, notes, and snippets.

@ayoisaiah
Last active August 3, 2020 16:34
Show Gist options
  • Save ayoisaiah/375466555c89048bdc519b23bac11abe to your computer and use it in GitHub Desktop.
Save ayoisaiah/375466555c89048bdc519b23bac11abe to your computer and use it in GitHub Desktop.
Pomodoro Tutorial — Checkpoint 3
const timer = {
pomodoro: 25,
shortBreak: 5,
longBreak: 15,
longBreakInterval: 4,
};
let interval;
const mainButton = document.getElementById('js-btn');
mainButton.addEventListener('click', () => {
const { action } = mainButton.dataset;
if (action === 'start') {
startTimer();
} else {
stopTimer();
}
});
const modeButtons = document.querySelector('#js-mode-buttons');
modeButtons.addEventListener('click', handleMode);
function getRemainingTime(endTime) {
const currentTime = Date.parse(new Date());
const difference = endTime - currentTime;
const total = Number.parseInt(difference / 1000, 10);
const minutes = Number.parseInt((total / 60) % 60, 10);
const seconds = Number.parseInt(total % 60, 10);
return {
total,
minutes,
seconds,
};
}
function startTimer() {
let { total } = timer.remainingTime;
const endTime = Date.parse(new Date()) + total * 1000;
mainButton.dataset.action = 'stop';
mainButton.textContent = 'stop';
mainButton.classList.add('active');
interval = setInterval(function() {
timer.remainingTime = getRemainingTime(endTime);
updateClock();
total = timer.remainingTime.total;
if (total <= 0) {
clearInterval(interval);
}
}, 1000);
}
function stopTimer() {
clearInterval(interval);
mainButton.dataset.action = 'start';
mainButton.textContent = 'start';
mainButton.classList.remove('active');
}
function updateClock() {
const { remainingTime } = timer;
const minutes = `${remainingTime.minutes}`.padStart(2, '0');
const seconds = `${remainingTime.seconds}`.padStart(2, '0');
const min = document.getElementById('js-minutes');
const sec = document.getElementById('js-seconds');
min.textContent = minutes;
sec.textContent = seconds;
}
function switchMode(mode) {
timer.mode = mode;
timer.remainingTime = {
total: timer[mode] * 60,
minutes: timer[mode],
seconds: 0,
};
document
.querySelectorAll('button[data-mode]')
.forEach(e => e.classList.remove('active'));
document.querySelector(`[data-mode="${mode}"]`).classList.add('active');
document.body.style.backgroundColor = `var(--${mode})`;
updateClock();
}
function handleMode(event) {
const { mode } = event.target.dataset;
if (!mode) return;
switchMode(mode);
stopTimer();
}
document.addEventListener('DOMContentLoaded', () => {
switchMode('pomodoro');
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment