Friends App by natashafir #465
Conversation
|
|
||
| function initialApp() { | ||
| fetch(URL) | ||
| .then(response => response.json()) |
There was a problem hiding this comment.
You should handle fetch response status - https://www.tjvantoll.com/2015/09/13/fetch-and-errors/
| const input = document.querySelector('input'); | ||
|
|
||
| function initialApp() { | ||
| fetch(URL) |
There was a problem hiding this comment.
You should fetch data and handle requests in a separate function.
| function getSortedFriends(dataToSort, choosedRadio) { | ||
| if (choosedRadio == 'old-first' || choosedRadio == 'young-first'){ | ||
| dataToSort.sort(function(x, y){ | ||
| return x.age - y.age; | ||
| }); | ||
| if(choosedRadio == 'old-first'){ | ||
| dataToSort.reverse(); | ||
| } | ||
| } else if (choosedRadio == 'name-AZ' || choosedRadio == 'name-ZA'){ | ||
| dataToSort.sort(function(x, y){ | ||
| let a = x.name.toUpperCase(), | ||
| b = y.name.toUpperCase(); | ||
| return a == b ? 0 : a > b ? 1 : -1; | ||
| }); | ||
| if (choosedRadio == 'name-ZA'){ | ||
| dataToSort.reverse(); | ||
| } | ||
| } else if (choosedRadio == 'all' || choosedRadio == 'female' || choosedRadio == 'male'){ | ||
| filterBy = choosedRadio; | ||
| } | ||
|
|
||
| if (filterBy === 'all') { | ||
| return dataToSort; | ||
| } else { | ||
| return dataToSort.filter(element => element.gender === filterBy); | ||
| } | ||
| } |
There was a problem hiding this comment.
Single responsibility - your functions should do only one job. As an example function in which you fetch users should only fetch them and not render, transform or process them in other ways. All these things should be done in another place, outside your function.
The same applied to the sort function, which usually does all types of sorting 😉
So, simplify this function
| CARDS.innerHTML = ''; | ||
| let cards = ''; | ||
| item.forEach(elem => { | ||
| cards +=createCardItem(elem); |
There was a problem hiding this comment.
IMO, this function is redundant. Just put string here.
There was a problem hiding this comment.
If I do, app doesn't work. Or I don’t understand what you meant.
There was a problem hiding this comment.
Please show an example of code how you doing this.
Friends App
Demo
Code base
The code is submitted in a dedicated feature branch.
Please, review.