Skip to content
Submitted over 2 years ago

Results summary component using SASS and dynamically loaded data by JS

bem, parcel, sass/scss
LVL 1
BartyDash•30
@BartyDash
A solution to the Results summary component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

  • The biggest difficulty I had was importing data from a json file and creating a working animation of the counters.
  • I wasn't able to import the paths to the icons from the file when using Parcel and had to settle for fixed icons in HTML.
    • To swap the src of the images I use img.src = new URL('./assets/images/icon-reaction.svg', import.meta.url); - and it works but when I want to use the data from the json file, i.e.: img.src = new URL(data[0].icon, import.meta.url); no more 😣 - I get error: Not allowed to load local resource: file:///src/assets/images/icon-reaction.svg The other json data imports nicely. What can I do to make it work?
  • I also wanted to create one animation playing after another but I don't quite know how to do that and ended up with them all starting at the same time. Do you have any suggestions?
Code
Loading...

Please log in to post a comment

Log in

Community feedback

No feedback yet. Be the first to give feedback on BartyDash’s solution.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord