@vanzasetia
Posted
Hi, Joshua Watson! π
For the icon rotation, as far as the CSS you can use transform
property. After that, you can add a styling where if the button
has the class of active
then make the icon rotate 180deg.
Also, there are a couple of things that you need to do to improve the current site.
- Currently, even though you have used
button
elements to create the accordion, there is still no way for screenreaders to know whether or not the accordion is opened or already closed. So, I would recommend using the native HTML elements instead,summary
anddetails
tags. By default, they already come with the close-and-open functionality and is accessible by screenreaders. - So, for the JavaScript, I would recommend creating a function where it only allows the users to open one accordion panel at a time. It is a good feature to add because it will prevent the card from stretching vertically because all the accordion panels are opened.
- Avoid using JavaScript to add styling (unless you've no other option). JavaScript allows you to change the CSS code using the
style
property. But, to make debugging easier and improve code maintainability, itβs best to avoid it. Use CSS classes instead. - I would recommend using ES6 JavaScript (such as using
const
andlet
,forEach
, etc). ES6 has a great support so I would recommend using it (or learning it if you haven't learned about it).
That's it! Hope this helps. Good luck on finishing this challenge! π
Marked as helpful
@JoshLanderz
Posted
@vanzasetia Hey there!, thank you so much for the help and tips :)
@vanzasetia
Posted
@JoshLander18 You're welcome, Joshua! π