Skip to content
OverviewSolutions
3
Comments
5
coderHaqiim
@CoderHaqiim

All comments

  • Aku•20
    @s-zxSubmitted 9 months ago

    Welcome

    This project takes me a whole night, hope it can help you guys!

    faq-accordion

    2
    coderHaqiim•150
    @CoderHaqiimPosted 9 months ago

    Congratulations on completing your challenge. I love the simplicity of your code (the js part) also the use of ’this' keyword. However, the page is not responsive on mobile. Also, you can add to your challenge by closing the already opened answer when you open a new one. Cheers! Happy coding!

    Marked as helpful
    1
  • coderHaqiim•150
    @CoderHaqiimPosted 9 months ago

    Congratulations Alyfer, on completing your project with React. I guess you used npx create-react-app to create your app. Well, people now prefer to use npm create vite@latest

    Also, I think you could have used an array to hold the information in the LinkButton i.e

    const array = [
        {id:1, url: "http1....", title: "something"}
        {id:2, url: "http2....", title: "something"}
        {url: "http3....", title: "something" }
        {url: "http4....", title: "something" }
        {url: "http5...." title: "something" }
]

    Then you can use array.map() to map through the array and create a LinkButton for every element instead of having five linkButtons

    { array.map(item=>{
   <LinkButton key={item.id} link={item.url} title = {item.title}>
})
}

    This would help when you have a lot of LinkButtons.

    Also, you can destructure your prop object. Instead of using

    function app(prop).... and later calling prop.image, you could do it like this to make it easier:

    function app({image, you can have more}) Now you can simply use image as your variable name instead of props.image. Nice job, by the way. Cheers! Happy coding!

    Marked as helpful
    1
  • Jeffrey Stanley•130
    @JS-LawSubmitted 9 months ago

    What a project!

    I finished it in under a week, cant say I could have completed it any faster otherwise I might not have learned as much as I had.

    I had fun with this one, made some mistakes I could have corrected afterwards but ultimately this was the first time I was able to implement JavaScript in a useful way without any outside help.

    I also started using sass/scss as well and was amazed at the features I could work with! I'm excited for the future, I cannot wait to continue to complete these projects and grow as a developer.

    Shout out to FrontendMentor for existing!!! I genuinely do not think I would be learning as thoroughly if not for these high quality projects.

    Responsive accordion page with Sass and JavaScript

    1
    coderHaqiim•150
    @CoderHaqiimPosted 9 months ago

    Congratulations on completing your project. This is the longest solution for this challenge that I've seen apart from mine. I'll suggest you create reusable functions. Also, you can select every item with same class with the querySelectorAll. It acts like an array, and you can use the forEach method on it. The shortest solution I've seen so far made use of

       <details>
        <summary>
             The question
         </summary>
         <p>The answer</p>
     </details>

    Turns out the summary tag automatically creates a drop down that toggle when clicked. Most solutions, though, didn't close previously opened answers, and I guess that was why their solutions were significantly shorter.

    A little parting tip. To keep the first answer open like in the design, you can select the element that triggers the event that opens it, and add .click() to it. i.e onload =()=> selectedElement.click()

    This automatically clicks the element when the document loads. You may check my solution to see if you find anything of interest. Cheers! Happy coding!

    Marked as helpful
    0
  • coderHaqiim•150
    @CoderHaqiimPosted 9 months ago

    Congratulations on completing your challenge. There are a few things I noticed in the site:

    1. A count of the items in the cart is not displayed.
    2. The images don't look too good in landscape. Overall. Cheers! Happy coding!
    Marked as helpful
    0
  • coderHaqiim•150
    @CoderHaqiimPosted 9 months ago

    Nice one! I just learnt the use of detail and summary element from your code. I was looking for the code to close and open the accordion, but there, the summary element. Cheers! Happy coding!

    Marked as helpful
    0