Frontend Mentor - FAQ accordion card solution

This is a solution to the FAQ accordion card challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
• Author
• Acknowledgments

Note: Delete this note and update the table of contents based on what sections you keep.

Overview

The challenge

Users should be able to:

• View the optimal layout for the component depending on their device's screen size
• See hover states for all interactive elements on the page
• Hide/Show the answer to a question when the question is clicked

Screenshot

Links

• Solution URL: github
• Live Site URL: vercel

My process

Built with

• Mobile-first workflow
• Sass with 7-1 design pattern
• HTML 5
• Vanilla JavaScript

What I learned

I learned how to add an event listener to multiple items:

document.querySelectorAll('.list-item').forEach(item => {
    item.addEventListener('click', event => {
      if (!item.classList.contains('active')) {
          item.classList.add('active')
      } else {
          item.classList.remove('active')
      }
    })
  })

Continued development

I struggled with the layout, particularly lining up multiple images. I am going to ask the community for advice on this

Author

• Facebook - John Norman
• Frontend Mentor - @norman02
• Twitter - @JohnIsNorman

Acknowledgments

Thanks to tediko for showing me the 7-1 Sass pattern.