Responsive Expense Chart component using html, CSS and JavaScript.

Community feedback

• Account deleted

  Hello Kapil, good work here, I just would like to suggest the following regarding the JS logic. Manipulating the DOM using the property style while it works generates inline styles for the HTML elements. Instead is a best practice to modify the styles adding or removing classes from the element. Tania Rascia goes deep in the topic. So instead of this

  thursdayChart.addEventListener('mouseover',  () => {
      thuData.style.display = "block";
  });
  thursdayChart.addEventListener('mouseout',  () => {
      thuData.style.display = "none";
  });
  

  Apply this:

  thursdayChart.addEventListener('mouseover',  () => {
      thuData.classList.add("example-class");
  });
  thursdayChart.addEventListener('mouseout',  () => {
      thuData.classList.remove("example-class");
  });
  

  In your CSS that class would look like this.

  .example-class { display: block; }
  

  Other than tat I like how you styled the component and it seems fairly reponsive so congrats. Happy coding and see you around!

  Marked as helpful

  0

  ---

  

  Kapil•70

  @Kapil101527Posted over 2 years ago

  @alexcumplido Thanks for your suggestions. Really appreciate it.

  1