Дневник разработки: сайт-визитка. День 3

Статус на сегодня: вся разметка готова, кнопка переключения тёмной/светлой темы работает, все часто используемые значения вынесла в переменные (variables.css) — теперь менять цвета и отступы можно в одном месте. Все ссылки на кнопках (Telegram, почта, Сетка и т.д.) прикреплены, фото профиля и скрины учебных проектов загружены и отображаются. Иду по подходу десктоп-мобайл: сейчас готов десктоп, позже буду продумывать мобильный лэйаут и писать медиа-выражения.

А ещё сегодня переделала логику раскрытия карточек с проектами. Раньше они открывались по наведению (mouseenter/mouseleave), и при тестировании сама заметила неудобство: стоило увести курсор с кнопки — и карточки тут же сворачивались, рассмотреть их спокойно не получалось. Поменяла логику на обычный click и classList.toggle():

function toggle() { const isOpen = cardsContainer.classList.toggle('is-open'); trigger.classList.toggle('is-open'); if (hint) { hint.textContent = isOpen ? '( свернуть )' : '( нажми, чтобы посмотреть )'; } } trigger.addEventListener('click', toggle);

Теперь карточки открываются/закрываются только по клику, и текст подсказки меняется вместе с состоянием — пользователь сам решает, когда сворнуть блок, и ничего не убегает из-под курсора.

На завтра оставлю написание медиазапросов для мобильных устройств.

#pet_project #frontend #JavaScript #UX

Дневник разработки: сайт-визитка. День 3 | Сетка — социальная сеть от hh.ru
Дневник разработки: сайт-визитка. День 3 | Сетка — социальная сеть от hh.ru Дневник разработки: сайт-визитка. День 3 | Сетка — социальная сеть от hh.ru