Frontend Mentor | using flexbox, js coding challenge solution

Grace• 27,890

@grace-snow

Posted over 3 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 a p 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

Arturo Simon• 1,785

@artimys

Posted over 3 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 containers position: absolute; and position usingtop and left properties. Be sure that img-card container is position: 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 a div (display: inline-block) and it's inside your li.question. You can try applying a bottom-border on your li.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

esraagamal• 600

@EsraaGamal-22

Posted over 3 years ago

@artimys can you see my code after the update?

Arturo Simon• 1,785

@artimys

Posted over 3 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

esraagamal• 600

@EsraaGamal-22

Posted over 3 years ago

@artimys can you see my code after the update of structure for the question, answer, and line elements?

Arturo Simon• 1,785

@artimys

Posted over 3 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
   });

}

esraagamal• 600

@EsraaGamal-22

Posted over 3 years ago

@artimys thanks alot for your help and your opinion 😊 the last update is done

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted over 3 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)! 😁

esraagamal• 600

@EsraaGamal-22

Posted over 3 years ago

@ApplePieGiraffe can you see my code after the update?

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted over 3 years ago

@EsraaGamal-22

The accordion works much better now. Good fix!

Grace• 27,890

@grace-snow

Posted over 3 years ago

@EsraaGamal-22 good job it's all clickable now :)

using flexbox, js

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community