-
Notifications
You must be signed in to change notification settings - Fork 28
Ran : Add Countries Project #8
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Conversation
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.
-
Generally Don't use
innerHTML -
Style your code with classes and not js
-
Good job on removing the event listeners
| top: 0; | ||
| /* position: fixed; */ | ||
| /* top: 0; */ | ||
| left: 0; |
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.
Remove the comments
| display: block; | ||
| max-width: 100%; | ||
| /* max-width: 100%; */ | ||
| object-fit: cover; |
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.
Same here remove comment
| try { | ||
| loading(isLoading); | ||
| const result = await fetch(`../FullCountriesData.json`); | ||
| if (!result.ok) { |
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.
Hardcoded strings should be extracted into constants file
| } | ||
| const json = await result.json(); | ||
| // console.log(json); | ||
| return json; |
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.
Remove this comment
|
|
||
| if (loader) { | ||
| loader.innerHTML = ` | ||
| <div class="loader"> |
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.
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'; |
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.
Use classes in here as well to style elements.
| if (!countryName) return; | ||
|
|
||
| const myCountry = data?.find(({ name }) => name === countryName); | ||
| console.log(countryName); |
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.
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; |
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.
Extract your complex condition into a variable or a function
| document.addEventListener('click', handleOutsideClick); | ||
| } else { | ||
| document.removeEventListener('click', handleOutsideClick); | ||
| } |
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.
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'); |
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.
Same thing in here, extract complex logic into a variable or a function
Updated JSON file with extra details to match the design images in the design folder.