Шест задачи за Front-End разработчик

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

Страхотна форма на кредитна карта с плавни и приятни микровзаимодействия. Включва форматиране на номера, проверка и автоматично разпознаване на типа карта. Той е изграден на Vue.js и също е напълно отзивчив. (Можеш да видиш тук.)

формуляр за кредитна карта

Какво ще научите:

• Обработвайте и валидирайте формуляри
• Обработване на събития (например, когато полетата се променят)
• Разберете как да показвате и поставяте елементи на страницата, особено информацията за кредитната карта, която се появява в горната част на формуляра

Статията е преведена с подкрепата на EDISON Software, която се грижи за здравето на програмистите и тяхната закускаИ разработва персонализиран софтуер.

2. Хистограма

Хистограмата е диаграма или графика, която представя категорични данни с правоъгълни ленти с височини или дължини, пропорционални на стойностите, които представляват.

Те могат да се прилагат вертикално или хоризонтално. Вертикалната лентова диаграма понякога се нарича линейна диаграма.

Какво ще научите:

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

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

3. Twitter Heart Animation

През 2016 г. Twitter представи тази невероятна анимация за своите туитове. Към 2019 г. той все още изглежда като част, така че защо не създадете такъв сами?

Какво ще научите:

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

4. GitHub хранилища с функция за търсене

Тук няма нищо изискано – хранилищата на GitHub са просто прославен списък.
Целта е да се покажат хранилищата и да се позволи на потребителя да ги филтрира. Използвайте официален API на GitHub за да получите хранилища за всеки потребител.

Страница на профила в GitHub - github.com/indreklasn

Какво ще научите:

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

5. Чатове в стил Reddit

Чатовете са популярен начин за комуникация поради тяхната простота и лекота на използване. Но какво наистина подхранва съвременните чат стаи? WebSockets!

Какво ще научите:

• Използвайте WebSockets, комуникация в реално време и актуализации на данни
• Работа с потребителски нива на достъп (например собственикът на чат канал има ролята admin, и други в стаята - user)
• Обработвайте и потвърждавайте формуляри - не забравяйте, че прозорецът за чат за изпращане на съобщение е input
• Създавайте и се присъединявайте към различни чатове
• Работа с лични съобщения. Потребителите могат да разговарят частно с други потребители. По същество вие ще установите WebSocket връзка между двама потребители.

6. Навигация в стил на ивици

Това, което прави тази навигация уникална, е, че изскачащият контейнер се трансформира, за да пасне на съдържанието. Има елегантност в този преход в сравнение с традиционното поведение на отваряне и затваряне на нов изскачащ прозорец.

Какво ще научите:

• Комбинирайте CSS анимации с преходи
• Затъмнете съдържанието и приложете активен клас към плаващ елемент

Опитайте първо да го направите сами, но ако имате нужда от помощ, вижте това ръководство стъпка по стъпка.

Източник: www.habr.com