Dynamic Sum Display: UI Component Guide

by Admin 40 views
Dynamic Sum Display: UI Component Guide

Hey guys! Today, we're diving deep into creating a UI component that dynamically displays a calculated sum in a third input field. The goal? Ensuring that this sum is only displayed when the inputs are valid and preventing it from showing up when errors occur. This component should also be reusable for future calculations. Let's break it down step by step!

Understanding the Requirements

Before we start coding, it's crucial to understand the project's requirements. We need a UI component where users can input values into two fields, and a third field will display the sum of these values. The catch? The sum field should only update if the inputs are valid. If there are any validation errors, the sum field should remain blank or display an error message.

The Definition of Done (DoD) includes:

  • The sum field dynamically updates as valid inputs are changed.
  • Validation logic prevents sum display if inputs are invalid.
  • Code is reviewed and merged into the main branch.

The Acceptance Criteria are:

  • Sum is displayed in a dedicated field after successful calculation.
  • Field does not display sum if there are validation errors.

And a crucial note: The display component must be reusable for other calculations in future features.

Setting Up the Basic UI Component

First, let's set up the basic UI component. We'll use HTML, CSS, and JavaScript to create a simple form with two input fields and a third field to display the sum. For this example, we'll keep it simple, but you can adapt it to your preferred framework like React, Angular, or Vue.

HTML Structure

<div class="container">
 <input type="number" id="input1" placeholder="Enter number 1">
 <input type="number" id="input2" placeholder="Enter number 2">
 <input type="text" id="sum" placeholder="Sum" readonly>
</div>

Here, we have two number input fields (input1 and input2) and a read-only text field (sum) to display the calculated sum. The container div is just for organizational purposes.

CSS Styling

Let's add some basic styling to make it look presentable.

.container {
 display: flex;
 flex-direction: column;
 width: 300px;
 margin: 20px auto;
}

input {
 margin: 5px 0;
 padding: 8px;
 border: 1px solid #ccc;
 border-radius: 4px;
}

input:read-only {
 background-color: #f0f0f0;
 cursor: not-allowed;
}

This CSS provides a simple layout with some basic styling for the input fields. The input:read-only style makes the sum field visually distinct and indicates that it's not editable.

JavaScript Logic

Now, let's add the JavaScript logic to calculate the sum and display it in the third field.

const input1 = document.getElementById('input1');
const input2 = document.getElementById('input2');
const sumField = document.getElementById('sum');

function calculateSum() {
 const value1 = parseFloat(input1.value);
 const value2 = parseFloat(input2.value);

 if (isNaN(value1) || isNaN(value2)) {
 sumField.value = 'Invalid input';
 return;
 }

 const sum = value1 + value2;
 sumField.value = sum;
}

input1.addEventListener('input', calculateSum);
input2.addEventListener('input', calculateSum);

In this JavaScript code:

  1. We get references to the input fields and the sum field.

  2. We define a calculateSum function that:

    • Gets the values from input1 and input2.
    • Uses parseFloat to convert the values to numbers.
    • Checks if either value is NaN (Not a Number), indicating invalid input.
    • If the input is invalid, it displays an error message in the sum field and returns.
    • If the input is valid, it calculates the sum and displays it in the sum field.

  3. We add event listeners to input1 and input2 to call the calculateSum function whenever the input values change.

Implementing Validation Logic

To meet the requirement that the sum is only displayed when the inputs are valid, we've already implemented a basic validation in the calculateSum function. However, let's expand on this to include more robust validation.

Enhanced Validation

We can add more specific validation rules, such as:

  • Checking for empty inputs.
  • Ensuring the inputs are within a certain range.
  • Validating that the inputs are numbers.

Here's an example of enhanced validation:

function calculateSum() {
 const value1 = input1.value.trim();
 const value2 = input2.value.trim();

 if (value1 === '' || value2 === '') {
 sumField.value = 'Please enter both numbers';
 return;
 }

 const num1 = parseFloat(value1);
 const num2 = parseFloat(value2);

 if (isNaN(num1) || isNaN(num2)) {
 sumField.value = 'Invalid input';
 return;
 }

 if (num1 < 0 || num2 < 0) {
 sumField.value = 'Numbers must be positive';
 return;
 }

 const sum = num1 + num2;
 sumField.value = sum;
}

In this updated code:

  • We use trim() to remove whitespace from the input values.
  • We check if either input is empty and display an appropriate message.
  • We check if the numbers are negative and display an error if they are.

Displaying Error Messages

Instead of just displaying a generic "Invalid input" message, it's better to provide more specific error messages to guide the user. For example, we can display different messages for empty inputs, non-numeric inputs, and out-of-range inputs.

Ensuring Dynamic Updates

The component should dynamically update the sum as the user types in the input fields. This is achieved by attaching the calculateSum function to the input event of the input fields. Whenever the value of an input field changes, the calculateSum function is called, and the sum field is updated accordingly.

Debouncing Input

For a better user experience, especially when dealing with more complex calculations, you might want to debounce the input. Debouncing ensures that the calculateSum function is not called too frequently, which can improve performance.

function debounce(func, delay) {
 let timeout;
 return function(...args) {
 const context = this;
 clearTimeout(timeout);
 timeout = setTimeout(() => func.apply(context, args), delay);
 };
}

const debouncedCalculateSum = debounce(calculateSum, 300);

input1.addEventListener('input', debouncedCalculateSum);
input2.addEventListener('input', debouncedCalculateSum);

In this code, we define a debounce function that takes a function and a delay as arguments. It returns a new function that, when called, will wait for the specified delay before executing the original function. We then use this debounce function to create a debounced version of the calculateSum function and attach it to the input event of the input fields.

Reusability of the Component

To ensure that the component is reusable for other calculations in future features, we need to make it generic and configurable. We can achieve this by:

  • Allowing the user to specify the input fields and the output field.
  • Providing a way to configure the validation rules.
  • Making the calculation logic customizable.

Creating a Configurable Component

Here's an example of how to create a configurable component:

class SumCalculator {
 constructor(input1Id, input2Id, sumFieldId, validationRules, calculationLogic) {
 this.input1 = document.getElementById(input1Id);
 this.input2 = document.getElementById(input2Id);
 this.sumField = document.getElementById(sumFieldId);
 this.validationRules = validationRules || [];
 this.calculationLogic = calculationLogic || ((a, b) => a + b);

 this.input1.addEventListener('input', () => this.calculate());
 this.input2.addEventListener('input', () => this.calculate());
 }

 validate() {
 for (const rule of this.validationRules) {
 const errorMessage = rule(this.input1.value, this.input2.value);
 if (errorMessage) {
 this.sumField.value = errorMessage;
 return false;
 }
 }
 return true;
 }

 calculate() {
 if (!this.validate()) {
 return;
 }

 const value1 = parseFloat(this.input1.value);
 const value2 = parseFloat(this.input2.value);

 if (isNaN(value1) || isNaN(value2)) {
 this.sumField.value = 'Invalid input';
 return;
 }

 const sum = this.calculationLogic(value1, value2);
 this.sumField.value = sum;
 }
}

// Usage
const calculator = new SumCalculator(
 'input1',
 'input2',
 'sum',
 [
 (a, b) => (a.trim() === '' || b.trim() === '' ? 'Please enter both numbers' : null),
 (a, b) => (isNaN(parseFloat(a)) || isNaN(parseFloat(b)) ? 'Invalid input' : null),
 (a, b) => (parseFloat(a) < 0 || parseFloat(b) < 0 ? 'Numbers must be positive' : null),
 ],
 (a, b) => a + b // Custom calculation logic
);

In this code:

  • We define a SumCalculator class that takes the IDs of the input fields and the sum field as arguments.
  • We also allow the user to pass in an array of validation rules and a custom calculation logic function.
  • The validate method applies the validation rules and returns true if all rules pass, and false otherwise.
  • The calculate method calls the validate method and, if the validation passes, calculates the sum using the custom calculation logic and displays it in the sum field.

Code Review and Merge

Once the component is implemented and tested, it's important to have the code reviewed by other developers. This helps to identify potential issues and ensure that the code meets the project's standards. After the code review, the code can be merged into the main branch.

Best Practices for Code Review

  • Ensure the code is well-documented.
  • Check for potential performance issues.
  • Verify that the code follows the project's coding standards.
  • Test the component thoroughly to ensure it meets the acceptance criteria.

Conclusion

Alright guys, creating a UI component that dynamically displays a calculated sum in a third input field while ensuring that the sum is only displayed when the inputs are valid involves several steps. From setting up the basic UI to implementing validation logic and ensuring dynamic updates, each step is crucial for creating a robust and user-friendly component. By following the guidelines and best practices outlined in this article, you can create a reusable component that meets the project's requirements and provides a great user experience. Keep coding and have fun!