Skip to content
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

Latest comments

  • coderHaqiim•150
    @CoderHaqiimPosted about 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
    1
  • coderHaqiim•150
    @CoderHaqiimPosted about 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
    1
  • coderHaqiim•150
    @CoderHaqiimPosted about 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
    0
  • coderHaqiim•150
    @CoderHaqiimPosted about 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
    0
  • coderHaqiim•150
    @CoderHaqiimPosted about 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
    0