
Design comparison
Solution retrospective
Hello everyone,
So, this project was a learning experience.
Had to do a lot of research and experiment.
First, I tried using the Chart.JS library to build up the chart and, after spending a few hours trying to figure out how that library works, I gave up because I couldn't get the results I wanted, I found the documentation a little confusing and took way too long to find the correct options to do what I wanted to do.
Second, I decided to use good old Vanilla JS, I first tried to create the bar elements dinamically using the insertAdjecentHTML method and use the data provided with the JSON file. I managed to do it, I was able to do it using that method, but, soon enough, I found out that I can't (or at least I couldn't figure it out) attach eventListeners to elements created dinamically with that method, and took me quite a bit to get it to work.
Third, finally tried another approach, and create DOM elements using the createElement method and also used the data provided with the JSON. This way, I could add evenListeners to the elements and therefore apply the hover efects using JS.
So there you go, it was a journey, took waaayyy longer than I exepected but manage to do it and get it as close to the design as possible.
Any feed back is always welcome!
Happy coding 🤓
Community feedback
Please log in to post a comment
Log in with GitHubJoin 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