Codetive
Sign In
Coding challenges as of now are only available on desktop
On mobile you can try our quiz
Quiz
We are working hard to bring coding challenges with editor on mobile 💚

Mini CSS Library

Objective: Create a utility function that helps manage and generate CSS class names dynamically based on conditions.

Instructions:

  1. 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.

  2. The function should return a string of class names where the condition is true.

  3. 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:

  1. Add support for combining static class names with dynamic ones.
  2. Allow function to accept more complex conditions, example:
miniCSS({
  'btn-primary': true,
  'btn-disabled': isDisabled,
  'hidden': !isVisible,
  'md:text-lg': windowWidth > 768, // Responsive condition
});
Browser
Console
Tests
Soon