При верстке задания был использован CSS фреймворк Bootstrap 4. Использовал измененную версию сетки “bootstrap-grid.css”, так как в макете сетка 78px с отступами 24px. Решил использовать грид от Bootstrap, так как в реальных условиях для полного проекта его применение оправдано скоростью разработки и наличием flex-ов.
Таймер реализован на чистом JavaScript. Время отсчета (кол-во минут с которого начинается отсчет при первом посещении сайта) указывается как дата атрибут в index.html и передается в скрипт. Фиксация первого посещения осуществляется с помощью записи даты и времени в куки в формате timestamp.
Работа с куки реализована с применением js-cookie.js. Решил использовать js-cookie.js, так как размер библиотеки менее 4кб в несжатом виде, а ее использование в разы упрощает работу с куки, она не имеет зависимостей и есть поддержка браузерами.
По умолчанию цифры в таймере полупрозрачные. Если таймер на 15 минут, то цифры минут и секунд белые. После того, как минут не остается, цифры в поле становятся полупрозрачными, тоже касается и секунд. По истечении отсчета скрипт удаляет кнопку из дом дерева. Если первое посещение произошло ранее, чем величина таймера, кнопка удаляется сразу после загрузки страницы.
Для удобства проверки работоспособности таймера, вверху страницы добавлена кнопка очистки Cookies.
Срок жизни Cookie установлен на 30 дней.
Таймер установлен на 15 минут.