All comments

Agatha SB• 30
@agatha-sb
Submitted over 2 years ago

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

Responsive landing Page
2
gusfoca• 170
@gusfoca
Posted 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
Achref KS• 530
@AchrefFast
Submitted 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
gusfoca• 170
@gusfoca
Posted 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

gusfoca

All comments

Responsive landing Page

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