Skip to content
OverviewSolutions
18
Comments
20
P

Anamay

@anamaydevIndia400 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • P
    DalaScript•600
    @DalaScript
    What are you most proud of, and what would you do differently next time?
    • I’m proud that this is my very first React app ⚛️, which I built independently from start to finish 💪. It didn’t take me too long ⏱️, and next time, I’ll try to better understand and plan out my components 🧩.
    What challenges did you encounter, and how did you overcome them?
    • The main challenge was building the hamburger menu 🍔, which required using the useState and useEffect hooks 🪝. It wasn’t too difficult in the end, and I learned a lot through the process 📚.
    What specific areas of your project would you like help with?
    • I appreciate any advice from other developers 🙌, but I’d especially love to hear what others think about the structure of my project 🗂️ and the way I handled the components 🧱.

    News homepage Challenge

    #bem#react
    1
    P
    Anamay•400
    @anamaydev

    Nice

  • Stefano Lezzi•300
    @Steno-95
    What challenges did you encounter, and how did you overcome them?

    Making the toast window be read from the screen reader, i was not able to do it

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

    As mentioned before, i have no idea how to make the screen reader read the toast window on success when the form is submitted, any tips or resources about it is welcome!

    Responsive contact form component with react and tailwindcss

    #react#tailwind-css
    1
    P
    Anamay•400
    @anamaydev

    To make screen readers announce the toast or modal, you can programmatically shift focus to it when it appears. This can be done by assigning a ref to the toast element and setting tabIndex={-1} to make it focusable if it’s not inherently focusable. Then in a useEffect focus the element when it becomes visible:

      useEffect(() => {
    if (showToast && toastRef.current) {
      toastRef.current.focus();
    }
  }, [showToast]);

    pass the toastRef as props to ModalToast.jsx

        <article
      className="toast"
      aria-live="assertive"
      ref={ref}
      tabIndex={-1}
    >...</article>

    I did not find any good tutorial on it so I had to learn it from chatGPT. So I can not give you any source. But this will give you small idea and you can learn more about it using chatGPT or any other AI.

    Marked as helpful
  • P
    Anamay•400
    @anamaydev

    Hi! Congrats on completing the challenge — great job getting everything working.

    I have a few suggestions that could improve your design:

    1. Avoid using <h6> for the original price. Headings should only be used for meaningful titles, not for styling. You can use a regular paragraph (or <span>) tag like this:
    <p>$169.99</p>
    1. The original price and selling price are stacked vertically because of the flex direction. Right now, .card-info uses a column layout, so all its children are stacked. To place the prices side by side, wrap them in a new container and use a row layout:
    <div class="card-info">
  <div class="price-container">
    <p id="price">$149.99</p>
    <p>$169.99</p>
  </div>
</div>

    .price-container {
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
}

    1. Avoid using multiple <h1> tags. A page should have only one <h1> for better structure and accessibility. You can keep it for the product name, and use something like <p> or <span> for the price.

    2. Add an alt attribute to the product image. Your image tag is missing an alt attribute:

    <img src="image-product-desktop.jpg">

    The alt attribute is used to describe the image in case it can't be loaded, and it also helps screen readers for visually impaired users.

    <img src="image-product-desktop.jpg" alt="Gabrielle Essence Perfume">

    Accessibility is something you'll learn more about as you continue your web development journey — for now, just remember that it's a good habit to always include an alt for every image.

    1. height: 100% on the <body> won’t work as expected I have noticed you have used height: 100% on body tag
    body {
  width: 100%;
  height: 100%;
}

    While width: 100% works just fine, height: 100% doesn’t do much unless the parent (in your case <html>) also has a height set. Instead, you can use height: 100vh to make sure the body takes up the full height of the screen

    body {
  height: 100vh;
}

    This will make your body take up the full height of the screen, and your card will be properly centered. When you used height: 100%, it didn’t work as expected because it only took the height of the content inside.

  • P
    Anamay•400
    @anamaydev

    Nice solution! Everything looks clean and well-structured. Great job!

  • P
    Anamay•400
    @anamaydev

    Hi, your code looks really good! I noticed you used the Motion library for animations. Could you please recommend a good resource to learn it? I've been learning a bit of GSAP, but I realised that while it can be used with React, it uses an imperative approach, which doesn’t work that well with React's style.

  • P
    Anamay•400
    @anamaydev

    I noticed that the answer options (A, B, C, D) are written out manually using repeated JSX. To make the code cleaner and more maintainable, you could use .map() to dynamically render the options from an array. Same for the language options. This would reduce repetition.

View more comments