Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

created faq page using plain html-css and vanilla javascript

@Osauyi

Desktop design screenshot for the FAQ accordion card coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

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

@Absorberend

Posted

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 helpful

1

@Osauyi

Posted

@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 GitHub
Discord logo

Join 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