Expenses chart component

Hey, BreinerJT👋

Nice effort on this challenge!👏

Overall, your solution looks great! One small thing I'd like suggest is that instead of outputting the chart data one by one using html like you did, you can dynamically output from JavaScript. Also you can add a Gaurd clause incase if the user failed to load, More about Gaurd clause

async function getData(url){
    let fetchData = fetch(url)
    let response = await fetchData;
// Adding Gaurd clause 
    if (!response.ok) return;
    let data = await response.json()
    return data;
}

 async function getCharts(){
    const chart = document.querySelector(".charts");
    const data = await getData('data.json');

    let html = null;
    data.forEach(e => {
       html =  `
        <div class="chart-container">
            <p class="day" data-id="mon">${e.day}</p>
            <div class="js-chart chart" id="mon" style="height: ${e.amount}%"></div>
            <label class="js-label" for="mon">${e.amount}</label>
        </div>
        `
    chart.insertAdjacentHTML("afterbegin", html);
    });

// Not needed
/*
    const amounts = data.map(e => e.amount)
    let maxValue = Math.max(...amounts)
    let heights = amounts.map(e => e / maxValue * 100)
    charts.forEach((value, index) => {
        value.style.height = `${heights[index]}%`
    })
    charts[day].classList.add("current-day")
    labels.forEach((value, index) => {
        value.textContent = `$${amounts[index]}`
     })
*/
}

getCharts()

Hope that helps!🤗

Happy coding.😎

Hello BreinerJT and congratulations on completing the challenge.

I really like your idea of switching the colors of the charts, looks very cool. Just a small suggestion for a better user experience is maybe to add 'cursor: pointer' for the hover effect.