1. Learn
    2. /
  2. Courses
    3. /
  3. Building Dashboards with Dash and Plotly

Exercise

DRY-styling Dash components

Your clever use of Python functions allowed you to save some space in the last exercise. Yet, you think there is more that can be done to refactor this dashboard.

An additional function has been created to render multiple HTML breaks, which you can utilize in the code. Along with this, there seems to be a lot of overlap in the CSS styling you have added to components. This can also be cleaned up, you think!

The common style elements you have noticed are: 'display':'inline-block','margin':'0 auto','padding':'20px'

The make_break() function has been defined for you on line 14, which takes an argument specifying how many HTML break tags to create and returns these in a list.

Instructions

100 XP
  • Create a function that will return a style dictionary with all the common style elements ('display':'inline-block','margin':'0 auto','padding':'20px') below line 26.
  • Use the make_break() function (already created for you) to add the number of breaks specified under each comment Insert X HTML breaks below lines 33, 36, and 47.
  • Use the styling function to add styling to the .H2() below line 43.
  • Use the styling function to add to the specific styling already on the DatePickerSingle() below line 55.