от Синтии Ли

Я начал свое путешествие freeCodeCamp в декабре 2017 года и мне не хватает двух проектов, чтобы получить сертификат Front-End Development. Эта публикация документирует мой процесс завершения проекта Pomodoro Clock.

Что такое часы Pomodoro?

Техника Pomodoro – это система управления временем, которая так же проста, как и эффективна: вы используете таймер, чтобы разбить свою работу на временные блоки (обычно по 25 минут), разделенные 5-минутным перерывом. После каждые 4 помодоров можно сделать больший перерыв.

Мне пришлось выполнить следующие истории пользователей:

• Я могу запустить 25-минутный помодор, и таймер выключится, когда пройдет 25 минут.
• Я могу сбросить часы для своего следующего помодора.
• Я могу настроить длину каждого помодора.

Дизайн / верстка

Мой принцип дизайна состоит в том, чтобы пользовательский интерфейс был чистым и простым. Мне понравилась идея использовать помидор в качестве таймера. Имеется дисплей работы/перерыва, обратный отсчет таймера и кнопка воспроизведения/паузы.

Под таймером у меня была настройка для изменения продолжительности работы и перерыва, а также кнопка сброса.

Проблемы с макетом, с которыми я столкнулся

У меня возникли большие проблемы с размещением помидора на фоне под другими элементами. Как бы я хотел, чтобы был вариант макета, который я мог бы выбрать! ?

Одно из предложений, которое я нашел, заключалось в том, чтобы сохранить изображение помидора на желаемом цвете фона как новое изображение, а затем использовать это изображение в фоновом режиме. Недостатком этого было то, что он стал выглядеть шатким, когда я проверил чувствительность макета.

В конце концов мне удалось правильно совместить absolute positioningменяя top и left проценты, и transform.

#status {  position: absolute;  top: 45%;  left:50%;  transform: translate(-50%, -50%);}

.timerDisplay {  position: absolute;  top: 60%;  left: 50%;  transform: translate(-50%, -50%);}

#start-btn {  position: absolute;  bottom: 8%;  left: 48%;  transform: translate(-50%, -50%);}

Нижние настройки были достаточно простыми. Я использовал CSS Grid, чтобы разделить компоненты на три столбца, причем средний столбец имел половину ширины наружных столбцов.

.settings {  margin: auto;  width: 80%;  display: grid;  grid-template-columns: 2fr 1fr 2fr;  align-items: center;}

Еще раз воспользовался transform чтобы переместить кнопку сброса для лучшего выравнивания.

Структурирую мой код, а затем разрываю его на части

Я считаю полезным придумать структуру своего кода, если я разбив требования:

• Таймер будет переключаться между запуском и паузой при нажатии кнопки «Пуск».
• Когда таймер достигнет нуля, сработает сигнал.
• После рабочего сеанса всегда идет перерыв.
• Продолжительность работы и перерывы можно изменять.
• Кнопка «сбросить» (как вы догадались) сбросит таймер.

Раньше я закончил часы обратного отсчета на курсе Wes Bos JavaScript30, поэтому я знал, что могу использовать setInterval метод. Я также решил испытать себя, соблюдая ванильный JavaScript и не полагаясь на jQuery.

И потому я начал писать свой код JavaScript. Хотя мне удалось создать функциональные часы pomodoro, я не буду рассматривать первую версию своего кода здесь. Это потому, что я внес в него значительные изменения после получения конструктивного отклика от чудесного незнакомца Reddit. ?

Да, на Reddit попадаются приятные вещи!

Основными моментами отклика были:

• setInterval(timer, 1000) Для запуска требуется не менее 1000 мс, но может потребоваться больше времени. Поэтому вам следует проверить, сколько времени на самом деле прошло, иначе ваши часы могут быть неточными.
• Сгруппируйте все обновления HTML в одном разделе, поскольку это облегчит обновление и настройку кода.
• В общем, это хорошая идея создавать код, вообще не думая о представлении.
• Убедитесь в логике таймера и избавьтесь от ненужного кода.
• Убедитесь, что названия переменных описательны. При необходимости оставляйте комментарии.

Вы можете посмотреть мой первый коммит на GitHub.

Рефакторинг моего кода

Получив ценные отзывы, я несколько раз переработал свой код, пока он меня не удовлетворил.

Сначала я определил все переменные. Поскольку я не использовал jQuery, я убедился, что захватил все свои элементы с помощью document.querySelector.

let countdown = 0; // variable to set/clear intervalslet seconds = 1500; // seconds left on the clocklet workTime = 25;let breakTime = 5;let isBreak = true;let isPaused = true;

const status = document.querySelector("#status");const timerDisplay = document.querySelector(".timerDisplay");const startBtn = document.querySelector("#start-btn");const resetBtn = document.querySelector("#reset");const workMin = document.querySelector("#work-min");const breakMin = document.querySelector("#break-min");

Далее я создал аудиоэлемент.

const alarm = document.createElement('audio'); alarm.setAttribute("src", "https://www.soundjay.com/misc/sounds/bell-ringing-05.mp3");

После нажатия кнопки «Пуск» интервал очищается. Новый интервал устанавливается, если isPaused изменения от правда к ошибочный.

Кнопка «сбросить» очищает интервал и сбрасывает переменные.

startBtn.addEventListener('click', () => {  clearInterval(countdown);  isPaused = !isPaused;  if (!isPaused) {    countdown = setInterval(timer, 1000);  }})

resetBtn.addEventListener('click', () => {  clearInterval(countdown);  seconds = workTime * 60;  countdown = 0;  isPaused = true;  isBreak = true;})

The функция таймера здесь происходит магия обратного отсчета. Из него вычитается одна секунда секунд. Если секунд; 0, воспроизводится будильник, и функция определяет, следует ли следующий обратный отсчет быть рабочим сеансом или сеансом перерыва.

function timer() {  seconds --;  if (seconds < 0) {    clearInterval(countdown);    alarm.currentTime = 0;    alarm.play();    seconds = (isBreak ? breakTime : workTime) * 60;    isBreak = !isBreak;  }}

Теперь пора поработать над кнопками +/- для продолжительности работы и перерыва. Сначала я создал onclick функция каждой кнопки. Несмотря на то, что он был функциональным, безусловно, было место для усовершенствования.

document.querySelector("#work-plus").onclick = function() {         workDuration < 60 ? workDuration += increment : workDuration;                   }document.querySelector("#work-minus").onclick = function() {         workDuration > 5 ? workDuration -= increment : workDuration;              }document.querySelector("#break-plus").onclick = function() {     breakDuration < 60 ? breakDuration += increment : breakDuration;                     }document.querySelector("#break-minus").onclick = function() {        breakDuration > 5 ? breakDuration -= increment : breakDuration;                  }

Тот же Redditor предложил мне использовать ассоциативный массив, который, по сути, является набором пар ключ-значения.

let incrementFunctions =    {"#work-plus": function () { workTime = Math.min(workTime + increment, 60)},     "#work-minus": function () { workTime = Math.max(workTime - increment, 5)},     "#break-plus": function () { breakTime = Math.min(breakTime + increment, 60)},     "#break-minus": function () { breakTime = Math.max(breakTime - increment, 5)}};

for (var key in incrementFunctions) {    if (incrementFunctions.hasOwnProperty(key)) {      document.querySelector(key).onclick = incrementFunctions[key];    }}

Пора обновить HTML!

Я создал функции для обновления дисплея обратного отсчета и кнопок и включил эти функции в общую функцию, которая также обновила статус и продолжительность работы/перерыва.

Наконец-то я использовал document.onclick запустить функция updateHTML каждый раз, когда пользователь нажимает на страницу. Я также использовал window.setInterval запускать функцию 10 раз в секунду.

function countdownDisplay() {  let minutes = Math.floor(seconds / 60);  let remainderSeconds = seconds % 60;  timerDisplay.textContent = `${minutes}:${remainderSeconds < 10 ? '0' : ''}${remainderSeconds}`;}

function buttonDisplay() {  if (isPaused && countdown === 0) {    startBtn.textContent = "START";  } else if (isPaused && countdown !== 0) {    startBtn.textContent = "Continue";   } else {    startBtn.textContent = "Pause";  }}

function updateHTML() {  countdownDisplay();  buttonDisplay();  isBreak ? status.textContent = "Keep Working" : status.textContent = "Take a Break!";  workMin.textContent = workTime;  breakMin.textContent = breakTime;}

window.setInterval(updateHTML, 100);

document.onclick = updateHTML;

И это результат моего проекта!

Вы можете просмотреть мой окончательный проект здесь.

Последние мнения

Мой наибольший вывод из этого проекта заключается в том, что я должен стремиться к простоте с точки зрения дизайна кода, поскольку это предпосылка для надежности. Это сделает мой код легким для понимания, легкой настройки и легкого обновления.

Мне также напоминают о преимуществах парного программирования и просмотра кода, особенно если вы новичок в программировании.

Надо еще многому научиться. Но пока позвольте мне вознаградить себя тарелкой Pasta al pomodoro.