created faq page using plain html-css and vanilla javascript
Design comparison
Solution retrospective
It is not complete, I can't seem to change the font-weight of the h2 when clicked due to me copying the code from stackoverflow and didn't bother to know how it worked or even why. Please can someone help me with the issues above, thanks. And also feedback are appreciated.
Community feedback
- @AbsorberendPosted about 2 years ago
Hey man,
I added to your code a little bit, this is what I came up with:
/* added to the top of your JS file: */ const faqHeaders = document.querySelectorAll('.subhead'); /* inside the btn.addEventListener after e.preventDefault(): */ faqHeaders.forEach(subhead => { subhead.style.fontWeight = "400" }); e.target.style.fontWeight = "700"; ... etc. etc.
Basically what I did was I selected the current button you press on (e.target) and gave it a styling of 700. After that I selected all the subheaders (see faqHeaders) and right before the styling of e.target I made sure all the styling of all the subheaders is set back to 400. This to make sure only the selected subheader will have a bold font.
PS: I think you're using a bit of outdated code here (with var) and maybe also some complicated functions. Try to use normal functions in this challenge and you'll be fine. I'd say keep it simple and if you get stuck during a project try to learn a bit more modern JS and come back (that's how I did it at least). StackOverflow is great and all, but only copy code if you understand it. Most of it is (imo) outdated code.
Marked as helpful1@OsauyiPosted about 2 years ago@Absorberend hi, thank you for the feedback but sometimes the codes is affecting the paragraph element or none at all. I'll try to fix it(if I can). Thanks.
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