mastersacademy / js-course-2018 Goto Github PK

Task 1

Create a function logNumbers() which accepts one argument of type ‘number’.
After one second log into console this number + 10.
After two seconds log into console previous step result * 3.
After three seconds log into console previous step result - 20.
Provide callback, Promise and async/await based solution.

Task 2 (optional, only if you get bored)

fetch() is cool for HTTP requests. It’s Promise-based and has lots of options. But as Promise resolves/rejects only once and stays immutable, we cannot use it for reporting file upload progress purposes (PUT). Create a function which would utilize Promise mechanism providing a possible solution for this.

Hint: this function will not use fetch()

===

Slides are here

1. Используя в качестве примера https://github.com/MastersAcademy/js-course-2018/tree/master/lectures_frontend/lecture_DOM написать бесконечную карусель. Карусель не должна останавливаться на крайних слайдах, как в примере, а продолжать движение, подставляя слайды с другого конца. Карусель должна бесконечно крутиться в обоих направлениях.
   Для решения задания создать в своем аккаунте репозиторий и в нем решать(код примера можно скопировать). Репозиторий должен смотреть в мир с помощью https://pages.github.com/ а в пулл-риквест с домашкой надо только создать файл homework_frontend6.md и добавить туда ссылку на репозиторий с заданием и ссылку со страницей на гитхаб-пейджес

2. * Создать плагин для анимации текстовых блоков. Плагин должен уметь работать с любыми блоками в которых лежит простой текст. <h1>Text</h1>, <p/>, <span/>, <div/>, <strong/>, etc...
   Эффекты на выбор: волна из букв, которая проходит от начала до конца строки(как в примере на лекции), вывод текста по одной букве, как-будто он печатается, вращение каждой буквы на 360 градусов начиная с левого края строки.
   Для решения задания создать в своем аккаунте репозиторий и в нем решать. Репозиторий должен смотреть в мир с помощью https://pages.github.com/ а в пулл-риквест с домашкой надо только создать файл homework_frontend6.md и добавить туда ссылку на репозиторий с заданием и ссылку со страницей на гитхаб-пейджес

Setup

UPD: Перед першим запуском тестів не забудьте встановити потірбні бібліотеки! npm install в корені проекту
Для того щоб запусити всі тести в директорії потрібно виконати npm run jest <шлях до папки>

Homework

1. Використовуючи TDD (Розробка через тести) написати функцію, яка повертає масив, елементи якого є послідовнідовність Фібоначчі. Початком послідовності є 0. Як кінець береться випадкове число від 50 до 100. Тобто послідовність буде, напиклад, [0,1, 1, 2, 3, ....... 89]

2. *** Використовуючи TDD зробити клас-сервіс для виконання входу в систему.
   Клас повинен мати метод логін, який приймає логін та пароль і повертає 'success', якщо в системі є такий користувач та переданий пароль вірний. В інших випадках повертає посимилку.
   Якщо користувач не зміг авторизуватись більше ніж 3 рази підряд, то клас має для цього користувача забороняти вхід протягом слідуючих 10 секунд.
   Список користувачів має братись з іншого файлу через імпорт (require)
   Користувачі:

[
  {
    "login": "zayka123",
    "password": "qwerty321"
  },
  {
    "login": "kak_bozenka_smolvil",
    "password": "veryStrongPassword"
  },
  {
    "login": "admin",
    "password": "admin"
  }
]

Всем привет.
Домашка как и всегда след 2 секции с макета.

Ссылка на плейлист и призентации в коментариях к видео.
https://www.youtube.com/watch?v=RwMSN5G4BVY&list=PL7Tk1QIFIqKoTFdrNIOevEGaqy2aBtH32

1 Робота з функціями та масивами:

1.1 Написати функцію, яка приводить в квадрат переданий їй аргумент
Тестові дані: 5, 15, 53.
Результат виконання:

  1) 5 ^2 = 25
  2) 15^2 = 225
  3) 53^2 = 2809

1.2 Написати функцію, яка створює масив з числами від 0 до заданої
величини та заданим кроком між значеннями елементів
1) Тестові дані:

- Максимальне значення: 50
- Крок між елементами : 5

Результат виконання: [ 0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50 ]

2) Тестові дані:

 - Максимальне значення: 32
 - Крок між елементами : 4

Результат виконання: [ 0, 4, 8, 12, 16, 20, 24, 28, 32 ]

1.3 Привести до квадрату всі значення елементів масиву. Вхідним масивом є результат виконання попереднього завдання (2) з агрументами 32 та 4.
Тестові дані: [ 0, 4, 8, 12, 16, 20, 24, 28, 32 ]
Результат виконання: [ 0, 16, 64, 144, 256, 400, 576, 784, 1024 ]

1.4 Знайти суму елементів масиву з попереднього завдання
Тестові дані: [ 0, 16, 64, 144, 256, 400, 576, 784, 1024 ]
Результат виконання: 3264

2 Рекурсія

Дано діапазон натуральних чисел від 10 до 600 включно. Вивести числа, які є степінню двійки (1, 2, 4, 16, 512, etc). Для перевірки числа на відповідність степенню двійки використовуйте рекурсію
*** Додати можливість вводити діапазон значень для перевірки. Для цього можна використовувати readline

1. Преобразуйте числовой массив в соответствующий массив сумм используя замыкания:

f[n] = x[0] + x[1] + x[2] +...+ x[n] or f[n] = f[n-1] + x[n]
 Example :
[ 10, -10, 10, -10, 10 ] => [ 10, 0, 10, 0, 10 ]
[ 0, 0, 0, 0, 0]         => [ 0, 0, 0, 0, 0]
[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ] => [ 1, 3, 6, 10, 15, 21, 28, 36, 45, 55 ]

parameter numbers someArr = [...]
returns sumArray

2. Cоздать функцию, которая возвращает объект с ключами элементов массива, и значением - количеством повторов одинаковых элементов в массиве. Для лучшего понимания здесь приведен пример:

let classes = ['header', 'menu', 'menu_item', 'tabs',
    'tab_item', 'menu', 'link', 'tabs', 'tab_item', 'menu',
    'menu_item', 'menu', 'menu_item'];
return {
     header: 1
     link: 1
     menu: 4
     menu_item: 3
     tab_item: 2
     tabs: 2
}

3. Задача Реализация функции innerCopy - для копирования объекта
   с учетом вложенных объектов:

const  obj = {b: ‘c’, d: {e: ‘f’}}, 
             objCopy = innerCopy(a); 
             objCopy.d // {e: ‘f’} 

4. Напишите функцию getPeople, которая бы возвращала массив друзей по передаваемому id. Коллекция, с которой будет работать функция:

const people = [
 {id: 1, name: 'Nick', friends: [2,5,6]},
 {id: 2, name: 'John', friends: [1, 3]},
 {id: 3, name: 'Mike', friends: [2, 5]},
 {id: 4, name: 'Janny', friends: null},
 {id: 5, name: 'Edward', friends: [1, 3]},
 {id: 6, name: 'Jeen', friends: [5, 1]}
];
const getPeople = function(userId) { 
// Put you code here 
};
Example: getPeople(2) // [{id: 1, name: 'Nick', friends: [2,5,6]}, {id: 3, name: 'Mike', friends: [2, 5]}] getPeople(4) // [] getPeople(100500) // null

5.** Дан массив в формате json в котором представлены страны мира в таком виде:

 [
    {
          "Country": <string>,
          "CountryCode": <number>,
              "IsoCodes": [
                  {
                     "Code": <string>
                   },
               ],
          "Population": <number>,
          "AreaKM2": <number>
    },
]

необходимо подготовить массив объектов:

ObjArray = [
       {
          country: название страны,
          percentValue:  население страны по отношению к населению мира (в процентах),
          population: населения страны с начального массива
       }
]

массив должен быть отсортирован в порядке убывания percentValue
Если есть 2 или более элементов в списке, в которых поле percentValue менее const OTHER, то такие элементы должны быть просуммированы (добавлены) как один элемент в конец списка.

   {
         country: 'Other',
         percentValue: <number>,
         population: <number>
   }

const OTHER - любое число в зависимости от которого будет меняться массив;
ссылка на массив json:
https://raw.githubusercontent.com/ramtinak/CountryCodes/master/CountryCodes.json

Ссылка на презентацию:
https://docs.google.com/presentation/d/1n-uYdtIrny2xqmLMlkfjlWWP2XQwBK6vsR0QauTMGuY/edit?usp=sharing

1. Создать объект user со следующими свойствами: fullName, phone. Свойство fullName должно при присвоении туда значения капитализировать каждое слово плюс остальные буквы слова делать маленькими, свойство phone должно при присвоении туда значения оставлять только цифры 0..9 и ведущий знак плюс. Пример:

user.fullName = 'aNna-mAria joHNs';
console.log(user.fullName); // => 'Anna-Maria Johns'
user.phone = '+38(096)-111-22-33';
console.log(user.phone); // => '+380961112233';
user.phone = '38(096)+111b22+33';
console.log(user.phone); // => '380961112233';

2. Используя классы написать имитацию ипподрома
   Необходимый минимум для реализации:
   классы Horse - базовый класс для лошади, должен содержать два поля: name и breed,
   Racer - дочерний класс для лошади, должен содержать методы run и setSpeed, поля distance и speed. Конструктор класса должен принимать имя и породу лошади, определить рандомную скорость для лошади в диапазоне 10..15 с помощью метода setSpeed
run запускает забег для лошади и каждую секунду добавляет текущее значение скорости к пройденной дистанции, плюс случайным образом заново определяет скорость лошади в диапазоне 10..15.
   setSpeed - устанавливает рандомную скорость для лошади в диапазоне 10..15
   Race - должен содержить как минимум два метода: createRace и startRace, поле horses(массив).
   createRace создает 10 лошадей с именами из заранее созданного массива. Инстансы созданных лошадей ложатся в свойство класса horses (массив).
   startRace запускает в цикле забег у каждой лошади. После этого каждые две секунды необходимо выводить в консоль имя каждой лошади, ее породу и пройденную дистанцию. Весь забег должен длиться 10 секунд и по завершению необходимо вывести победителя по максимальной пройденной дистанции, не забыв при этом остановить внутренние интервалы лошадей.

Препроцеcсоры
(Но стандарт в целом SASS, c расширение .SCSS)
https://sass-lang.com/
http://stylus-lang.com/
http://lesscss.org/
https://postcss.org/
https://www.postcss.parts/
Плагин для всего что при биде подставляет браузерные префиксы за вас
https://github.com/postcss/autoprefixer

CSS Архитектура проекта
(Никогда не следуйте слепо тому что написано, старайтесь подобрать под
свои нужды структура которая вам подходит)
https://zellwk.com/blog/css-architecture-3/
https://medium.com/@dannyhuang_75970/sass-project-structure-for-big-projects-8c4a740846ee

Преимущества и недостатки СSS - фреймворков
(Рекомендация, брать с фреймворков базовые стили, так как там учтены
все кроссбраузерные особенности, и добавлять уже модификаторами классы
что будут оформлять ваши компоненты)
https://github.com/twbs/bootstrap-sass
https://getbootstrap.com/
https://materializecss.com/
https://foundation.zurb.com/

Анимация (CSS Animate and others libraries) или лучше писать на чистом css + js
(Для простых анимаций используйте CSS свойства типа - “transition, animation”, для более сложной анимации используйте CSS + JS, в этом нет ничего плохого, так же для анимации SVG используются спец библиотеки)
https://daneden.github.io/animate.css/
http://snapsvg.io/
http://snapsvg.io/demos/#mascot
https://greensock.com/examples-showcases
https://wowjs.uk/

Для вдохновения и быстрого наброска прототипов
(Хороший ресурс, тут очень много разных демок, можете посмотреть что другие
люди делают с помощью HTML/CSS/JS и заодно можно сделать fork и поиграться самому с кодом)
https://codepen.io/
https://codepen.io/michellebarker/pen/GzzrGJ?editors=0100

Кастомные свойства в CSS
(CSS переменные)
https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables
https://www.smashingmagazine.com/2018/05/css-custom-properties-strategy-guide/
https://caniuse.com/#search=CSS%20Variables

jQuery
(Использовать можно, но нет смысла, на чистом JS писать уже не противно.
По этому пишите на чистом JS, темболее что все фреймворки используют чистый JS)
https://jquery.com/

Кто то спрашивал за билд вебпака, что при изменении файлов
В браузере не релоадилась страница с изменениями:
(Попробуйте эти серверы, вместо стандартного “webpack devserver” )
https://d22dkb9kbinceo.cloudfront.net/Screen-Shot-2019-02-22-18-20-31.57-1550852438.jpg

ВЕРСТКА №2

HTML препроцессоры и почему их используют
https://handlebarsjs.com
https://mozilla.github.io/nunjucks/
https://pugjs.org/api/getting-started.html

Наконец то можно застилизовать <select> без враперов )
https://www.filamentgroup.com/lab/select-css.html

Гайд по Графике (png,jpg,webp) и ее оптимизации
https://images.guide/#the-tldr

Оптимизация графики
https://squoosh.app/
https://tinypng.com/
https://tinyjpg.com/

Все что нужно знать о Responsive Images
https://cloudfour.com/thinks/responsive-images-101-definitions/

Тестирование производительности вашего приложения
https://www.webpagetest.org/
https://developers.google.com/speed/pagespeed/insights/

Набор SVG иконок с экспортом в <symbol>
https://icomoon.io/app/#/select

Background Videos
https://coverr.co/videos/Tel%20Aviv%20Beach

1. Chat app - a standard project that can be done in lots of ways
2. Imageboard/Forum - Create a forum for you and your buddies to post, administer and share thoughts and ideas.
3. A simple CMS (or blog) engine
4. AirBnB project - a place to upload the description of something, with photos, and a map. Also a view to display it.
5. Tinder project - a "swipe to decide" app
6. Page Scraper - Create an application which connects to a site and pulls out all links, or images, and saves them to a list. Optional: Organize the indexed content and don’t allow duplicates. Have it put the results into an easily searchable index file. e.g. references from a food blog.
7. GIF Creator - A program that puts together multiple images (PNGs, JPGs, TIFFs) to make a smooth GIF that can be exported. Optional: Make the program convert small video files to GIFs as well.
8. Calendar app
9. Contacts manager
10. Instagram project
11. Note taking app
12. Recipes app
13. Twitter client

1. Просмотрите и почитайте ссылки на слайдах презентации
2. Попробуйте в своем макете несколькими способами подключить SVG
   2.1 Вставка через тег <img>
   2.2 Вставка через background-image
   2.3 Вставка через <symbol> + <svg> + <use>
   2.4 Вставка через внешний файл (спрайт) с <symbol> + <svg> + <use>

Ссылка на презентацию:

https://docs.google.com/presentation/d/1C2dHWTvKY8BDQRaMdOdg3RKy2-C2Sgb5B285GojHKNE/edit#slide=id.g4ab9c1e488_0_0

P.S - видео будет сегодня, к вечеру

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

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

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

Useful links

• Setup git
• Setup git2
• Try Git
• Git book
• Nodejs
• Npm docs

0. Ссылка на доклад и примеры тут
1. Для верстки, папка с ДЗ будет называться homework_markup_1
2. В этой папке нужно создать такие файлы: index.html, style.css и папку images
3. Макет для верстки находится по этой ссылке
4. Верстку сделать только на эти 2 серкции
5. Сам макет шириной 1400px, но вы делайте под ширину страницы 1024px.
   5.1. Для layout используйте flexbox & grid
6. Картинку можно взять с интернета, логотип тоже.
7. Шрифт по умолчанию Open Sans
8. Сначала продумайте HTML структуру, ваша страница должна выглядеть понятно c выключеным CSS.
9. В CSS обращаемся только к CLASS'ам, отделяем смысловые блоки комментариями.
10. Будут вопросы обращайтесь 😉

1. Выводить в консоль пирамиду высотой в 15 строк, как на примере. Верхняя часть должна состоять из 4 символов.
   В этом вам помогут команды и методы: console.log и str.repeat().

          ####
         ######
        ########
       ##########
      ############
     ##############
    ################
   

***Было бы хорошо: запрашивать у пользователя высоту пирамиды, и валидировать его ввод. В этом поможет: Readline и typeof.

2. Выводить в консоль все зеркальные числа (11211, 333) в диапазоне от 500 до 1000
   В этом вам помогут команды и методы: toString().
   ***Было бы хорошо: запрашивать у пользователя минимальные и максимальные значения диапазона, и валидировать его ввод. В этом поможет: Readline и typeof.

Ссылка на презентацию:
https://drive.google.com/file/d/1VHEegmEQrYaMF6l45ZyJsVW1tKKAyDwP/view?usp=sharing

Вы уже сделали 3 домашки, т.е 6 готовых секций/блоков.
Теперь все это нужно сверстать по принципу mobile last.

Поведение на мобильном:

1. Секция/блок - меню сворачивается в гамбургер меню. Высота секции 80vh
2. Секция/блок - друг под дружку
3. Секция/блок - Картинку прячем и список экспертиз друг под дружку
4. Секция/блок - Картинку справа прячем и список друг под дружку
5. Секция/блок - Показываем по 2 картнки в ряд
6. Секция/блок - просто список картинка + текст друг под дружку
7. Картинки для макета можете брать любые, Иконки можете брать с этого сайта

Список media query:

Ссылка на презентацию:
https://docs.google.com/presentation/d/1IsXl_EfrU0G2ysdquDwN-3wnaJorkdLqpmdrD4nv6_c/edit?usp=sharing

1. Делаем следующие 2 блока по Макету
2. Домашку делаем в той же папке
3. Картинки для макета можете брать любые, Иконки можете браться с этого сайта