Expenses Chart Component

Community feedback

• 

  Enmanuel Otero Montano•2,155

  @Enmanuel-Otero-Montano

  Posted almost 3 years ago

  Hello Prisca!

  In general your code is good and it's fine to use "fetch" to access the JSON. The result of the challenge is good. If I have a couple of suggestions for your CSS.

  I suggest you load the fonts from the HTML and not from the CSS, this way they will load faster and therefore your website will have a better performance, keep in mind that the browser has to read the code to render it, and the first thing it reads is the HTML, for this reason. I'm going to leave you an example of how it would look from the HTML

  <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2family=DM+Sans:wght@400;700&display=swap" rel="stylesheet">
  

  The above code ☝ goes inside the head tag.

  The rel="preconnect" attribute to a link informs the browser that your page intends to establish a connection to another domain and that you want the process to begin as soon as possible. The resources will load faster because the setup process is already complete when the browser requests them.

  The other suggestion is that you try not to chain so many selectors to apply styles, if you know that there are several elements with the same style, directly put a class on it and apply the style to them with the class selector. I tell you this because it can affect performance in larger projects and also because it makes the code more difficult to read. I leave you a sample of your code to be more explanatory.

  .mon span, .tue span, .wed span, .thur span, .fri span, .sat span, .sun span{
      color: hsl(28, 10%, 53%);
      margin-top: 5px;
  }
  

  The above advice will prevent you from having to use !important, as it is considered bad practice. In general, always try to apply styles with the class selector, this way you will always have the same specificity in your code and you will only have to worry about the cascade.

  Any questions do not hesitate to contact me.

  Greetings.

  11

  Marked as helpful