hw2

[emworks]

Задача

https://github.com/two-devs-teaching/hse-web-programming-2025/blob/main/hw/hw-2-js/README.md

Что сделано

На главную страницу сервиса добавлена модалка по макету.

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

Демо

https://emworks.github.io/flickmate/feature/hw2/

Чеклист

• Задание: добавить интерактивность и динамическое поведение в вёрстку из первого задания, используя JavaScript. Превратить статичную страницу в настоящее веб-приложение.

Критерии выполненного задания:

• Используется динамическое создание и изменение DOM-элементов
• Данные хранятся в JavaScript-структурах (массивы, объекты)
• Есть обработка пользовательских событий (клики, отправка форм, ввод текста)
• Код организован в модули (ES modules)
• Приложение корректно работает и не выдаёт ошибок в консоли

Дополнительно (не было в задании):

• Вёрстка нового компонента – модалки – адаптирована под десктоп, планшет и мобильные устройства.
• Ранее добавленный posthtml-expressions удален, т.к. теперь рендерим списки через js.
• Добавлены подробные JS-доки.

[semyonbos]

Ревью для hw2:

Читаемость и понятность кода
Код структурирован по принципам MVC и DOM: отдельные файлы для моделей (movie-model.js), представлений (movie-list-view.js, base-view.js) и данных (movies.js), с подробными JSDoc-комментариями в BaseView. Семантические классы в CSS (movie-list, movie-item) и логичная иерархия файлов упрощают навигацию. Для ещё большей ясности можно добавить краткие комментарии в movies.js к массиву данных.

Отсутствие ошибок
Архитектура стабильна: clamp() для responsive текста, grid/flex layouts с медиа-запросами (1024px/600px) обеспечивают кросс-браузерность. Данные в movies.js используют внешние изображения, что круто. Можно добавить обработку ошибок загрузки img (onerror) и валидацию форм для полной надежности.

Модульность и переиспользуемость
Отличная модульность: BaseView как абстрактный класс для всех views, common.css с :root переменными (--color-bg, --spacing) для тем и размеров. Файлы CSS разделены по компонентам (movie-list.css, movie-modal.css). Можно расширить, вынеся утилиты (типа hover-эффектов) в utils.css для большего reuse.

Соответствие стандартам форматирования
Форматирование на высоте: консистентные отступы (2 пробела), алфавитный порядок свойств в CSS, ES6 модули в JS. Используется современный синтаксис (color-mix, :has()).

Соответствие требованиям задания
Проект полностью реализует SPA с каталогом фильмов, модальными окнами, поиском/фильтрами — типичный веб-дз по JS frameworks. Sticky header, темная тема и анимации (transition: 0.3s) добавляют polish. Можно добавить ARIA-атрибуты (role="dialog" для модалок) и lazy loading для img для доступности.

[emworks]

Ревью для hw2

Спасибо за ревью!

Рад, что модульная структура и организация кода выглядят понятно и читаемо. MVC – классический подход. Возможно, есть и более современные способы для организации кода на чистом JS.

Отмечу, что ряд комментариев относится к функциональности из первого задания (HTML/CSS). Эта часть уже проходила ревью, но повторное внимание к этим аспектам тоже полезно.

Отдельно уточню и те моменты, которые требуют дополнительного контекста относительно реализации.

Можно добавить обработку ошибок загрузки img (onerror)

В данном проекте изображения добавляются статически через HTML. Обычно обработка ошибок нужна при динамической подгрузке через JS – в рамках hw2 этого не используется.

и валидацию форм

В проекте нет форм и пользовательского ввода, поэтому валидация не требуется.

алфавитный порядок свойств в CSS

В CSS традиционно используется группировка логически связанных свойств (позиционирование, размеры, типографика и т.п.). Алфавитный порядок встречается редко и не является общепринятым стандартом.

Проект полностью реализует SPA

В текущем виде приложение не является SPA, так как не включает роутинг или переключение экранов. Это просто статическая страница с JS-логикой для модального окна.

поиском/фильтрами

Поиск и фильтры не были заявлены в требованиях/макете и не реализовывались в данной части проекта.

ARIA-атрибуты (role="dialog" для модалок)

Да, добавить role="dialog" и aria-modal="true" действительно стоит – спасибо за замечание, учту.

lazy loading для img

Lazy loading был реализован в hw1 через loading="lazy".

[lyaplyap]

Ревью дз по JavaScript

Общие комментарии

Хорошая работа, было приятно смотреть 👍

Соответствие критериям

• Используется динамическое создание и изменение DOM-элементов [ok]
• Данные хранятся в JavaScript-структурах (массивы, объекты) [ok]
• Есть обработка пользовательских событий (клики, отправка форм, ввод текста) [ok]
• Код организован в модули (ES modules) [ok]
• Приложение корректно работает и не выдаёт ошибок в консоли [ok]

Итого: 10