@V102002
@Vasiliki-Georgiou
Submitted
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.
@V102002
Posted
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!
@xStephx
Submitted
@V102002
Posted
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
@V102002
Submitted
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
@V102002
Posted
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
