Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
3
Comments
5

coderHaqiim

@CoderHaqiimLagos150 points

I would love to write industry-standard, neat, and accessible code. I have a strong passion for coding, and I am on a journey to become a full-stack developer. I'm here to learn best practices, build projects I can populate my portfolio with and to network with you. i

I’m currently learning...

I'm currently learning html, css, javascript, react.js, tailwind-css and node.

Latest solutions

  • FAQ accordion challenge using html, pure css and vanilla javascript


    coderHaqiim•150
    Submitted over 1 year ago

    0 comments
  • E commerce page solution using html, css and vanilla javascript


    coderHaqiim•150
    Submitted over 1 year ago

    0 comments
  • qr-code component solution using css flexbox


    coderHaqiim•150
    Submitted over 1 year ago

    1 comment

Latest comments

  • Aku•20
    @s-zx
    Submitted over 1 year ago

    faq-accordion

    2
    coderHaqiim•150
    @CoderHaqiim
    Posted over 1 year 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
  • Alyfer Jacobsen•450
    @AlyferJT
    Submitted over 1 year ago

    Social Links [React.js]

    #accessibility#react
    1
    coderHaqiim•150
    @CoderHaqiim
    Posted over 1 year 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
  • P
    Jeffrey Stanley•140
    @JS-Law
    Submitted over 1 year ago

    Responsive accordion page with Sass and JavaScript

    #accessibility#sass/scss#animation
    1
    coderHaqiim•150
    @CoderHaqiim
    Posted over 1 year 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
  • Tora Wijaya•170
    @Mirare23
    Submitted over 1 year ago

    E-commerce product page with Vue and tailwind CSS

    #pinia#tailwind-css#vue#typescript
    1
    coderHaqiim•150
    @CoderHaqiim
    Posted over 1 year 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
  • Jan Toma•470
    @jantoma
    Submitted over 1 year ago

    FAQ accordion using CSS custom properties and Vanilla JavaScript

    #angular#astro#accessibility
    1
    coderHaqiim•150
    @CoderHaqiim
    Posted over 1 year 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
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

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