Ціль:

Потрібно створити гру, в якій є головний герой-квадрат і гравцю потрібно натискати клавіші з екрану, щоб квадрат збільшувався і набирав очки.

Основне завдання:

Правила:

• гра починається з 100 очків;
• на екрані з'являється клавіша, яку потрібно натиснути;
• на натиснення на клавішу у гравця є 2 секунди;
• якщо юзер натискає вірну клавішу, до рахунку додається від 5 до 10 очків;
• якщо юзер натискає не вірно клавішу, віднімається від 20 до 25 очків;
• якщо рахунок менше 0 очків, гравець програв;
• якщо рахунок більше 200 очків, гравець виграв.

Ігровий процесс:

• при кожній зміні рахунку (додається або віднімається), гравець повинен бачити як змінився його рахунок збоку від квадрату. Повиннен з'являтись блок, в якому буде відображатись на яке значення змінився рахунок (+10, +8, -25);
• використовувати тільки англійський алфавіт;
• кожна клавіша повинна бути в верхньому регістрі (A, B, T, S...);
• гра повинна реагувати як на клавішу в верхньому регістрі (S), так і в нижньому (s).

Технічна сторона:

• засетапити webpack, додати в нього можливість використовувати typesciprt;
• typescript, який буде компілюватись в нативний javascript проект;
• зробити класс Game, який в собі буде мати всі змінні та методи, потрібні для гри;
• кожен лісенер та перемінна мають мати визначений тип (string, number, interface, enum).

Завдання з зірочкою:

• додати кнопки із стартом, кінцем, та перезапуском гри;
• якщо юзер не натискає клавішу, віднімається від 10 до 15 очків;
• при кожній зміні рахунку, квадрат гравця повинен реагувати на зміни (збільшуватись, зменшуватись);
• повинен відображатись прогресс бар під клавішою скільки залишилось часу;

Корисні матеріали:

https://webpack.js.org/guides/typescript/
https://learn.javascript.ru/dom-nodes
https://www.w3schools.com/howto/howto_js_progressbar.asp

Презентація: https://drive.google.com/file/d/1hb2VwjC8prpSmdcQPbs9maocznr2A1tN/view?usp=sharing
DEMO завдання: https://drive.google.com/file/d/1RIbZjdWb8bEZBAC4wn7sM48cLUkbiNtk/view?usp=sharing

Ви можете юзати цей леяут для спрощення розробки:

const scoreElement = document.querySelector('[data-score]') as HTMLHeadingElement;
const cubeElement = document.querySelector('[data-cube]') as HTMLDivElement;
const cubeScoreElement = document.querySelector('[data-cube-score]') as HTMLDivElement;
const keyElement = document.querySelector('[data-key]') as HTMLDivElement;
const progressBarElement = document.querySelector('[data-progress-bar]') as HTMLDivElement;

class Game {
  private score: number = 100;
  private currentKey: string = '';
  private interval: number = 2000;

  constructor(
    private scoreElement: HTMLHeadingElement,
    private cubeScoreElement: HTMLDivElement,
    private keyElement: HTMLDivElement,
    private cubeElement?: HTMLDivElement,
    private progressBarElement?: HTMLDivElement,
  ) {}

  start() {
    // code...
  }

  private startKeysInterval() {
    // code...
  }

  private setScore(score: number) {
    // code...
  }

  private setKey(key: string) {
    // code...
  }

  private addScore(score: number) {
    // code...
  }

  private subscribeOnKeyPress() {
    // code...
  }
}

const game = new Game(scoreElement, cubeScoreElement, keyElement, cubeElement, progressBarElement);

game.start();

Полезные материалы

0. Ссылка на презентацию по доступности с прошлого года (в конце полезные ссылки)
   https://docs.google.com/presentation/d/1E_9ZeVe1zpE-wpKpu7ct5smVpw91QRO_W2TGDMw52LQ/edit
1. Хороший сайт на котором можно почитать что означает и в каких случаях использовать тот или инной HTML tag
   http://html5doctor.com/
2. Людоедский интерфейс, Вадим Макеев
   https://www.youtube.com/watch?v=ssJsjGZE2sc
3. Семантика для циников, Вадим Макеев
   https://www.youtube.com/watch?v=W5DgVWtitjQ

Назва папки та гілки 13-ng-forms

Завдання

1. Створити логін сторінку використовуючи реактивні форми
2. На сторінці обов'язково має бути поля для вводу пошти, пароля та чекбокс remember me
3. При сабміті форми має показуватися алерт з введеною поштою та паролем
4. Має реалізована валідація полів пошти та пароля
5. якщо був поставлений чекбокс remember me то стан форми має збегіратися в localstorage та підставлятися як початковий при наступному відкритті сторінки. Став форми в localstorage має бути обов'язково закодований у формат Base64

Завдання з зірочкою

6. контроли форми потрібно реалізувати через кастомні контроли ангуляра
7. в кожного контрола має бути параметр для відображення лейбли та помилок
8. в контрола пароля має бути можливість змінювати видимість тексту в інпуті (кнопочка з оком)

Дедлайни

• Подача пулл рекеста до 17.01.2021 23:59 (неділя)
• Дедлайн на внесення всіх правок до 20.01.2021 23:59 (середа)

Лінки:
https://angular.io/guide/reactive-forms
https://angular.io/guide/form-validation
https://www.digitalocean.com/community/tutorials/angular-custom-form-control

назва гілки/папки: 12-httpclient

Завдання:

HttpClient part:

• Відображати юзерів в вигляді карточок. В карточці відображати аватар, ім'я, прізвище і емейл юзера.
• Повинно бути дві карточки на сторінку (цього можна добитись добавивши параметр до url, щоб дізнатись який саме параметр треба використовувати, потрібно ознайомитись з апішкою)
• Витягувати юзерів звідси: https://reqres.in/api/users
• Добавити пагінацію
• При клікові на номер сторінки в пагінації, повинен відправлятись запит, який буде витягувати юзерів для цієї сторінки
  

Interceptor part:

• Промодифікувати існуючий Accept-Language хедер і добавити якийсь свій
• Добавити лоудер, який буде показуватись поки дані не прийшли, і змінювати його стан в інтерсепторі

Завдання з зірочкою:

Давати змогу змінювати кількість карточок за сторінку (можна через дропдаун, або будь яким іншим, зручним для вас способом)

Дедлайни:

На подачу пул реквеста до: 04.01.2021 23:59:59
Додатковий бал надається за завдання здане до: 04.01.2021 12:00
На роботу над помилками до: 08.01.2021 23:59:59

Додаткова інформація:

Presentation:
https://drive.google.com/file/d/1cUcEARHNknt0cE5dPcf5uuoShqDUfd1r/view?usp=sharing

Code:
https://github.com/AlexKuskov/httpclient-interceptors

Video recording:
https://drive.google.com/file/d/1-4oaO3o4g9VoREv9G3Xoc-iTs8GPWE8c/view?usp=sharing

Consumer journey

Название папки и ветки 14-modules-routing

Задание

Создать на ангуларе веб-приложение, которое будет состоять из 3-х страниц /home, /account, /accessories. Каждая страница должна быть реализована отдельным модулем и содержать как минимум один собственный компонет. Контент компонентов модуля может быть любой, хоть lorem ipsum. Создать shared модуль, который будет предоставлять компонент панели навигации со ссылками на все три страницы. Этот компонент нужно заюзать на всех страницах, чтобы у пользователя была возможность перемещаться по сайту. Цель проекта - отследить путешествие пользователя и при успешном завершении вывести эту информацию в консоль браузера. То есть если юзер совершает переходы между страницами в определенном порядке - вывести об этом сообщение в консоль. Решение должно быть универсальным и уметь обрабатывать любой порядок переходов(не должно сломаться, если добавится новый объект с путями). Данные о последовательностях перемещений и сообщения в консоль брать из такого объекта:

  [
    {
      message: 'User tends to home',
      journey: ['/home', '/account', '/home']
    },
    {
      message: 'User tends to account',
      journey: ['/account', '/home', '/account']
    },
    {
      message: 'User loves journeys',
      journey: ['/home', '/account', '/accessories']
    }
  ]

Таким образом, если юзер последовательно попадает на страницы '/home', '/account', '/home' - вывести в консоль сообщение User tends to home После вывода сообщения в консоль история должна начаться сначала.

При первом неправильном переходе история переходов должна обнулиться и начаться заново с этого роута. То есть нужно учитывать только переходы, представленные в объекте. Для проверки переходов использовать guard типа CanActivate (это будет нетипичное его использование, но для тренировки пойдет). Сама логика сравнения переходов может быть вынесена в сервис.

Дедлайн подачи пулл-риквеста - 23:59 24.01.2020г.

Полезные ссылки:

https://angular.io/guide/router

https://angular.io/guide/ngmodules

Code: https://github.com/powerbot15/routing-modules

Ветка для домашней работы должна называться 4-modules
Папка для домашней работы должна называться 4-modules

Задание

Создать модуль time.js предоставляющий следующие методы (вам необходимо реализовать логику этих методов)

/**
 * @param date - date string of any supported format
 * @returns array of Friday dates in a month the date from
 */
export function getFridaysOfMonth (date) {
    return [6, 13, 20, 27];
}

/**
 * @param date - date string of any supported format
 * @returns {boolean} true if month of a date has 31 day, otherwise returns false
 */
export function isMonthLong (date) {
    return true;
}

/**
 * @param date - date string of any supported format
 * @returns {number} number of days in a shortest week of the date month
 */
export function shortestWeekDaysNumber (date) {
    return 1;
}

/**
 * @param date - date string of any supported format
 * @returns {number} number of full weeks in the date month. To be full, week should start and end in the same month
 */
export function fullWeeksNumberInMonth (date) {
    return 4;
}

*Возвращаемые значения функций взяты для текущего месяца, 11.2020г.

Создать веб страничку, использующую модуль time для получения информации про введенную дату. Примерный мокап страницы:

Юзер вводит в инпут валидную строку даты и нажимает на кнопки. Код страницы вызывает соответствующие методы модуля и выводит полученные ответы текстом под кнопками.

Задание со звездочкой
Добавить в модуль два метода с реализацией

/**
 *
 * @param date - Date object or a date string of any supported format
 * @param hours - number of hours to subtract
 * @returns {Date} resultDate: date - hours 
 */
export function subtractHours(date, hours) {
    return resultDate;
}

/**
 *
 * @param date - Date object or a date string of any supported format
 * @param hours - number of hours to add
 * @returns {Date} resultDate: date + hours
 */
export function addHours(date, hours) {
    return resultDate;
}

и добавить область на страницу, отмеченную на мокапе звездочкой. Показывать текущее время нашего часового пояса и реализовать показ времени выбранного города из дропдауна.

Дедлайн подачи пулл-риквеста - 14.11.2020 23:59. Не забываем добавлять в описание пулл-риквеста ссылку на гитхаб пейджес

Відображення списку машин

Потрібно взяти готовий масив машин (далі по ішью) та створити на основі нього список.

Умови

Список повинен бути з таких полів:

Правила:

• отримання моку транспортів повинно бути виключно із сервісу, з поверненням Observable, який пендиться 2 сек.;
• потрібно додати лоадер, поки список завантажується;
• в компоненті не повинно бути ніяких трансформ методів, темплейт повинен бути простий без великих виразів ({{ vehicle.manufacturer }} - {{ vehicle.model }} ({{ vehicle.fuel }}) в темплейті не зрозуміло). Використовуйте пайпи;
• якщо протокол http, поле Added from повинно горіти червоним. Використовуйте директиву;
• Price потрібно відображати за рахунок вбудованого в Angular CurrencyPipe

Список машин

Список машин можна взяти із цього коміту.
Додатково потрібно встановити два модуля собі в проект:
npm i faker @types/faker

Завдання із зірочкою

Якщо поле Added from дорівняє https, весь ряд повинен бути клікабельним і переводити на сторінку
https://www.google.com/search?q={{ vehicle.vehicle }}, де {{ vehicle.vehicle }} - поле з обьекту.

Якщо поле дорівнює http, не дозволяти юзеру натиснути на нього.

URL потрібно правильно заенкодити. Енкодінг робити виключно наданими JS способами.
Простий приклад енкодінгу:

Корисне:

Гілка: 11-dependency-injection
Презентація
Відео до ютуба
Код з лекції

Дедлайн на здачу домашки: 07.11 23:59
Дедлайн на виправлення помилок: 11.11 23:59

Завдання:

1. Створити апп який буде зтягувати пости через апішку
2. Перед тим як буде відправлено запит на пости, додати таймаут в 3 секунди перед відправленням запиту
3. При відкритті сторінки показувати лоудінг та ховати його після завантаження постів
4. Відмалювати список постів відповідно до прикріпленого макету
5. Добавити сортування та фільтр по тайтлу для постів які були зрендерені.
   5.1 Сортування має 3 опції:
   a. Початковий варіант (без застосування сортування)
   b. Сортування від A до Z
   c. Сортування від Z до A
   5.2 В поле фільтру при введенні тексту, показуються тільки ті пости чиї тайтли співпадають з текстом (співпадання не case-sensitive)
   Наприклад: текст "ed T" буде залишати пости з тайтлами "red text", "rED T"
   5.3 Сортування та фільтр повинні працювати комбіновано, тобто при відображженні результатів пошуку, до них повинно бути застосоване обране сортування.

Завдання з зірочкою:
Добавити Delete значок до кожного посту, при клікові на який, буде

1. Тимчасово приховуватись пост
2. Відсилатись запит на видалення елементу.
3. Коли буде приходити респонс від сервера, відображати повідомлення що елемент був видалений якщо запит виконався успішно
4. Якщо повернеться помилка, показувати повідомлення "Something went wrong", і повертати пост назад

Назва папки та гілки з завданням: 3-async
Місце куди слати запит, для того щоб отримати пости: https://jsonplaceholder.typicode.com/posts
Як працювати з апішкою можете ознайомитись тут: https://jsonplaceholder.typicode.com/

Додаткові матеріали:
Детальніше про колбек хел: http://callbackhell.com/
Concurrency model and the event loop: https://www.youtube.com/watch?v=8aGhZQkoFbQ&ab_channel=JSConf
Тут можна інтерактивно подивитись як працює event loop: http://latentflip.com/loupe/
Метод за допомогою якого можна слати запити на бекенд: https://learn.javascript.ru/fetch
Чому async function краще аніж звичайні проміси: https://dev.to/gafi/7-reasons-to-always-use-async-await-over-plain-promises-tutorial-4ej9?ref=hackernoon.com

Шаблон:

Всем привет )

Задание:

1. Макет на верстку смотреть тут
2. Создать папку с домашкой 9-layouts. Внутри должно быть 2 папки (flexbox, grid)
3. Сделать верстку отдельно на flexbox
4. Сделать верстку отдельно на grid
5. Ширина макета 1600рх
6. Мобильный вид простой:
   6.1 первая секция навигацию спрятать на мобильном, текст пусть уменьшится что бы влез в любой размер экрана
   6.2 Эти карточки разместить по 2 в ряд на меньшем экране
   
   6.3 Эти карточки друг под друга
   
   6.4 Эти секции по 2 в ряд
   

Дисклеймер:

• не используйте CSS фреймворки, все пишите ручками (можете брать какие то куски кода, но весь фреймворк тащить ненужно)
• пож не обращайтесь к атрибутам и айдишникам в верстке
• hover елементов сделайте Черным цветом
• шрифты можете использовать любые или тот что в макете. Тут бесплатные https://fonts.google.com/
• картинки можете взять отсюда https://unsplash.com/
• иконки с макета скопируете
• если не хватает времени, сделайте верстку только на флексах или только на гридах

0. Зарегистрироваться в github. Если у вас есть аккаунт можете пропускать этот пункт.
1. Форкнуть репозиторий
2. Склонировать себе репозиторий
3. Создать новую ветку в истории с названием 1-intro
4. Внутри папки homeworks создать папку по шаблону name.surname_githubUsername
5. В этой папке создать папку для первой домашки - 1-intro
   5.1 Установить nodejs последней версии от (Latest LTS Version: 12.19.0) и выше. Лучше всего устанавливать nodejs используя nvm.
   5.2 Проверить версию npm, она должна быть 6.14.8 или выше
6. В папке 1-intro, создать README.md, в него записать версии с консоли node -v и npm --version
7. В папке 1-intro выполнить в консоле npm init
8. Сделать pull request в главный репозиторий Masters Academy

Что бы мы без проблем приняли вашу работу:

1. Для установки и найстройки Git у себя на компьютере пройдите весь 1 раздел
2. Создавайте папки, файлы у себя на компьютере, а не через github веб интерфейс
3. Проверяйте в консоли git status, перед тем как делать git commit, что бы там были добавлены только те файлы которые вы создавали.
4. Для каждой роботы должна быть создана своя ветка. Как базовую ветку нужно использовать master и от нее всегда делать другие ветки. Так же важно не забывать перед созданием новой ветки обновить ветку master

Useful links

• Setup git
• Setup git2
• Try Git
• Git book
• Nodejs
• Npm docs
  --------------------------------------------
  Инструметы для Front-end разработки

Git GUI clients:

Win/macOS
https://www.sourcetreeapp.com/
https://desktop.github.com/
macOS
https://www.git-tower.com/mac/
Cross platform
https://www.gitkraken.com/
https://www.sublimemerge.com/

Git cheatsheet:

http://ohshitgit.com/

Terminals:

Cross platform
https://hyper.is/
Linux
http://guake-project.org/
macOS
https://www.iterm2.com/

Text editors/IDE:

https://code.visualstudio.com/
https://www.jetbrains.com/webstorm/
https://www.sublimetext.com/

Linters:

CSS/SCSS:
https://stylelint.io/
JS
https://eslint.org/
Code Formater
https://github.com/prettier/prettier
Run linters on only staged files
https://github.com/okonet/lint-staged
Git hooks
https://github.com/typicode/husky

Editorconfig:

http://editorconfig.org/#example-file

Example of code guide:

AirBnb
https://github.com/airbnb/javascript

For testing your code on Push to GitHub:

https://travis-ci.org/
https://circleci.com
Example setup CircleCI
https://www.youtube.com/watch?v=ymPOI4gWQFY
https://www.youtube.com/watch?v=7VxBn_ZgOek

И в заключении кому интересно слушать что происходит в мире HTML/CSS/JS, рекомендую слушать подкаст:

https://soundcloud.com/web-standards

Для тих хто вже здав попередню домашку назва гілки 10-media

Завдання: Використати респонсів імеджі та свг у макрапі з попереднього завдання

Презенташка -- клік
Запис (до залиття на ютуб) -- клік
Код з заняття -- клік

Суппорт фіч браузера перевіряти тут
svgo
svg фільтри
Responsive images on MDN
Про avif, webp

Вимоги

1. Назва для папки з домашкою та гілки 5-rxjs

2. Вся логіка має бути реалізована через інструменти rxjs. в "subscribe" має бути лише логіка додавання або прибирання класів -- всі інші обрахунки через оператори

Основне завдання

1. Додати хедер на сторінку який буде показуватися після скроллу сторінки вверх та після скроллу вниз -- ховатися

• Має обов'язково бути анімація ховання\показу хедера
• Обов'зково має бути фільтування кількості івентів скролу

2. Хедер має ховатися\показуватися тільки якщо юзер проскролив більше 50 пікселів

https://www.dropbox.com/s/ofl8be279o72lix/main-task.mov?dl=0

Завання з *

3. Посередині контенту сторінки має бути кнопка з текстом BUY NOW і після того як юзер проскролює її то має змінюватися логіка роботи хедера

• У випадку коли юзер ще не доскроллив до цієї кнопки то має бути логіка хедера як в основному завданні
• Після скролла вверх має показуватися звичайний хедер тільки доданою кнопкою BUY NOW справа
• Після скролла вниз має показуватися хедер з текстом Get an amazing discount та кнопкою BUY NOW

https://www.dropbox.com/s/5t29uz3yvkqox3a/advanced-task.mov?dl=0

Гілку потрібно назвати: 2-dom

Назва директорії з домашнім завданням повинна бути 2-dom, тобто ця папка повинна знаходитись всередині вашої папки з домашніми роботами

Потрібно створити простий чат, в який можна писати повідомлення, сабмітити ввід та показувати це повідомлення на сторінці.
Дизайн та розположення елементів потрібно взяти за референс від вже готових рішень в інтернеті.

Від вас потрібно:

1. Створити текстовий інпут, в який буде вводитись повідомлення;
2. Створити кнопку "Submit", яка при натисканні буде:
   2.1) Валідувати значення текстовий інпуту (не пусте повідомлення, без лишніх пробілів до та після повідомлення);
   2.2) Викликати функцію, яка буде створювати елемент, який буде відображатись як повідомлення в чаті;
   2.3) Очистити значення текстового інпуту;
   2.4) Обернути JS код в анонімну функцію;
3. Створити щонайменше 3 повідомлення та перевірити чи вірно у вас відображаються всі елементи.
4. Ввімкнути Github Pages у вашому репозиторії та додати посилання в опис до пулл реквесту.
5. Створюючи пулл реквест, потрібно прикласти скріншот як ваш чат виглядає із повідомленнями та додати посилання в опис до пулл реквесту.

Важливо! Створюючи пулл реквест, потрібно прикласти скріншот як ваш чат виглядає із повідомленнями.

• Завдання із зірочкою:
  Для покращення навичок, вам потрібно:

1. Показувати статус "Typing..." коли юзер починає вводити текст і ховати цей статус після секунди неактивності (еффект Debounce);
2. Додати скролл у блок з повідомленнями, щоб на сторінці можна було показувати будь-яку їх кількість.

Корисні лінки:

Селектори та пошук по DOM:
https://blog.bitsrc.io/dom-selectors-explained-70260049aaf0

Лісенери та івенти:
https://medium.com/@timothyrobards/javascript-fundamentals-understanding-events-4def8c47e313

Делегування івентами:
https://learn.javascript.ru/event-delegation

Ефективний спосіб створення шаблонів:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template

Приклади:
https://learn.javascript.ru/event-delegation#povedenie-podskazka
https://learn.javascript.ru/event-delegation#raskryvayuscheesya-derevo

Приклад з лекції: https://github.com/TArch64/ma-architecture-example
Ліба для мокання апішки: https://github.com/typicode/json-server
Аналог для стейт менеджмента: https://www.ngxs.io/

Анімувабельні властивості
Генератор таймінг функцій
Анімація роунтинга

Задание

Пройти тур героев: https://angular.io/tutorial

Полезные ссылки

Презентация: https://drive.google.com/file/d/1oyyJtnNAsBsqJ5VCgdFqM3vFtUiT-_0J/view?usp=sharing
Документация: https://angular.io/

Ветка для домашней работы должна называться 8-components-templates
Папка для домашней работы должна называться 8-components-templates

Задание

Написать приложение галерею для просмотра каринок.
Источником картинок будет массив https://gist.github.com/powerbot15/eaec8a6f99900db33bbb19b7346e885d

Мокап на рисунке.

Пока картинки загружаются, вместо картинки показывать в плитке лоадер
Галерея должна по клику на картинку в списке показать большое изображение под списком. У выбранной картинки в списке должен измениться цвет границы плитки.

Задание на *

Реализовать поведение кнопок Prev и Next, которые должны переключить картинки в списке. Если показывается последняя картинка, кнопка Next должна быть заблочена(спрятана). Если показывается первая картинка, то кнопка Prev должна быть заблочена(спрятана). Переключение картинок по кнопкам Prev и Next должно отображаться и в списке, у плитки показываемой картинки граница должна изменить цвет

Условия сдачи:

Дедлайн подачи пулл риквеста - 23:59 субботы.
Пулл риквест должен включать ссылку на гихаб пейджес с работающим приложением