Design comparison
Solution retrospective
Hello front-end community! In this challenge, I had a lot of trouble getting the functionality done. So I took the easy way out and coded it, at first I tried to make an eventListener for each element through a loop, but I couldn't get it to work. So if you have any advice, it's welcome and I'll appreciate it!
Community feedback
- @thisisharsh7Posted about 2 years ago
Hey Goorezy, Well done ! your solution works well. In order to answer your query I would like to suggest some key points you should consider
- Avoid writing more code on html, I go through your code and I found your html contain lots of div instead use div only where it need. Using lots of div and classes will mesh you up when you write code for CSS and JavaScript.
- Avoid pasting full SVG code on html instead use
<img src=".svg" alt="svg here">
this will make your html content shorter and readable. - When you work with JavaScript if there are no. of DOM elements and then adding every element a event listener this creates problem. Avoid using many query selector in same type of event instead use query selector all like for button click you can write
const btn = document.querySelecterAll("button");
this will select all the buttons on your page then you can differentiate button by giving them properid
and then apply event listener likebtn.forEach(sbtn=> {sbtn.addEventListener("click", function)});
heresbtn
indicates a single button.
Hope it help you in improving your solution....
0 - @vanzasetiaPosted about 2 years ago
Hi, Goorezy! π
Before diving into JavaScript, we need to get the HTML right first. I suggest using the native HTML elements for the accordion panels,
summary
anddetails
. This way, you don't need to worry about the accessibility of the accordion since they are accessible by default. There's no way for screenreader users to know whether or not the accordion is expanded or collapsed.Next for the CSS, I suggest creating a custom
:focus-visible
styling for the accordion. This will let people who use a keyboard to navigate the site know where they are currently on the page.For JavaScript, I want to say that as a user I have to close the expanded accordion first before I can expand another accordion panel. This is not a good user experience since the user can expect that the app is not working. So, the better approach is to create a function that automatically closes the expanded accordion.
I would recommend using
forEach
to check every accordion element. If there is an opened accordion, you want to close it. After that, the clicked accordion should be expanded.That's it! I hope this helps! π
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