silkdemon/frontend-school

Вся домашки в одном месте

Установка и запуск сервера

0. Установить git*

   * - при работе с git

1. Установить nodejs

2. Клонировать репозиторий:

   • Скачать проект (для работы без git)
   • Клонировать проект

3. Перейти в каталог demo/server:

   cd ./server

4. Установить зависимости:

   npm install

5. Запустить сервер:

   npm start

6. Замените index.html и css/style.css на свои, сделанные в модуле по верстке:

7. Открыть в браузере http://localhost:3000/

Домашка 1: Делаем mock (рандомные данные)

0. В папке js создайте файл mock.js и подключите его к вашему html файлу как модуль (module)

1. напишите функцию возвращающую случайное булевое значение

2. напишите функцию возвращающую случайную дату

3. напишите функцию возвращающую случайное целое число в диапазоне от min до max

4. напишите функцию возвращающую случайную строчку из набора

   'Веницианский карнавал танцев и богохульных плясок: смотрим вместе',
   'Солнцестоим вместе или как провести выходные продуктивно',
   'Бредовые макеты и как с ним работать: спитч о проблемах друзей-фронтендеров',
   'Аукцион: лоснящаяся шкура золотого дракона Монина. Что скрывается в повале офиса Нагатино?',
   'К посещению приглашаются сотрудники 18-',
   'Если вы люите солнце и стоять - то данный курс вам очень подойдет. Мы вместе будем стоять и смотреть на солнце. Чистый кайф.',
   'Что делать если в дизайне, который вам отправил дизайнер написаны бредовые тексты? Посмеяться?! Это что для вас шуточки?!',
   'Если у вас еще осталась зарплата - приходите, мы будем рады ее забрать'
   

5. напишите функцию возвращающую случайное комбинацию имени из набора

   имена: 'Петр', 'Василий', 'Николай', 'Олег', 'Павел'
   фамилии: 'Иванов', 'Петров', 'Гагарин', 'Сюткин', 'Грозный'
   

6. напишите функцию возвращающую объект (event) с полями

   date - случайная дата,
   title - случайный текст,
   description - случайный текст,
   countLikes - случайное число,
   names - случайное Имя Фамилия,
   registrationDisabled - случайное булевое значение
   

7. напишите функцию возвращающую массив с 10 событиями

8. выведите в консоль результат выполнения функции

Домашка 2: Получаем данные с сервера

0. В папке js создайте файл getData.js и подключите его к вашему html файлу как модуль (module)

1. Напишите GET запрос получения данных с сервера /data

2. выведите массив с данными в консоль

3. Добавьте функции параметр callback

4. После получения данных, если callback был передан вызовите его с полученными данными

Домашка 3: Работаем с DOM

0. В папке js создайте файл renderList.js и подключите модулем

1. Напишите функцию отрисовки данных в таблице

2. Передайте в метод getData в качестве callback renderList

3. В папке js создайте файл popup.js и подключите модулем

4. Напишите функцию открытия попапа

5. Напишите функции закрытия поппа по нажатию на крестик или esc

6. При создании кнопки "Зарегистрироваться" добавьте слушатель на клик для открытия попапа

Дополнительно:

Домашка 4: Настраиваем сборку

0. Установите пакеты eslint, webpack, webpack-cli, webpack-dev-server

1. Создайте файл webpack.config.js

2. Добавьте конфигурацию сборки

3. Добавьте конфигурацию для dev server'а

4. Добавьте скрипты для линтера, сборки и запуска dev server'а

Домашка 5: Создаем класс Api

0. В папке js создайте файл api.js и подключите модулем

1. Напишите класс с методами CRUD для отправления соответствующих запросов на сервер