Design comparison
Solution retrospective
This was my first solution using JavaScript and event listeners so that was cool. In the future I will build responsive apps.
What challenges did you encounter, and how did you overcome them?I was unsure how to hide and show elements at first but I was able to find very helpful solutions on YouTube and Stack Overflow.
What specific areas of your project would you like help with?I have not learned responsive design yet so that's why there is no grid or flex display. I would like to know how I can make the background image the same width as the window. If there's any more optimizations or tips you can add let me know.
Community feedback
- @Alex-Archer-IPosted 6 months ago
Hi!
To fix your background issue you can use those rules:
body { background-image: url("../assets/images/background-pattern-desktop.svg"); background-size: contain; background-repeat: no-repeat; }
Also I can suggest you a little improvement for your code. You can use
for-of
to iterate through array of elements which a bit easier. Like this:for (const element of questions) { plus[i].addEventListener("click", () => { plus[i].classList.toggle("hidden") minus[i].classList.toggle("hidden") answers[i].classList.toggle("hidden") }) }
And you can declare separate function and pass it as callback in
addeventListener
. It will make a code leaner and it's considered a good practice - to not repeat code.Hope it'll help. Happy coding =)
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