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
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
- Tailwindcss - For styles
In this section I've learned how to create bar chart with dynamic data. Display number when hover (mouseover event)
@layer components {
.number {
visibility: hidden;
}
}
const bars = document.querySelectorAll(".bar");
bars.forEach((bar) => {
bar.addEventListener("mouseover", (event) => {
const number = event.target.querySelector(".number");
if (number) {
number.style.visibility = "visible";
}
});
bar.addEventListener("mouseout", (event) => {
const number = event.target.querySelector(".number");
if (number) {
number.style.visibility = "hidden";
}
});
});
- Website - Tuan Anh
- Frontend Mentor - @Tuananh45468