Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
26
Comments
4
Vinayak
@V102002

All comments

  • Vasiliki-Georgiou•290
    @Vasiliki-Georgiou
    Submitted about 1 year ago
    What specific areas of your project would you like help with?

    I have an issue with the accordion, sometimes the plus and minus buttons bug and I have to reload the page for them to function again.

    FAQ Accordion with HTML, CSS and JS

    2
    Vinayak•320
    @V102002
    Posted about 1 year ago

    Instead of : let minusSvg = '<svg xmlns="http://www.w3.org/2000/svg" width="30" height="31" fill="none" viewBox="0 0 30 31"><path fill="#301534" d="M15 3.313A12.187 12.187 0 1 0 27.188 15.5 12.2 12.2 0 0 0 15 3.312Zm4.688 13.124h-9.375a.938.938 0 0 1 0-1.875h9.374a.938.938 0 0 1 0 1.876Z"/></svg>';

    Why not try:

    let minusSvg=document.querySelector("name of the image class"); And for plusSvg as well.

    For the accordians, we have to access each of them, so use a forEach loop access the icons and change them in the conditional statements It will look something like this

    const accordions = document.querySelectorAll('.accordion'); // get the accordion const backdrop = document.querySelector('.backdrop');

    accordions.forEach(accordion => { // access the answer and the image from each accordion const icon = accordion.querySelector(".icon"); const ans = accordion.querySelector(".answer");

    // adding a click eventListener to each accordion
    accordion.addEventListener("click", () => {
        ans.classList.toggle("active"); // adding the active class based on toggle
    
        // check if the accordion has been clicked
        if (ans.classList.contains("active")) {
            icon.src = "./assets/images/icon-minus.svg";
        } else {
            icon.src = "./assets/images/icon-plus.svg";
        }
    });
    

    }); Hope this helps!

  • Stefan Bojkovski•720
    @xStephx
    Submitted about 1 year ago

    Solution Interactive rating component

    #tailwind-css
    7
    Vinayak•320
    @V102002
    Posted about 1 year ago

    Looks great! I am going to be starting challenges where JS has to be used so I'll start with this challenge soon. Saw your GitHub page, it looks so cool! You must have worked really hard to get to where you are! By the way, do you have advice on how to write cleaner CSS, I want to try doing it on my own before using a framework like bootstrap or tailwind later

  • Stefan Bojkovski•720
    @xStephx
    Submitted about 1 year ago

    Solution FAQ accordion

    #tailwind-css
    7
    Vinayak•320
    @V102002
    Posted about 1 year ago

    This is great! Just one question, how did you get your screenshot to be displayed because for some reason for it isn't working but the site is displayed correctly when previewed

  • Vinayak•320
    @V102002
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    I am proud that this is my Junior level challenge. Found some new concepts,for instance, making a dialog box and a progress bar. I was not able to get making those, so I'll keep that in mind for similar challenges later on

    What challenges did you encounter, and how did you overcome them?

    One of the challenges I faced was for the dialog box and progress bar. These were new concepts. However I was not able to get the media query working so, I'd like some help on that.

    What specific areas of your project would you like help with?

    More on media query and progress bars and dialog boxes

    Fylo Data Storage Component using Flexbox

    1
    Vinayak•320
    @V102002
    Posted about 1 year ago

    For some reason the screenshot is not displayed properly, I checked the live site and reviewed it on VSCode as well. If anyone can tell what the issue is, would be really appreciated as I don't know what's wrong

Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub