All comments

• 

  Agatha SB•30

  @agatha-sbSubmitted over 2 years ago

  • How to change the color of svg icons while on hover?

  

  Responsive landing Page

  2

  20
  

  gusfoca•170

  @gusfocaPosted over 2 years ago

  You can also use the css filter property and change the icon's brightness:

  .icon:hover { filter: brightness(8); }

  Or directly change the color with this set of functions:

  .footer-logo { filter: brightness(0.3) sepia(1) hue-rotate(120deg) saturate(6); }

  Which changes the logo's color through filter instead of setting the background color.

  Marked as helpful

  1

  This comment has received 1 replyShow
• 

  Achref KS•530

  @AchrefFastSubmitted almost 3 years ago

  Hi everyone,

  I would like to know if my way of loading the JSON file is right. I feel like there is some kind of delay when the page is loaded the first time.I believe the reason is because the await fetch() I used to load the JSON data.

  Is there any way to avoid such behavior?

  Any suggestion, advice or feedback would be really appreciated.

  Thanks.

  

  Mobile-first Workflow, Javascript with JSON file, CSS Grid and Flexbox

  2

  10
  

  gusfoca•170

  @gusfocaPosted almost 3 years ago

  I noticed you're updating the cards' contents after the DOM gets changed. Maybe that's causing more css repaints/reflows (just google those terms). You may also try using XMLHttpRequest instead of fetch, but just look at this solution (it's not mine): https://www.frontendmentor.io/solutions/time-tracking-dashboard-NkKJ4xnzC. It inserts a template html with "container.insertAdjacentHTML" (line 23). But you'll see the lag in that solution and others, don't know if it is solvable (my solution doesn't build the html, has it already in place and it sometimes lag, too: https://github.com/gusfoca/time-tracking-dashboard-main).

  1