Countries assignment #17
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
|
|
||
| // Fetch the JSON data | ||
| fetch('./CountriesData.json') | ||
| .then(response => response.json()) | ||
|
Member
There was a problem hiding this comment. Hardcoded strings should be saved into a constants file |
||
| .then(countries => { | ||
| const urlParams = new URLSearchParams(window.location.search); | ||
|
Member
There was a problem hiding this comment. Extract thing into a separate function, huge functions are not readable |
||
| const countryName = urlParams.get('country'); | ||
|
|
||
| const country = countries.find(c => | ||
| c.name.toLowerCase() === countryName.toLowerCase() | ||
| ); | ||
|
|
||
| // If the country is found, display its details | ||
| if (country) { | ||
| const countryContainer = document.createElement('div'); | ||
| countryContainer.className = 'country-details'; | ||
|
|
||
| const flagContainer = document.createElement('div'); | ||
| flagContainer.className = 'country-flag'; | ||
| const flagImage = document.createElement('img'); | ||
| flagImage.src = country.flag; | ||
| flagImage.alt = `${country.name} Flag`; | ||
| flagContainer.appendChild(flagImage); | ||
|
|
||
| const infoContainer = document.createElement('div'); | ||
| infoContainer.className = 'country-info'; | ||
|
|
||
| const countryTitle = document.createElement('h1'); | ||
| countryTitle.textContent = country.name; | ||
| infoContainer.appendChild(countryTitle); | ||
|
|
||
| const details = [ | ||
| { label: 'Population', value: country.population.toLocaleString() }, | ||
| { label: 'Region', value: country.region }, | ||
| { label: 'Capital', value: country.capital || 'N/A' } | ||
| ]; | ||
|
|
||
| details.forEach(detail => { | ||
| const detailElement = document.createElement('p'); | ||
| detailElement.innerHTML = `<strong>${detail.label}:</strong> ${detail.value}`; | ||
| infoContainer.appendChild(detailElement); | ||
|
Member
There was a problem hiding this comment. Do not use |
||
| }); | ||
|
|
||
| countryContainer.appendChild(flagContainer); | ||
| countryContainer.appendChild(infoContainer); | ||
|
|
||
|
Member
There was a problem hiding this comment. Just a tip - if you will need to add a lot of children's save the children into an array and loop the array to remove code duplication For those 2 lines its ok |
||
| document.body.appendChild(countryContainer); | ||
|
|
||
| const loader = document.getElementById('loader'); | ||
| if (loader) { | ||
| loader.style.display = 'none'; | ||
| } | ||
|
Member
There was a problem hiding this comment. Do not style your elements with js, use css classes |
||
| } else { | ||
| const errorMessage = document.createElement('p'); | ||
| errorMessage.textContent = 'Country not found!'; | ||
| document.body.appendChild(errorMessage); | ||
| } | ||
| }) | ||
| .catch(error => { | ||
| console.error('Error loading the JSON data:', error); | ||
| }); | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,125 @@ | ||
| fetch('CountriesData.json') | ||
| .then((response) => response.json()) | ||
|
Member
There was a problem hiding this comment. Same thing in here about the hardcoded strings into constants |
||
| .then((countries) => { | ||
| const countriesContainer = document.getElementById('countries-g'); | ||
| if (!countriesContainer) { | ||
| console.error('countries-g container not found in the DOM!'); | ||
| return; | ||
| } | ||
|
|
||
| // global variable | ||
| let allCountries = countries; | ||
|
|
||
|
|
||
| function displayCountries(countriesToDisplay) { | ||
| countriesContainer.innerHTML = ''; // Cleaning all the current HTML in the div | ||
| countriesToDisplay.forEach((country) => { | ||
|
Member
There was a problem hiding this comment. Same comment in here do not use global variable |
||
| const countryDiv = document.createElement('div'); | ||
| countryDiv.className = 'country'; | ||
|
|
||
| const countryLink = document.createElement('a'); | ||
| countryLink.href = `details.html?country=${country.name}`; | ||
| countryDiv.appendChild(countryLink); | ||
|
|
||
| const countryflagDiv = document.createElement('div'); | ||
| countryflagDiv.className = 'country-flag'; | ||
|
|
||
| const imgFlag = document.createElement('img'); | ||
| imgFlag.src = `${country.flag}`; | ||
| imgFlag.alt = `${country.name}`; | ||
| countryflagDiv.appendChild(imgFlag); | ||
| countryLink.appendChild(countryflagDiv); | ||
|
|
||
| const countryInfo = document.createElement('div'); | ||
| countryInfo.className = 'country-info'; | ||
|
|
||
| const countryH = document.createElement('h2'); | ||
| countryH.textContent = `${country.name}`; | ||
| countryInfo.appendChild(countryH); | ||
|
|
||
| const countryPopulation = document.createElement('p'); | ||
| const strongP = document.createElement('strong'); | ||
| strongP.textContent = 'Population: '; | ||
| countryPopulation.appendChild(strongP); | ||
| countryPopulation.appendChild(document.createTextNode(country.population)); | ||
| countryInfo.appendChild(countryPopulation); | ||
|
|
||
| const countryRegion = document.createElement('p'); | ||
| const strongR = document.createElement('strong'); | ||
| strongR.textContent = 'Region: '; | ||
| countryRegion.appendChild(strongR); | ||
| countryRegion.appendChild(document.createTextNode(country.region)); | ||
| countryInfo.appendChild(countryRegion); | ||
|
|
||
| const countryCapital = document.createElement('p'); | ||
| const strongC = document.createElement('strong'); | ||
| strongC.textContent = 'Capital: '; | ||
| countryCapital.appendChild(strongC); | ||
| countryCapital.appendChild(document.createTextNode(country.capital)); | ||
| countryInfo.appendChild(countryCapital); | ||
|
|
||
| countryDiv.appendChild(countryInfo); | ||
| countriesContainer.appendChild(countryDiv); | ||
| }); | ||
| } | ||
|
|
||
|
|
||
| displayCountries(allCountries); | ||
|
|
||
| // Filter by input | ||
| function filteredCountriesByInput() { | ||
| const filterText = document.getElementById('country-filter').value.toLowerCase(); | ||
|
|
||
| // Filter the countries based on the input | ||
| const filteredCountries = allCountries.filter(country => | ||
| Object.values(country).some(value => | ||
| value.toString().toLowerCase().includes(filterText) | ||
| ) | ||
| ); | ||
|
|
||
| // Display the filtered results | ||
| displayCountries(filteredCountries); | ||
| } | ||
|
|
||
| // Add event listener to the input field | ||
| document.getElementById('country-filter').addEventListener('input', filteredCountriesByInput); | ||
|
|
||
| // filter by region | ||
| const filterItems = document.querySelectorAll('#dropdown-wrapper ul li'); | ||
| filterItems.forEach((item) => { | ||
| item.addEventListener('click', () => { | ||
| const region = item.getAttribute('data-region'); | ||
|
|
||
| let filteredCountries; | ||
| if (region === 'all') { | ||
| filteredCountries = allCountries; | ||
| } else { | ||
| filteredCountries = allCountries.filter((country) => { | ||
| return country.region.toLowerCase() === region; | ||
| }); | ||
| } | ||
|
|
||
| // the output | ||
| if (filteredCountries.length === 0) { | ||
| countriesContainer.innerHTML = '<p>No countries found.</p>'; | ||
| } else { | ||
| displayCountries(filteredCountries); | ||
| } | ||
|
|
||
| // close the menu after the choice | ||
| document.getElementById('dropdown-wrapper').classList.remove('open'); | ||
| }); | ||
| }); | ||
| }) | ||
| .catch((error) => { | ||
| console.error('Error loading the JSON data:', error); | ||
| }); | ||
|
|
||
| // open the menu of the filter | ||
| document.addEventListener('DOMContentLoaded', function () { | ||
| const dropdownHeader = document.getElementById('dropdown-header'); | ||
| const dropdownWrapper = document.getElementById('dropdown-wrapper'); | ||
|
|
||
| dropdownHeader.addEventListener('click', function () { | ||
| dropdownWrapper.classList.toggle('open'); | ||
| }); | ||
| }); | ||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why do you need both class and id?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
because I used get element by id in the js.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Cant you get it via class? I mean you already have a class loader.