AtkishkinVlad / tinkoff-movie-rental

Практика по работе с DOM

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Tinkoff Movie Rental

Приложение-демонстрация различных способов работы с DOM.

Запуск

npm install && npm run start

Ветки

Переключение на ветку делается командой git branch название-ветки

00-initial

Только верстка. Никакого JS.

01-hardcore

Добавлен json с данными фильмов. В src/index.js добавлена функция, рендерящая фильмы. Функция напрямую манипулирует DOM, выглядит громоздко, и абсолютно неподдерживаемая.

02-innerHTML

Функция render переписана на работу с innerHTML. Выглядит проще, но при работе с innerHTML нужно помнить о двух вещах: безопасности и производительности.

03-template

innerHTML заменен на работу с тегом template. Его содержимое можно клонировать и переиспользовать.

04-year-component

Добавлен пример веб-компонента (src/components/currentYear.js).

05-shadow-dom

Компонент currentYear.js переведен на работу с shadow DOM.

06-movie-component

Создан компонент movieCard (src/components/movieCard.js). Функция render переведена на работу с ним.

07-form-submit

Добавлена обработка события submit в src/index.js

08-state-manager

Приложение переведено на MVVM-архитектуру, логика разделена на несколько слоёв.

09-search-list

Добавлено сохранение запросов.

10-final (так же main)

Финальная версия приложения.

About

Практика по работе с DOM


Languages

Language:JavaScript 75.2%Language:CSS 16.3%Language:HTML 8.6%