Skip to content

Conversation

@Chen-kaduri
Copy link

doing the project about countrie with use in css, js, html, json.
added filter function fetch the data from json.

Copy link
Member

@Tamir198 Tamir198 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please review my comments, they apply for your code in general.
I didn`t want to write the same thing again and again

<!-- Loader -->
<div class="loader">
<div class="loader" id="loader">
<div class="spinner">
Copy link
Member

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 ?


if (!countryName) {
document.getElementById('country-name').innerHTML = '<p>No country selected!</p>';
return;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do not use innerHTML , it is a dangerous method

}

fetch('CountriesData.json')
.then(response => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hardcoded strings should be saved into constants file


//If the country is found, display its details
if (country) {
// Create the main container
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please avoid explaining the code with comments, is a bad practice.
The code should explain itself


// Create the flag section
const flagContainer = document.createElement('div');
flagContainer.className = 'country-flag';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you need to explain this with comment you can extract this into function named generateFlagSection and just call it instead of the comment

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This comment apply to everywhere in your code

const countryTitle = document.createElement('h1');
countryTitle.textContent = country.name;
infoContainer.appendChild(countryTitle);

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is good instead of using innerHTML

countryRegion.appendChild(strongR);
countryRegion.appendChild(document.createTextNode(country.region));
countryInfo.appendChild(countryRegion);

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In this page you have a lot of similar code again an again, can you think about a way to avoid it?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants