heisemmaco-dev / faq-accordion-main-new-one

Frontend Mentor - Product preview card component solution

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

Inshot challenge

The challenge

Users should be able to:

• Hide/Show the answer to a question when the question is clicked
• Navigate the questions and hide/show answers using keyboard navigation alone
• View the optimal layout for the interface depending on their device's screen size
• See hover and focus states for all interactive elements on the page

Links

Live Site

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• javascript

What I learned

in this project i learned how to manipulate the dom with javascript

<h1>Some HTML code I'm proud of</h1>
<main>
<section>
<img>

<button>click</button>

.proud-of-this-css {
  :hover
  padding 
  display: grid
}

let me = document.getElementById("id name")

me.classList.add("classElement")

 if (!isItemOpen) {
            item.classList.toggle("open")
            
}

Continued development

i will like to focus on how to use javascript to manipulate the dom, learning more javascript symtax to help modify the frondend of a web-page

Author

• Frontend Mentor - @Moderateemmaco
• Twitter - @heisemmaco-dev