Страхотна форма на кредитна карта с плавни и приятни микровзаимодействия. Включва форматиране на номера, проверка и автоматично разпознаване на типа карта. Той е изграден на Vue.js и също е напълно отзивчив. (Можеш да видиш тук.)
Хистограмата е диаграма или графика, която представя категорични данни с правоъгълни ленти с височини или дължини, пропорционални на стойностите, които представляват.
Те могат да се прилагат вертикално или хоризонтално. Вертикалната лентова диаграма понякога се нарича линейна диаграма.
Какво ще научите:
Показвайте данните по структуриран и разбираем начин
Допълнително: Научете как да използвате елемента canvas и как да рисувате елементи с него
Тук можете да намерите данни за световното население. Сортирани са по години.
3. Twitter Heart Animation
През 2016 г. Twitter представи тази невероятна анимация за своите туитове. Към 2019 г. той все още изглежда като част, така че защо не създадете такъв сами?
Какво ще научите:
Работа с CSS атрибут keyframes
Манипулирайте и анимирайте HTML елементи
Комбинирайте JavaScript, HTML и CSS
4. GitHub хранилища с функция за търсене
Тук няма нищо изискано – хранилищата на GitHub са просто прославен списък.
Целта е да се покажат хранилищата и да се позволи на потребителя да ги филтрира. Използвайте официален API на GitHub за да получите хранилища за всеки потребител.
Чатовете са популярен начин за комуникация поради тяхната простота и лекота на използване. Но какво наистина подхранва съвременните чат стаи? WebSockets!
Какво ще научите:
Използвайте WebSockets, комуникация в реално време и актуализации на данни
Работа с потребителски нива на достъп (например собственикът на чат канал има ролята admin, и други в стаята - user)
Обработвайте и потвърждавайте формуляри - не забравяйте, че прозорецът за чат за изпращане на съобщение е input
Създавайте и се присъединявайте към различни чатове
Работа с лични съобщения. Потребителите могат да разговарят частно с други потребители. По същество вие ще установите WebSocket връзка между двама потребители.
6. Навигация в стил на ивици
Това, което прави тази навигация уникална, е, че изскачащият контейнер се трансформира, за да пасне на съдържанието. Има елегантност в този преход в сравнение с традиционното поведение на отваряне и затваряне на нов изскачащ прозорец.
Какво ще научите:
Комбинирайте CSS анимации с преходи
Затъмнете съдържанието и приложете активен клас към плаващ елемент