Winter 2018-2019

FRONTEND
WELCOME TO NEOBIS!

Rules:
● Slack standups every weekday in following format:
1. Job you’ve done yesterday
2. Plan for today (it should be well described and exact)
3. Problems & difficulties
● Keep up with the deadlines
● Не сдал отчёт три раза кикаем, три упущенных дедлайна кикаем
● Let us know if you will be unavailable in advance
● All tasks must be uploaded to your github profile, so we can review

Troubleshooting Guide:

Step 1: Google it(Google hard! It’s the main skill of a developer), try rubber duck method
https://bit.ly/1X3ySxP

Step 2: Ask in department group

Step 3: Ask mentors and Step 1

Изучайте English минимум до уровня чтения документации

Читайте справочники и закрепляйте базу:

https://developer.mozilla.org/ru/docs/Learn

https://learn.javascript.ru/

1
 Good luck!

Chapter 1. 14 Days

Task #1 Deadline - 5 days, 12 January 00:00

● Создайте аккаунт на freecodecamp.org

(всегда логиньтесь ваши результаты должны сохраняться)
● Xml: https://bit.ly/2PDL3Sn читать
● HTML: thttps://bit.ly/2NKmJxK CSS: https://bit.ly/2wAos24
● flex:
○ https://css-tricks.com/snippets/css/a-guide-to-flexbox/ - гайд
○ https://learn.freecodecamp.org/responsive-web-design/css-flexbox/ - задания
● Grid:
○ https://medium.freecodecamp.org/learn-css-grid-in-5-minutes-f582e87b1228 -
гайд
○ https://learn.freecodecamp.org/responsive-web-design/css-grid/ - задания

Task #2 Deadline - 7 days, 23 January 00:00

● Basic JS: https://bit.ly/2NFPT0N

● JS Data Structures:
○ https://learn.javascript.ru/data-structures - чтение
○ https://learn.freecodecamp.org/javascript-algorithms-and-data-
structures/basic-data-structures/ - задания
● Manipulating DOM:
○ https://bit.ly/2wDRKNn - изучение по видосам
○ JS tasks (на 6 странице и до конца)

Task #3 Deadline - 6 days, 29 January 00:00

● Сверстать страницу по макету https://drive.google.com/folderview?id=12eXtAg-

60Pi6Vxf2x6K3Xou8v3QIoDZt
● Почитать про JS & ES6: (используйте справочники)

2
 ○ [Promises, Scope, Closure, Arrow functions, This operator, Async / await]
○ https://learn.freecodecamp.org/javascript-algorithms-and-data-
structures/es6/ - задания

Chapter 2. 27 Days
Task #1 Deadline - 7 days, 7 February 00:00

● Почитать про Ajax, XMLHttp Requests

● Learn fetch:
○ Почитать как юзать fetch()
○ Отправить fetch запрос на http://46.101.146.101:8081/categories/
○ Получить данные, вывести все категории на страницу
● Giphy API (прочитать документацию API, парсить и выводить гифки по запросу т.е
если вводишь в инпут “tom and jerry” страница должна будет отобразить
соответствующие гифки) https://developers.giphy.com/docs/

Task #2 Deadline - 10 days, 21 February 00:00

● JS OOP: https://bit.ly/2wHNNGw
● JS FP: https://bit.ly/2Q37amv

Task #3 Deadline - 10 days, 7 March 00:00

● Learn to use Git (определенные команды тип пулл, пуш)

○ Fetch
○ Pull
○ Commit
○ Push
○ Merge
○ Rebase
○ Basis
○ Branch
● Create github
● Сделать To-do list на чистом js

3
Chapter 3.
Task #1 Deadline - 9 days, 20 March 00:00

● Hoisting https://developer.mozilla.org/en-US/docs/Glossary/Hoisting
● var , let & const https://learn.javascript.ru/let-const
● Closure, Scope https://learn.javascript.ru/functions-closures
● Async https://habr.com/company/ruvds/blog/340508/
● DOM https://learn.javascript.ru/document
● Map, forEach, filter, Reduce,
● Prototypes
● Контекст
● Objects
● Set & map
● EventLoop
● Promise
● Callback
● OOP https://learn.javascript.ru/prototype s
● Наследование
● Алгоритмы
● React lifecycle и вообще база рендеринг и тд
● Currying Decurrying

4
Chapter 4. 14 days

Task #1 Deadline - 5 days, 27 March 00:00

● Learn basics of npm - https://medium.com/beginners-guide-to-mobile-web-

development/introduction-to-npm-and-basic-npm-commands-18aa16f69f6b
● React fundamentals: https://bit.ly/2Nc7ssB
● Изучаем стиль кода airbnb https://github.com/airbnb/javascript
(variables, functions, arrays, objects) don’t forget all the spaces and tabs so it’s easier
to read your code

Task #2 Deadline - 8 days, 3 April 00:00

● To-Do list using React: https://bit.ly/2MJ7Orl github

● Weather Application using React: P1 https://bit.ly/2kBhMdN github

P2 https://bit.ly/2sjVjpV github

Task #3 Deadline - 3 days, 6 April 00:00

● CMS (WordPress prefered) release landing page

● Chrome DevTools: https://bit.ly/2GF7qSG

5
Useful links
● Разница между responsive и adaptive дизайном https://css-tricks.com/the-difference-
between-responsive-and-adaptive-design/
● Exactly What You Need to Know to Be a Front End Developer
https://skillcrush.com/2016/02/11/skills-to-become-a-front-end-developer/
● Советы фронтенд разработчику https://habrahabr.ru/post/231855/
● Фронтенд 2017 https://habrahabr.ru/company/ruvds/blog/345792/
● Git cheat sheet (шпаргалки по гиту) - https://eax.me/git-commands/
● Современный учебник JavaScript https://learn.javascript.ru/
● https://www.browserstack.com/
● https://ru.stackoverflow.com/help/how-to-ask
● https://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D1%82%D0%BE%D0%B4_
%D1%83%D1%82%D1%91%D0%BD%D0%BA%D0%B0
● https://github.com/leonidlebedev/javascript-airbnb
● Крокфорд - JS good parts
● Eloquent js
● YDKJS
● Coders at work
● Шаблоны корпоративных приложений
https://chrome.google.com/webstore/detail/react-developer-
tools/fmkadmapgofadopljbjfkapdkoienihi?hl=ru

Optional to learn:
Gulp, Sass, JQuery, Redux

6
JavaScript Practical Tasks
Задача #1
for (var i = 0; i < 10; i++) {

setTimeout(function() {

console.log(i);

};

Что выведет консоль и почему?

Задача #2
Write a JavaScript program to display the current day and time in the following format.
Sample Output :

Today is : Friday.
Current time is : 4 PM : 50 : 22

7
Write a JavaScript function that reverse a number.

Example x = 32243;
Expected Output : 34223

Write a JavaScript program to calculate the factorial of a number. In mathematics, the factorial of a
non-negative integer n, denoted by n!, is the product of all positive integers less than or equal to n.
For example, 5! = 5 x 4 x 3 x 2 x 1 = 120

Write a JavaScript program that accept two integers and display the larger.

Write a simple JavaScript program to join all elements of the following array into a string.

Sample array : myColor = ["Red", "Green", "White", "Black"];

Expected Output :

"Red,Green,White,Black"

"Red+Green+White+Black"

Write a JavaScript function to get the month name from a particular date.
Test Data :

console.log(month_name(new Date("10/11/2009")));

console.log(month_name(new Date("11/13/2014")));

Output :

"October"

"November"

Write a JavaScript program to test the first character of a string is uppercase or not

8
Write a JavaScript program to draw a smile

Задача №4

Задание 1
На странице есть верстка:

<div id="string-1">Ядра в вёдра, выдру в тундру!</div>

<div id="string-2">Выдрав с выдры в тундре гетры</div>
<div id="string-3">В недрах тундры, выдры в гетрах </div>
<div id="string-4">Вытру гетрой выдре морду </div>
<div id="string-5">Тырят в вёдра ядра кедров!</div>
<div id="string-6">Вытру выдрой ядра кедров</div>

Необходимо поочередно обратиться к каждому тэгу в нужном порядке, и вывести их

содержимое в консоль, чтобы получилась осмысленная скороговорка.

Вывод в консоли:
В недрах тундры, выдры в гетрах
Тырят в вёдра ядра кедров!
Выдрав с выдры в тундре гетры
Вытру выдрой ядра кедров
Вытру гетрой выдре морду
Ядра в вёдра, выдру в тундру!

Задание 2
На странице есть верстка

<div class="element">Element 1</div>

9
<div class="element">Element 2</div>
<div class="element">Element 3</div>
<div class="element">Element 4</div>
<div class="element">Element 5</div>
<div class="element">Element 6</div>

С помощью JS необходимо первым трем элементам задать красный цвет текста, а остальным
трем - зеленый.

Задание 3

На странице есть контейнер <ol id="todo-list"></ol>, необходимо с помощью цикла добавить в

него пять задач (элементов <li>) с классом task и текстом, взятым из массива задач из пяти
элементов:

var tasks = ['Buy lemonade', 'Make toasts', 'Repair car', 'Play games', 'Pet a cat'];

Ожидаемый результат в инспекторе после выполнения скрипта:

<ol id="todo-list">
<li class="task">Buy lemonade</li>
<li class="task">Make toasts</li>
<li class="task">Repair car</li>
<li class="task">Play games</li>
<li class="task">Pet a cat</li>
</ol>

Задание 4
На странице есть следующая разметка:

10
<article>
<h3>What is Lorem Ipsum?</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
has been the industry's standard dummy text ever since the 1500s, when an unknown printer
took a galley of type and scrambled it to make a type specimen book. It has survived not only
five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It
was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum
passages.</p>
<h3>Where does it come from?</h3>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of
classical Latin literature from 45 BC, making it over 2000 years old. The first line of Lorem
Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. from "The
Extremes of Good and Evil" by Cicero</p>
<h3>Why do we use it?</h3>
<p>It is a long established fact that a reader will be distracted by the readable content of a
page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less
normal distribution of letters, as opposed to using 'Content here, content here', making it look
like readable English.</p>
</article>

Вам необходимо с помощью JavaScript вставить после каждого тега <p> тег <hr>, для
визуального отделения абзацев друг от друга.

Указания:
● Подразумевается, что вышеуказанная разметка находится внутри тега <body>.
● Нельзя модифицировать указанную разметку.
● За использование цикла дополнительные баллы.

Задание 5
Дана такая разметка:

11
<div id="cart-items">
<div class="item">Milk 1 l.<span class="qty">x 2</span></div>
<div class="item">Cola 1.5 l. <span class="qty">x 1</span></div>
<div class="item">Bread<span class="qty">x 2</span></div>
<div class="item">Cheese<span class="qty">x 1</span></div>
<div class="item">Chocolate bar<span class="qty">x 3</span></div>
</div>

Необходимо с помощью JavaScript удалить элемент "Cola 1.5 l" и заменить товар "Chocolate bar"
на "Canned Fish", количеством 4 штуки.

Указания:
● Для удаления использовать .remove()
● Для замены использовать .replaceChild()
● Подразумевается, что вышеуказанная разметка находится внутри тега <body>.

Задание 6
Напишите программу для создания списка задач, которые будет вводить пользователь:
в
● Для каждого пункта:
○ Запрашивайте содержимое пункта у пользователя с помощью prompt.
○ Создавайте пункт и добавляйте его к UL.
○ Процесс прерывается, когда пользователь нажимает "Отмена" или вводит
пустую строку.

12