I used CSS grid and JavaScript to make it responsive

Community feedback

• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  ---

  BUTTONS 🖲️:

  • This solution had generated accessibility error reports due to lack discernible text for <button> element

  ---

  • The <button> must have discernible text that clearly describes the destination, purpose, function, or action for screen reader users.

  ---

  • Screen reader users are not able to discern the purpose of elements with role="link", role="button", or role="menuitem" that do not have an accessible name.

  ---

  • The <button> name rule has five markup patterns that pass test criteria:

  
  <button id="al" aria-label="Name"></button>
  
  <button id="alb" aria-labelledby="labeldiv"></button>
  
  <div id="labeldiv">Button label</div>
  
  <button id="combo" aria-label="Aria Name">Name</button>
  
  <button id="buttonTitle" title="Title"></button>
  
  

  • Ensure that each <button> element and elements with role="button" have one of the following characteristics:

    • Inner text that is discernible to screen reader users.
    • Non-empty aria-label attribute.
    • aria-labelledby pointing to element with text which is discernible to screen reader users.
    • role="presentation" or role="none" (ARIA 1.1) and is not in tab order (tabindex="-1")

  ---

  . .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  Marked as helpful

  0

  ---

  

  Edoye•170

  @DoyeDesignsPosted over 1 year ago

  Thank you for this tip Abdul Khalid@0xAbdulKhalid

  0
• 

  P

  visualdennis•8,375

  @visualdennissPosted over 1 year ago

  Hello there,

  very nice work! It seems like you have spent quite a bit time and effort on this project but you have successfully completed it in the end!

  One note i'd like to make is that avoid using alert("Product already in cart!"); in production, it is only okay to use when debugging in development, but alert() will block your JS code execution and also might open some security vulnerabilities and also not a great user experience, better option is to use modals.

  "Do you start simple and then work it all the way up to its complex form?"

  In general i try to breakdown the problem into managable small tasks as much as it is possible. Before starting a project, i try to do that but also try to keep a picture as a whole about how all these small functionalities would eventually connect and come together.

  It looks like you are passing a huge amount of HTML through Javascript. Most of it, needs not to be dynamically created but could be part of static HTML file, only the changing parts could be updated. But if you wanna dynamically create HTML, i can recommend to stepping up to a JS Library like React JS later on, where you write HTML-like elements inside Javascript.

  But to deepen your fundamentals, i'd recommend going through a book, e.g. Eloquent Javascript is pretty good one: https://eloquentjavascript.net/

  Hope you find this feedback helpful!

  Marked as helpful

  0

  ---

  

  Edoye•170

  @DoyeDesignsPosted over 1 year ago

  Yes I spent time on it. I will go through the book thanks🤝@visualdenniss

  0