Skip to content

Latest commit

 

History

History
146 lines (98 loc) · 4.16 KB

README.md

File metadata and controls

146 lines (98 loc) · 4.16 KB
Raw

bvhu876# Frontend Mentor - FAQ accordion 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.

Table of contents

Overview

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

Screenshot

Desktop Mode

Desktop Mode

Mobile Mode

Mobile Mode

Active State

Active State of Accordion

Links

My process

Built with

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

What I learned

This project helped revise on using css,html stuff I learnt about (flex,grid,BEM naming convection etc.) and also gave me an opportunity to study a bit of JavaScript

These are some code snippets I was able to write:

<script>
  var list=document.querySelectorAll(".card__content__list");

  for (j=0;j<list.length;j++){
    list[j].addEventListener("click",function toggle() {
        this.classList.toggle("active");
        
    })

};
</script>
// this code was meant to find elements with  class "card__content__list"
// and connect them all to a function through an EventListener using a loop
// in order to add and remove the class "active" from them.
/* text in  .card__content__list__text get hidden at the beginning of the webpage*/
.card__content__list__text{
    /* display: none; */
    height: 0;
    /* max-height: 0; */
    overflow: hidden;
    transition: all 0.3s;
}
/* and gets revealed by changing its height to 16*5 px when its  .*/
/* parent container .card__content__list gets the  .active class toggled in it. */
.card__content__list.active .card__content__list__text{
    /* display: flex; */
    /* height:auto; */
    height: 5rem;
    overflow: scroll;
}
/* when the parent container gets active,the img meant to represent the list */
/* would be turned to a minus sign. */
.card__content__list.active .card__content__list__title img{
    content:url("assets/images/icon-minus.svg");
    /* used to change image sources for examples. */
    /* border: thin solid #000; */
}

/* this changes the cursor to a hand -pointing cursor(often used for links.) */
.active, .card__content__list__title:hover {
    /* background-color: var(--Light-pink); */
    cursor:pointer;
  }

Continued development

From this project, I think I want to learn more about JavaScript and toggling classes since

that is what I mostly suffered with.

Useful resources

  • A video that helped me out - This helped me to understand how to connect elements with a certain class and assign certain CSS properties to them using a custom class.

Author