Responsive time dashboard using CSS Grid and Flexbox, using JSON data

Community feedback

• 

  James English•620

  @anglicusPosted over 2 years ago

  On my solution, I used the SVGs as background images in my CSS using the background-image property rather than including them directly in the HTML. That keeps them contained, although you might also be able to achieve the same result by using overflow: hidden if you want to keep them in the HTML.

  As far as having a pre-selected button, I think you could select the button you want to be pressed in your JS and .click() it when the page first loads, like this:document.getElementById("weekly").click().

  In my own solution, rather than switching the inner HTML of the elements when the button is clicked, I actually have separate daily, weekly and monthly elements displaying the data, and then use classes to determine which set of elements is visible. Then I have weekly show by default by applying those classes in the original HTML.

  Marked as helpful

  1