Шест задачи за развивач на Front-End

1. Формулар за кредитна картичка

Прекрасна форма на кредитна картичка со мазни и пријатни микро-интеракции. Вклучува форматирање на броеви, верификација и автоматско откривање на типот на картичката. Изграден е на Vue.js и исто така целосно реагира. (Можете да видите тука.)

образец за кредитна картичка

Што ќе научите:

• Обработете и потврдете ги формуларите
• Ракувајте со настани (на пример, кога полињата се менуваат)
• Разберете како да ги прикажете и поставите елементите на страницата, особено информациите за кредитната картичка што се појавуваат на врвот на формуларот

Статијата е преведена со поддршка на софтверот EDISON, кој се грижи за здравјето на програмерите и нивниот појадокИ развива сопствен софтвер.

2. Хистограм

Хистограм е графикон или графикон кој претставува категорични податоци со правоаголни шипки со висини или должини пропорционални на вредностите што тие ги претставуваат.

Тие можат да се применат вертикално или хоризонтално. Вертикалната лента со дијаграм понекогаш се нарекува линиска шема.

Што ќе научите:

• Приказ на податоци на структуриран и разбирлив начин
• Дополнително: Научете како да го користите елементот canvas и како се цртаат елементи со него

Тука можете да најдете податоци за светската популација. Тие се подредени по година.

3. Анимација на срцето на Твитер

Твитер во 2016 година ја претстави оваа неверојатна анимација за своите твитови. Од 2019 година, сè уште изгледа како дел, па зошто да не креирате сами?

Што ќе научите:

• Работете со атрибут CSS keyframes
• Манипулирајте и анимирајте HTML елементи
• Комбинирајте JavaScript, HTML и CSS

4. Складишта на GitHub со функција за пребарување

Нема ништо фенси тука - складиштата на GitHub се само прославена листа.
Целта е да се прикажат складиштата и да се овозможи корисникот да ги филтрира. Користете официјално GitHub API за да добиете складишта за секој корисник.

Профил на GitHub - github.com/indreklasn

Што ќе научите:

• Примајте податоци од API
• Прикажи податоци од API
• Филтрирајте и прикажете релевантни податоци за секое пребарување
• Изборно: ако сте подготвени за предизвик, користете API v4, изграден со помош на GraphQL. Ако сакате да научите GraphQL, одете на една од моите претходни статии.

5. Разговори во стилот на Редит

Разговорите се популарен начин на комуникација поради нивната едноставност и леснотија на користење. Но, што навистина ги поттикнува модерните виртуелни простории за разговор? WebSockets!

Што ќе научите:

• Користете WebSockets, комуникација во реално време и ажурирања на податоци
• Работете со нивоа на пристап на корисници (на пример, сопственикот на канал за разговор ја има улогата adminи други во собата - user)
• Обработете и проверувајте ги формуларите - запомнете, прозорецот за разговор за испраќање порака е input
• Креирајте и придружете се на различни разговори
• Работете со лични пораки. Корисниците можат приватно да разговараат со други корисници. Во суштина, ќе воспоставите врска WebSocket помеѓу двајца корисници.

6. Навигација во стил на пруги

Она што ја прави оваа навигација уникатна е тоа што контејнерот за поповер се трансформира за да одговара на содржината. Има елеганција во оваа транзиција во споредба со традиционалното однесување на отворање и затворање на нов поповер.

Што ќе научите:

• Комбинирајте CSS анимации со транзиции
• Затемнете ја содржината и применете ја активна класа на подвижниот елемент

Обидете се прво да го направите сами, но ако ви треба помош, проверете го ова водич чекор по чекор.

Извор: www.habr.com