Accordion challenge with javascript

hi your project looks very good and i can give a few advice firstly i wouldnt recommend using inline-css(css inside a html tag element) nor internal(css in the head section) you should create a file just for css and then link it on your html file and the same goes for javascript

also using display:flex will buy you so much time and also make your work so much easier for you and lastly

i saw you wrote "item.querySelector('img')" this variable multiple times if you have a variable that you will use multiple times it would be so much better if you just define it once( const plusIcon = document.querySelector('img')) and use it as a defined version this will make your code look more readable easy to find bugs and also much cleaner

hope that helps

Hello there 👋. Good job on completing the challenge !

I have other suggestions about your code that might interest you.

CSS Reset 🔄:

• You should use a CSS reset. A CSS reset is a set of CSS rules that are applied to a webpage in order to remove the default styling of different browsers. Here can see some examples of default styles in some browsers that could potentially pose issues:

  • The body element has a default margin of around 8px, which might lead to a scrollbar.
  • Paragraphs and text elements have default margins.
  • Even if you use list-style: none;, the <ul> element reserves some unnecessary padding-left space.

  CSS resets that are widely used:

  • Reset CSS
  • "My Custom CSS Reset" by JoshWComeau

HTML 🏷️:

• Wrap the page's whole main content in the <main> tag.

• You should not use inline-CSS because it is not a good practice. Instead, you should use an external stylesheet to style your page. By doing this, you will be able to have a better organization of your code and will be able to understand it better.

I hope you find it useful! 😄

Happy coding!

Hello @Jonathanbees!

Your project looks great!

And I have to say: Everything you've been through while doing this project is part of the learning process. Keep going! 🦾

Suggestions for improvement:

• One way you can align the text with the (plus/minus) image is to set display: flex; align-items: center; to the parent container.

• Another suggestion is to place the .attribution outside the card, so it doesn't take up space unnecessarily. So you can use the space to place the 4th question that is currently not showing on your project.

I hope it helps!

Other than that, you did a great job!