Submitted 12 months ago
REST Countries API with color theme switcher using CSS and JS
@Ahmadhassan0
Design comparison
SolutionDesign
Solution retrospective
JS file working fine for index.html but making problems for detail.html because some elements are not present in detail.html like search input, should I have to make 2 separate JS files to avoid errors🤔
Community feedback
- @matiasluduena23Posted 12 months ago
HI Ahmad Hassan’s ! Congratulation to finished the challenge!!! It looks really Good!
- You can separate you files and use modules to keep you code clean. This might help you.
- This challenge is big, with a lot of small details to solve. I can't wait to do it. What I noticed in your dropdown list, is that it's show when you clicked on the arrow, probably is better for the UX if it open when you click on you
p.dropDown__filter__text
. You can target that element in your js file and add theevenListener('click'...)
instead of the arrow . And ap.dropDown__filter__text{ cursor:pointer }
- And an other thing that maybe is good for the UX is that when you click on the item of .dropDown__box the list close it. For this you can get all the element and listener for a click. Maybe you can use this inside a function.
.dropDown__box.querySelectorAll(p).addEventListener("click", (e) => { dropDownBox.classList.remove("active"); }
By the way your animation look great. Hope this help you!
Good code!
Matias
Marked as helpful0 - @Ahmadhassan0Posted 12 months ago
Thanks Matias these things are very helpful, especially modules 😊 I was thinking about the solution but I did not find😅
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord