Order Summary Card with Vanilla TypeScript + WindiCSS + Vite

Community feedback

• 

  Ivan•2,630

  @isprutfromuaPosted over 2 years ago

  Hi there. You did a good job 👍

  keep improving your programming skills

  your solution looks great, however, if you want to improve it, you can follow these steps:

  🟢 add some alternative text to images

  🟢 avoid using double images. It's better to use picture tag with sources

  🟢 there is no reason to positioning top image absolutely. You can simply use flexbox, or fix the height of container and set background-image. You card will be more responsive.

  🟢 about buttons: all is right, you can check it with browser accessibility tools. One thing that I'll be added it's more descriptive text for the change button (with sr-only class).

  I hope my feedback will be helpful

  Good luck and fun coding 🤝⌨️

  Marked as helpful

  1

  ---

  

  Shawn Lee•560

  @OGShawnLeePosted over 2 years ago

  @isprutfromua Hey thank you very much for the feedback.

  1. You're right. I will add alt text to the icons.
  2. I actually implemented your advice in one of my recent challenges. Thank you very much. I will update this one with the picture tag.
  3. Do you mean the background image? I don't know, it was quite easy to get it positioned with absolute + inset 0. Or do you mean the image of the girl? It is not absolutely positioned, the container is a flex column.
  4. Yep. You are right. I will add a label with sr-only.

  Thank you very much Ivan. Good luck to you as well!

  0

  

  Ivan•2,630

  @isprutfromuaPosted over 2 years ago

  @OGShawnLee I am glad that my help was useful to you

  Cheers, peace and happy coding!

  0