Design comparison
Solution retrospective
rate my design please, Any feedback and suggestions on how I can improve are very welcome!
Community feedback
- @grace-snowPosted about 4 years ago
Hi,
I think the whole FAQ should be clickable to open close. At the moment that icon being the only trigger for the faq is a really small click trrget for people and expected behaviour is that you can click a whole row in designs like this.
I would advise simplifying your html. At the moment, assistive tech would announce your faq list as having double the number of items because you've put the answers inside their own
<li>
s. Instead, if you nested inside the faq li a button>h2 for the question, followed by ap
for the answer, all would sit within the same list item.Having looked at your js, if you simplified your html like this it could all be a lot simpler as well. You could just toggle an active class to the faq-question container and use the presence of that class to show/hide the faq.
Either way, some of the styles youre adding in js are not really necessary (eg font size increasing on the faq when open instead of just making bold) and might be better just done with a class in css.
I hope those are helpful ideas, keep going
1 - @artimysPosted about 4 years ago
Hi EsraaGamal-22, nice attempt at the solution.
Some tips on the desktop images:
Utilize the
background-image
property for the shadow image on<div class='img-card'>
container. For the desk and box images, make those containersposition: absolute;
and position usingtop
andleft
properties. Be sure thatimg-card
container isposition: relative
. You'll notice that you can control the images position relative to your container.Suggestion on Answer containers:
Another way to think of the show/hide for answers. Imagine your
li.answer
is adiv
(display: inline-block) and it's inside yourli.question
. You can try applying abottom-border
on yourli.question
and remove<li class='line'>
item.Other:
- FQA heading typo and apply hover styling on the question
- apply click event to question like the arrow to display answer
Hope it helps and keep on coding
1@artimysPosted about 4 years ago@EsraaGamal-22 In regards to the images and the clickable question I do see much improvement 👍
Now if you would still like to improve on this solution I would highly suggest refactoring how the HTML is structured for the question, answer and lines elements. You can look at my suggestion from my original comment and @grace-snow's comment below.
Understanding how to setup the show/hide technique is something you'll come across a lot in your web journey. Once the markup is taken care of, Javascript will follow in the implementation as per @grace-snow comment about toggling an active class on question container to show answer.
As always keep on coding and here to help
0@EsraaGamal-22Posted about 4 years ago@artimys can you see my code after the update of structure for the question, answer, and line elements?
0@artimysPosted almost 4 years ago@EsraaGamal-22 yes much improvement!!
At this point for the Javascript if still interested I recommend improving the
onclick
you have on each question to an event listener.var questions = document.getElementsByClassName("question"); // loop through each question for(i=0; i < questions.length; i++) { // add event listener to each question questions[i].addEventListener("click", function(){ /* add behavior to hide/show answer. there's a special keyword called "this" that represents the element that was trigger by the event, check it out in the console */ console.log(this); debugger }); }
0@EsraaGamal-22Posted almost 4 years ago@artimys thanks alot for your help and your opinion 😊 the last update is done
0 - @ApplePieGiraffePosted about 4 years ago
Hey, esraagamal! 👋
It's me again! 😆
Nice effort on this challenge! 👍
Your solution looks good in the desktop layout, but as artimys mentioned, the illustration and floating cube seem to move all around the place when the page is resized. Following artimys' suggestions should help a lot though! 🙂
Also, for some reason, I can't open any of the FAQs on the accordion card. You might want to look into that to see what's going on. 😉
Keep coding (and happy coding, too)! 😁
0@EsraaGamal-22Posted about 4 years ago@ApplePieGiraffe can you see my code after the update?
0@ApplePieGiraffePosted about 4 years ago@EsraaGamal-22
The accordion works much better now. Good fix!
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