Skip to content

Conversation

@RanGedamo
Copy link

@RanGedamo RanGedamo commented Dec 15, 2024

Updated JSON file with extra details to match the design images in the design folder.

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.

  1. Generally Don't use innerHTML

  2. Style your code with classes and not js

  3. Good job on removing the event listeners

top: 0;
/* position: fixed; */
/* top: 0; */
left: 0;
Copy link
Member

Choose a reason for hiding this comment

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

Remove the comments

display: block;
max-width: 100%;
/* max-width: 100%; */
object-fit: cover;
Copy link
Member

Choose a reason for hiding this comment

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

Same here remove comment

try {
loading(isLoading);
const result = await fetch(`../FullCountriesData.json`);
if (!result.ok) {
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 extracted into constants file

}
const json = await result.json();
// console.log(json);
return json;
Copy link
Member

Choose a reason for hiding this comment

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

Remove this comment


if (loader) {
loader.innerHTML = `
<div class="loader">
Copy link
Member

Choose a reason for hiding this comment

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

Don't use innerHTMl, it's a dangerous method

themeIcon.classList.remove('fa-sun');
if (darkMode) {
document.body.style.backgroundColor = '#ffff';
themeText.innerHTML = 'Dark Mode';
Copy link
Member

Choose a reason for hiding this comment

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

Use classes in here as well to style elements.

if (!countryName) return;

const myCountry = data?.find(({ name }) => name === countryName);
console.log(countryName);
Copy link
Member

Choose a reason for hiding this comment

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

Good work on destructuring here

if (name.slice(0, searchLength).toLowerCase() == searchInput)
return name;
else if (name[space - 1] === ' ' && name.slice(space, space + searchLength).toLowerCase() == searchInput)
return name;
Copy link
Member

Choose a reason for hiding this comment

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

Extract your complex condition into a variable or a function

document.addEventListener('click', handleOutsideClick);
} else {
document.removeEventListener('click', handleOutsideClick);
}
Copy link
Member

Choose a reason for hiding this comment

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

Amazing work on removing your event listeners, it's really important practice

const header = document.querySelector('.dropdown-header');

if (!body.contains(event.target) && !header.contains(event.target)) {
wrapper.classList.remove('open');
Copy link
Member

Choose a reason for hiding this comment

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

Same thing in here, extract complex logic into a variable or a function

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