Skip to content
Submitted about 1 month ago

Faq accordian using HTML, Scss and typescript

Jala30•20
@Jala30
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...FAQ accordion
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

Instead of just directly using htm, css and js. I tried writing thr code in typescript and scss and compiling them into Js and css using webpack. Doing so improved my knowledge in not only webpack but also in dynamic creation and querying of languages using typescript.

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

I faced some issues due to the relative path of the image and mobile view.

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

Like I mentioned above, I faced some issues eth mobile view. So kindly provide suggestions and tips if any on not only mobile view but also overall. Also, is the way I applied mobile styles correct?

Community feedback

  • Ivaylo Ivanov•260
    @ValsCodesPosted about 1 month ago

    Great Job!

    Here are some ideas for improvements:

    • the mobile view can use more margin
    • there is something weird happening with your bool that checks if a dropdown has been closed and opened, after you click it and close it, the header of the drop down stays with less opacity rather than going back to it's original state
    • a little size up will get you closer to the design
    • I could not see whether you have used sematic HTML tags such as <main></main> or just giving your main div this attribute role="main"

    I am sorry if I didn't give you a better direction. Glad to hear that you learned a lot from this experiment. I am not sure if it is a common practice to write everything through code but since you had fun I guess everything is alright :)

    Best regards, keep up the good work!

    1
    Jala30•20
    @Jala30Posted about 1 month ago

    Hi @ValsCodes

    Thanks a lot for the suggesting - I will keep them in mind while I refactor this code after a while. Also, regarding your second concern. The dropdown header has a hover effect color (Which is what I think you refer to as the opacity change). In mobile devices click event also triggers the hover event of that element. As a result, the dropdown header continues to remain in that hover effect when you open and close them.

    Regards, Jalagandeswaran

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord