Mini CSS Library
Objective: Create a utility function that helps manage and generate CSS class names dynamically based on conditions.
Instructions:
-
Write a function called customCSS
that accepts an object as its argument. The object will have CSS class names as keys and conditions (boolean values) as their corresponding values.
-
The function should return a string of class names where the condition is true.
-
You should be able to pass multiple class names into the function, and it should only include those that meet the conditions.
Example:
miniCSS({
'btn-primary': true,
'btn-disabled': isDisabled,
'hidden': !isVisible
});
// Output: 'btn-primary' (if `isDisabled` is false and `isVisible` is true)
Requirements:
- Accept an object with class names as keys and boolean conditions as values.
- Return a string of class names that satisfy the true condition.
- Ignore any classes where the value is false.
Bonus:
- Add support for combining static class names with dynamic ones.
- Allow function to accept more complex conditions, example:
miniCSS({
'btn-primary': true,
'btn-disabled': isDisabled,
'hidden': !isVisible,
'md:text-lg': windowWidth > 768, // Responsive condition
});