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.
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
- Solution URL: https://github.com/akshaypatel99/expenses-chart-component
- Live Site URL: https://akshaypatel99.github.io/expenses-chart-component/
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
Practicing and reinforcing my knowledge of HTML, CSS and JS.
days.forEach((day) => {
if (today === day.dataset.day) {
document.getElementById(`${day.innerText}-bar`).style.backgroundColor =
'hsl(186, 34%, 60%)';
}
});
data.forEach((datum) => {
days.forEach((day) => {
if (datum.day === day.dataset.day) {
document.getElementById(
`${day.innerText}-bar`
).style.height = `${calcBarHeight(datum.amount)}px`;
document.getElementById(
`${day.innerText}-amount`
).innerText = `$${datum.amount}`;
}
});
});
- Website - Akshay Patel
- Frontend Mentor - @akshaypatel99
- Twitter - @laidbackak