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
- @elaineleungPosted over 2 years ago
Hey Renan, I just saw your comment and thought to have a look here. I really like what you did, and what's great is reading through how you documented your journey in what worked and what didn't. I saw a lot of people using Chart JS, but their end projects don't always look like the original one, and so I'm glad you persisted without just settling for less. I can also tell you learned a great deal in this project, and I'm glad I got to help you out in a small way.
Keep coding, you're doing great!
Marked as helpful1@DonUggioniPosted over 2 years ago@elaineleung Hey Elaine,
Thank you very much for your feedback =D
Yeah, chart js was giving me a headache, I had to let it go 😁
I'm a perfectionist so I wouldnt be able to sleep knowing that it didnt look like the design haha
Thank you!
1@mohit1607Posted over 2 years ago@DonUggioni Your approach I loved it. You are a genius I was also confused about using chart.js or another library. Creating element is another level of thing. That gives us the deep understanding of how libraries work. Bur Can you tell me If I want to use any external library in vanill js how can I ?
0@DonUggioniPosted over 2 years ago@mohit1607 Hey there,
The first step is always go and check the documentation of what you want to use and see how they tell you to implement their library in your code. The most common ways I would say is by using the cdn provided by them that you place in your index file or through npm.
1
Please log in to post a comment
Log in with GitHub
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