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.
Note: Delete this note and update the table of contents based on what sections you keep.
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: see solution
- Live Site URL: see live
- Semantic HTML5 markup
- CSS custom properties
- SCSS variables
- Flexbox
- Mobile-first workflow
- JavaScript DOM manipulation
- JSON data file
To day's challenge was a great was to learn how to use the JSON data file to dynamically output a content with DOM manipulation. Also, I learned how to map datas to avoid repeating the same code.
<h1>Some HTML code I'm proud of</h1>
const add_days = (data) => {
const fund = document.createElement("p");
fund.style.height = (data.amount + 30) + "px";
// Find the max amount
const max = Math.max(...Datas.map(data => data.amount));
if (data.amount === max) {
fund.style.backgroundColor = `hsl(186, 34%, 60%)`;
}
// the block that shows the amount when hover on graph
const pop = document.createElement("div");
pop.classList.add("pop");
pop.innerHTML = `${data.amount}`;
fund.addEventListener ('mouseover', function() {
pop.style.display = "flex";
})
fund.classList.add("bar");
return (`<li class="day">
${pop.outerHTML}
${fund.outerHTML}
<span>${data.day}</span>
</li>`)
}
- JS Mouse events
- JS JSON data file
- JS DOM manipulation
- SCSS variables & functions
- Frontend Mentor - @Marcraphael12