Проект 4: Место

Используемые технологии

Как запустить проект

1. Скачать проект себе

2. Установить зависимости npm i

3. Запустить проект через консоль npm run dev

Что было в этой проектной

Данная проектная работа представляет собой небольшой интерактивный сайт, с адаптивным дизайном и интеграцией JavaScript

Что было в этом курсе

Научились программировать на JavaScript

Поняли принципы работы с DOM, создали popup-окно, научились добавлять модификаторы с помощью JS

Что сделали нового

Теперь открытое окошко можно закрыть кликом в любом месте вне области формы, или кнопкой Escape

Помимо этого вы больше не сможете внести некорретные данные - добавлена валидация полей ввода

Что включает в себя валидация полей:

1. проверка длинны
2. проверка вводимых данных -- если url - придется ввести url
3. подсветка неверно введенных полей
4. активация/деактивация кнопки

Что еще сделали нового

Добавили ООП.

Работа с карточками теперь происходит внутри класса Card, а валидация внутри класса FormValidation.

На данном этапе работа заключалась в рефакторинге. Код становится более удобоваримым и читабельным.

Проектная №8

Больше ООП. Теперь мы знаем как не потерять контекст, умеем биндить this, если это надо.

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

Научились настраивать вебпак и поднимать локальный сервер. Что, кстати не умеет делать добрая часть опытных (?) разработчиков.

Ссылка на ghPages

https://paramore21.github.io/mesto/