Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Expenses chart component

@Safi200

Desktop design screenshot for the Expenses chart component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Community feedback

vinu cyril 980

@vinuman

Posted

Hello There,

Good job completing the project. The design looks impeccable.

  • One of the functional requirements is to highlight the bar(cyan color) for the current day. One way to do this is to assign classes to each BAR div's starting from sun to sat.

  • The following code with render the functionality after naming the classes.

    <div class="sun"></div> <div class="mon"></div> ..... .....

    let day; const daysOfTheWeek = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'] const today = new Date();

    if(today.getDay() == 0){ day = daysOfTheWeek[6]; } else{ day = daysOfTheWeek[today.getDay() -1] }

    document.querySelector(.${day} .bar).style.backgroundColor = '#76B5BC';

  • Hope this helps. Happy coding!

Marked as helpful

0

@Safi200

Posted

thank you for your feedback , i really appreciate that @vinuman

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord