Expenses chart

Community feedback

• 

  Eduardo•910

  @KTrick01Posted about 2 years ago

  Hi! I see that you handle the hover of the bars with JS, i think that there's no really need of doing it that way, you can use the ::after or ::before pseudo element as your "money of the day" hover, a good thing about those pseudoelements is that they can get their value from a html attribute with the attr() function like this: content: attr(YourAttributeName) "", so with your JS you can set a custom attribute to the bars that gets its value from the JSON, and then use your ::after (or before) with the attr() function to show it, here is an example:

  //HTML
  <div class="example" custom-attribute="$54"> Bar </div>
  
  //CSS
  .example::after {
  content: attr(custom-attribute) "";
  position: absolute;
  inset: 0;
  background-color: black;
  width: max-content;
  height: max-content;
  display: none;
  }
  .example:hover::after {
  display: block;
  }
  
  
  

  In my solution I used this approach, so if you want a better example you can take an eye to my solution, hope that it helps!

  0
• 

  Curtis Simpson•550

  @crsimpson5Posted about 2 years ago

  Hey Shane, nice job on your solution! Your styles look really good. Regarding your JS, you could use the forEach method to reduce the amount of repeated code. You already have the right element selector, so you just need to loop over each element.

  Example:

  // Edit: convert to an array so you can use forEach
  Array.from(bars).forEach((bar, index) => {
      bar.style.height = ((data[index].amount) * 2.86 / 18) + "em";
  
      // do the same for event listeners
  }
  

  Let me know if you still need help 🙂

  0