Time tracking dashboard using SCSS and Grid

Community feedback

• 

  Ivan•2,610

  @isprutfromua

  Posted over 3 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:

  ✅ don't use tag selectors. When you add CSS directly on tags, your markup can’t change. Your style is tightly coupled to your DOM, and any change increases the risk of breaking things.

  ✅ choose a naming convention , methodology, or framework and stick to it. In some cases you naming elements with BEM, in other - with camelCase.

  Use SASS loops and maps to prevent code duplicating:

      &.work {
        @include info-card($Light-orange, "images/icon-work.svg");
      }
      &.play {
        @include info-card($Soft-blue, "images/icon-play.svg");
      }
      &.study {
        @include info-card($Light-red, "images/icon-study.svg");
      }
      &.exercise {
        @include info-card($Lime-green, "images/icon-exercise.svg");
      }
      &.social {
        @include info-card($Violet, "images/icon-social.svg");
      }
      &.self-care {
        @include info-card($Soft-orange, "images/icon-self-care.svg");
      }
  

  ✅ You Should Stop Using Pixels. They are static and aren’t truly relative to the root font-size like REM and EM units

  ✅ why do you need this code in the repository? console.log(cardWrapper.querySelector('.info__amount').classList.add('opacity'))

  ✅ use code formatters (ESLint, Prettier or etc). JS code needs structuring and consistency

  ✅ please add catching errors. You can't be sure that the date will always be as it should be

  fetch(dataLink)
    .then(responce => {
      return responce.json()
    })
    .then(cardData => {
      setCardData(cardData, activeTimeline)
  
      onTransition()
      updateTimelineData(cardData, activeTimeline)
    })
  

  I hope my feedback will be helpful. You can mark it as useful if so 👍

  Good luck and fun coding 🤝⌨️

  21

  Marked as helpful