Submitted about 2 years ago

Expenses chart component solution with HTML, CSS, JavaScript

Sinka László•470

@dlxzeus777

Preview site View code

This is a solution for...Expenses chart component

HTML
CSS
JS

2junior

Design comparison

SolutionDesign

Solution retrospective

My solution to the bonus challenge was 'bar.style.height = ${datas[index].amount / 10}rem;' this. I took the amount data out of the JSON file divided it by 10 and gave the bars height the result. I used try and catch in my fetch because on github pages fetch doesn't work so I had to give them different heights.

Any advice on how can I fix it?

I also used click instead of mouseover event to view the prices for the bars.

Community feedback

Jonathan•510
@corjonPosted about 2 years ago
Try removing the forward slash in your fetch url so it looks like this fetch('data.json');
Marked as helpful
1
Sinka László•470
@dlxzeus777Posted about 2 years ago
@corjon There's one more problem, when you click on the bars and the price appears the bars move and I want them to stay like your solution!

Btw i like your solution!
0
Jonathan•510
@corjonPosted about 2 years ago
@dlxzeus777 You have to make the pricing position absolute otherwise flex will shift everything around. Try making your .bar-container position:relative and your .price-container position:absolute. You'll probably have to tinker around with the positioning to place it above the bars.
Marked as helpful
0
Sinka László•470
@dlxzeus777Posted about 2 years ago
@corjon Thank you so much! It looks better now. I also added negative margin top to the price and z-index so it doesn't hide behind the bars.
1

Please log in to post a comment

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