Expenses chart component using HTML, CSS, and Vanilla JavaScript

Hey @boonyarit-iamsaard,

Congrats on solving the challenge, it's looking really good and close to the design. I like that you didn't use any library or framework for the chart, nice practice exercise :)

A couple of things:

• You don't have any heading in your markup, which could lead to accessibility and SEO issues. I would use an h1 for My balance and an h2 for Spending - Last 7 days (though others might reverse the order or use different levels, there's room for discussions).
• You could use a header element for the balance-container, would make it even more semantically correct.
• In terms of your JavaScript and data fetching I can't really find anything that needs dior improving, the error handling is solid and everything is nicely structured into reusable functions. One addition I can recommend is checking the HTTP status via if (response.ok) {...}, because a 404 or many other HTTP "errors" don't throw errors, but your script would still fail. It's always good to think about these edge-cases. So, you could do something like this:

try {
    const response = await fetch(url);

    if (!response.ok) {
        throw new Error(`${response.status}: ${response.statusText}`);
    }

    return await response.json();
  } catch (error) {
    throw new Error('Expenses data is not available.');
  }

Otherwise, nicely done :)