Frontend Mentor - Expenses chart component solution

This is a solution to the Expenses chart component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
• Author

Overview

The challenge

Users should be able to:

• View the bar chart and hover over the individual bars to see the correct amounts for each day
• See the current day’s bar highlighted in a different colour to the other bars
• View the optimal layout for the content depending on their device’s screen size
• See hover states for all interactive elements on the page
• Bonus: Use the JSON data file provided to dynamically size the bars on the chart

Screenshot

Links

• Solution URL
• Live Site URL

My process

Built with

• HTML
• CSS
• Vanilla JavaScript

What I learned

I wanted to see if I could leverage CSS custom properties and a single media query to handle resizing of elements/spacing. It ended up working quite well but did feel a little clunky. I'd want to revisit this in the future with a better design system in place.

I learned how to get the highest value from an array using Math.max() -- I really love how simple it was to use.

const isHighestSpend = (data) => {
	const values = data.map((value) => value.amount);
	return Math.max(...values);
};

Author

• Website - Adam Shea
• Frontend Mentor - @adamdotjs
• Twitter - @adamdotjs