Results Summary Component

Community feedback

• 

  Saad Hisham•1,750

  @Saad-HishamPosted over 1 year ago

  Hey there! Great job on your work so farI have a few tips to make it even better. 😊

  Firstly, I noticed that the sizes aren't consistent with the design. Let's fix that up, shall we? Here's the code snippet with the changes:

  .summaryCard {
  width: 100%;
  max-width: 736px;
  height: auto;
  max-height: 513px;
  display: flex;
  }
  
  .summaryCard .summaryResults {
  height: 100%;
  width: 50%;
  }
  
  .summary {
  height: 100%;
  width: 50%;
  }
  
  .summaryReactionItem,
  .summaryMemoryItem,
  .summaryVerbalItem,
  .summaryVisualItem {
  margin-top: 2rem;
  }
  
  .continueBtn {
  width: 100%;
  }
  

  Secondly, it would be helpful to add a cursor pointer when hovering over the button to let the user know that it's clickable. You can achieve this by adding the following code:

  button.continueBtn {
  cursor: pointer;
  }
  

  Thirdly, to improve accessibility, it's best to wrap your card in a main tag instead of a div tag.

  Lastly, I recommend using graphic software like Photoshop to get accurate sizes and colors from the picture. Overall, your solution is great, and I encourage you to keep up the good work! 😃

  Marked as helpful

  0

  ---

  

  TreNyceCodes•230

  @TrenyceCodesPosted over 1 year ago

  @Saad-Hisham thank you. I will update my code later.

  Happy Coding!

  0