Go to Demo
It was the last task from advanced topic in Kottans frontend course
Here I've created a tiny social friends' search page with users cards, search, sorting and filtering of them by age and name with Random User API
To my mind, this final task contains all knowledge from Kottans frontend course, because here I've used technologies from this list:
- different Array methods;
- ES6 template strings in rendering persons blocks;
- using Fetch method for getting data from API;
- sort methods;
- performance optimization - using event throttling (debounce function), when user scrolls page and filter sidebar becomes fixed;
- DOM manipulation;
- basics of design, color palettes and responsive design
Also in this task I got stuck with filters and I decided to use some instance, where I could strore current filter state.
After finishing this task I've got a huge experience with getting data from some API and further processing and displaying it on UI.