All solutions

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

Color Banner on each card

Instead of using-border, I learned form @MikDra1

• Create a Wrapper Element for Each Card: Ensure each card is positioned relatively. This allows for absolute positioning of child elements.

• Add a Decorative Element for the Line: Inside each card, create an additional element (e.g., ``).

• Style the Decorative Element:

  • Set the position to absolute.
  • Apply the following styles:
    • height: 3px;
    • width: 100%;
    • top: 0;
    • left: 0;
    • background-color: [desired color]; (e.g., black)

• Positioning and Sizing:

  • Ensure the card has position: relative; to serve as a reference point for the absolute positioning of the decorative element.

• Alternative with Pseudo-Elements:

  • If preferred, use ::before or ::after pseudo-elements to create the line:

    .card {
      position: relative;
    }
    
    .card::before {
      content: "";
      position: absolute;
      height: 3px;
      width: 100%;
      top: 0;
      left: 0;
      background-color: [desired color];
    }
    

This approach ensures that each card has a straight line at the top, and the use of relative and absolute positioning keeps the layout organized and consistent.

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

Consolidates the management of product-related assets into a single module(index.js), making the application more organized and easier to maintain.

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

Please kindly comment on my semantic Tailwind CSS setup.

Please also comment on my code, please help me to improve.

Many thx.

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

I structured the JavaScript code with modularity and future testing in mind. I implemented:

• Error Handling: i.e.4xx-5xx HTTP Status
• Handle Edge Cases: validate Api Response
• Provide Feedback to Users: Loading Indicator and Error Feedback
• Debouncing the Button Click
• Accessibility Considerations, aria-busy, aria-live="polite”
• Use init()

Please comment on my JavaScript code design on fetching and display the advice from the Advice Slip API.

What area should I look into for improvement? Any good link?

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

I styled the list marker and finely control the gap after the list marker according to the Figma design.

In particular in the mobile size, in the preparation section, I adjusted the gap after the list Marker and its size and I centered the list marker against the line break, positioning it midway between the line 'Total: Approximately 10' and minutes.

But I sacrifice the accessibility for screen reader on the list and over complicated the html and CSS. Is there any better way of doing it?

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

In mobile size, the image at the top will have a full width, and not having a padding just like the sections below it. But in the desktop size, it will have a padding the same as the sections below it.

I started off with giving overall padding to the white card, but it will give padding to the image padding in mobile size. So my approach is give padding to each sections individually. It is time consuming and not elegant.

I tried to keep the html as semantic as possible, I didn't want to div the sections into a big div and have an overall padding to it.

Please advise how I can do better.

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

Flexbox- gap vs Margin

Problem:

• I tried to match the card height in the Figma file, I started with with margin-bottom: 24px on the image to create the gap between image and the text box.
• Noticed extra vertical space added when using margin-bottom, even though the developer tools showed a 24px margin.

Solution:

• Replaced gap: 24px in the .card flex container with margin-bottom: 24px on the image.

Please advise any better and easy way to match the Figma design card height.

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

I tried to match the design of the card description, I want the last line of text to show "the next level" instead of "next level" , just like the Figma design, so I put a width 256px in the p tag, it forces the "the" to go to the last line.

Please advise is there any better way to achieve the same result. Thx

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

I am proud of my efforts to improve accessibility. I used aria-label attributes to enhance the experience for visually impaired users. I ensured that screen readers would inform users when a link opens in a new browser tab, without adding redundant visible text that could clutter the interface for sighted users.

If I were to approach this project again, I would explore additional accessibility features.

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

• Please comment on the semantic html structure I used.
• Please suggest accessibility features I should explore.

Hi All

From the point of view of accessibility, it is a good practice to hide the input and use button tag for the number circle?

thank you

Hi all

In my React app, I'm implementing form validation for the date input component. Each input (day, month, and year) has its own error message. To manage these errors, I'm currently using multiple useState hooks, one for each error state, resulting in a cluttered component with many state variables and prop callbacks.

Is there a more efficient approach to managing these error states and reducing the complexity of passing numerous props into the DateInput component? I'm looking for a cleaner solution while maintaining the functionality of individual error messages for each input field. Any insights or alternative strategies would be greatly appreciated.

Hi all,

Is my class name set up follow BEM well? Please comment.

Hi All,

Is there a better way to dynamically populate the SVG? I pass the JSON object icon path to an image tag

Thank you