Scenario-Based Questions PART 13

Scenario-Based Questions

Q1: In the Service Portal, there is a field named quantity with values: [1, 2, 3, 4, 5]. Based on the quantity, the text color should change — and this must be done using only one class. How can you achieve this?

✅ Answer & Explanation

Approach: Use a data-quantity attribute along with a single CSS class, then style using CSS attribute selectors and CSS variables.

1️⃣ HTML Markup (Service Portal Widget)

<div class="quantity-display" data-quantity="{{c.quantity}}">
  {{c.quantity}}
</div>
  

2️⃣ Client Script (AngularJS)

function($scope) {
  $scope.c = {
    quantity: 1 // Default value
  };

  $scope.$watch('c.quantity', function(newVal) {
    const element = document.querySelector('.quantity-display');
    if (element) {
      element.setAttribute('data-quantity', newVal);
    }
  });
}
  

3️⃣ CSS Styling

.quantity-display[data-quantity="1"] { --quantity-color: red; }
.quantity-display[data-quantity="2"] { --quantity-color: orange; }
.quantity-display[data-quantity="3"] { --quantity-color: yellow; }
.quantity-display[data-quantity="4"] { --quantity-color: green; }
.quantity-display[data-quantity="5"] { --quantity-color: blue; }

.quantity-display {
  color: var(--quantity-color);
  font-size: 20px;
  font-weight: bold;
}
  

✨ Why this works well?

• ✅ Single CSS class keeps your markup clean and easy to maintain.
• ✅ Uses data-quantity attribute to dynamically apply different colors.
• ✅ CSS variables enable easy color management and scalability.
• ✅ AngularJS script ensures dynamic updates as quantity changes.