Design comparison
Solution retrospective
Hello, i'm finished next challenge. I spent two days on this. Things which i don't know how to implement. If someone can look for code and give me some feedback it will be great maybe gave mi some tips.
JS:
- arrowItems.forEach, i dont know how to rotate only one arrow which i click, i dont wanna make two eventlistener. Probably it will be simple but still im not good in JS
CSS
- Problem with orange box, i do overflow hidden on the box, so the primary image it works great, but the orange box same is hidden when go out of the box. I try put z-index 1000 and doesn't work ;/
Community feedback
- @vanzasetiaPosted over 2 years ago
Greetings, Marcin! 👋
If you are not confident yet with the JavaScript then I highly suggest doing the HTML CSS challenges first. Also, it's going to make you comfortable with the workflow and hopefully, along the way gets some feedback to help you have a great fundamental of the HTML and CSS. 😉
Once, you are confident with JavaScript, you can refactor this site with the following guide.
- First, I would recommend using the native HTML elements to create the accordions,
details
andsummary
. By, default they are accessible so you don't need to worry about accessibility. - Second, the native accordion has already the opening and closing functionality. However, you can still have JavaScript that prevents the user from opening multiple accordion panels at a time. So, you can create a function that only allows the user to open one accordion panel. This way, you prevent the card from having too much height (because the accordion panels are opened).
Also, some feedback.
- The illustrations are decorative images which means that if they don't exist, there will be no content or information that is missing. So, I highly recommend leaving the
alt
empty. - Changing the
html
or root font size can cause huge accessibility implications for those of the users with different font size or zoom requirements. So, I suggest setting thebody
font size instead. - Use
rem
or sometimesem
unit instead ofpx
. Usingpx
will not allow the users to control the size of the page based on their needs.
That's it! I hope this information is useful and good luck! 😁
Marked as helpful2 - First, I would recommend using the native HTML elements to create the accordions,
- @MarcusTuliusCiceronPosted over 2 years ago
Hi congrats on this challenge, here what you can try to fix your issue:
CSS
.active .box__accordion--arrow { position: relative; height: 10px; transition: 0.3s; rotate: 180; }
JS
function openAccordionItems() { if (this.nextElementSibling.classList.contains('active')) { this.nextElementSibling.classList.remove('active') this.style.fontWeight = "400"; } else { this.nextElementSibling.classList.add('active') this.style.fontWeight = "700"; } }
This will rotate only the arrow classes inside the active classes so you don't have to modify it inside the JS and you will have only one event listener. I'm not sure about this CSS selector I usually write in SCSS but it should be ok.
Hope this will help you :)
Happy coding :D
Marked as helpful0@vanzasetiaPosted over 2 years ago@MarcusTuliusCiceron Hi Ciceron! It's interesting that you aren't sure about something in CSS because usually, you write it in Sass (with SCSS syntax).
.active .box__accordion--arrow
, the browser reads CSS from right to left so it means that,- First, the browser is going to search for the element that has a class name of
.box__accordion--arrow
- Second, the browser is going to read the previous selector and as a result, it is going to search only the
.box__accordion--arrow
that has a parent element that contains an.active
class.
Reference: see the discussion on Stack Overflow.
Hope this clears the confusion that you have! Happy coding too! 😄
P.S. See the compiled code to understand what the Sass code is doing. 😉
1 - First, the browser is going to search for the element that has a class name of
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