added html and js #7
Conversation
yuvalbenshitrit
left a comment
yuvalbenshitrit
left a comment
There was a problem hiding this comment.
The code structure is clear, and you've followed good practices
| const loader = document.querySelector('.loader'); | ||
| loader.style.display = 'none'; | ||
|
|
||
| detailsContainer.innerHTML = ` |
There was a problem hiding this comment.
Ensure the use of backticks (``) for the innerHTML content
| fetchCountryData(countryName); | ||
| } | ||
| else { | ||
| console.error('Country name not found'); |
There was a problem hiding this comment.
Provide feedback to user if country name is not found
| const displayCountryDetails = (country) => { | ||
| const detailsContainer = document.querySelector('.country-details'); | ||
| const loader = document.querySelector('.loader'); | ||
| loader.style.display = 'none'; |
There was a problem hiding this comment.
Hide loader after data is fetched
| const dropdownWrapper = document.querySelector('.dropdown-wrapper'); | ||
|
|
||
| if (dropdownWrapper.classList.contains('open')) { | ||
| dropdownWrapper.classList.remove('open'); |
There was a problem hiding this comment.
Close dropdown after selection
| }); | ||
|
|
||
| const fetchCountryData = (countryName) => { | ||
| fetch('./CountriesData.json') |
There was a problem hiding this comment.
Avoid calling fetch repeatedly for the same data (e.g., when filtering regions). Cache the data once:
| dropdownWrapper.classList.remove('open'); | ||
| } | ||
|
|
||
| const filterByRegion = (region) => { |
There was a problem hiding this comment.
Consider displaying a loader while filtering data by region. This ensures the user is aware that a background process is ongoing.
| } | ||
| }); | ||
|
|
||
| const fetchCountryData = (countryName) => { |
There was a problem hiding this comment.
Display a loader before fetching country data
2 participants
No description provided.