Frontend Mentor - Time tracking dashboard solution

Community feedback

• 

  Jay Khatri•4,250

  @khatri2002Posted 3 months ago

  Hi! The developed solution looks good!

  Fix Needed: Icon Positioning

  According to the design reference, the icon for each card should be aligned at the top-right corner (with some offset). However, currently, it is positioned at the top-left corner due to an incorrect value in the CSS.

  Current Issue in CSS:

  background-position-x: right +1rem; /* Incorrect syntax */
  background-position-y: -8px;
  

  The background-position-x value right +1rem is invalid and causes an error.

  To correctly position the icon at the top-right corner with a 1rem offset, use the following:

  background-position-x: calc(100% - 1rem);
  

  This ensures the icon is dynamically placed based on the card's width.

  ---

  Reducing CSS Redundancy

  Currently, you’ve created 6 separate classes for 6 cards, and the CSS properties for each card have a lot of repeated styles. Below is an example of one such card class:

  .work {
  	background-color: var(--work);
      display: flex;
      border-radius: 1.2rem;
      align-items: end;
  	background-image: url(images/icon-work.svg);
  	padding-top: 3rem;
  	background-repeat: no-repeat;
  	background-position-x: right +1rem;
  	background-position-y: -8px;
  }
  

  Except for background-color and background-image, all the other styles are repeated across all card classes.

  Why This is Problematic:

  1. Redundancy: Increases the size of the CSS and makes it harder to maintain.
  2. Inconsistency Risk: If you need to change a common style (e.g., padding-top), you'll have to do it multiple times, increasing the risk of inconsistencies.

  Consider...

  1. Creating a Common Class: Extract all the shared properties into a single class, e.g., .card.
  2. Specific Classes for Individual Styles: Use separate classes for individual card properties like background-color and background-image.

  <div class="card work">...</div>
  <div class="card play">...</div>
  

  ---

  Overall, this is a great solution! With the suggested fixes and enhancements, the code will be more robust, maintainable, and aligned with best practices. Keep up the excellent work! 🚀

  Marked as helpful

  0

  ---

  

  Manuel Carreras•220

  @ManuGolemPosted 3 months ago

  @khatri2002 Thanks for the suggestions, I'll fix it and keep it in mind for the next one.

  1