Skip to content
OverviewSolutions
25
Comments
4
Vinayak
@V102002

All comments

  • Vasiliki-Georgiou•290
    @Vasiliki-GeorgiouSubmitted 4 months 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•300
    @V102002Posted 4 months 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!

    0
  • Vinayak•300
    @V102002Posted 5 months 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

    1
  • Vinayak•300
    @V102002Posted 5 months 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

    1
  • Vinayak•300
    @V102002Submitted 5 months 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•300
    @V102002Posted 5 months 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

    0