Multiplying Time in the Format of HH:MM:SS

Question

Multiplying Time in the Format of HH:MM:SS

Three fields are available: "Duration, Repeat, Complete Duration". Users input the duration in the time format (HH:MM:SS) and provide a value for the repeat field such as "5,10,4,9,7, etc." The complete duration field should automatically populate based on the values entered in the first two fields.

I attempted to use Angular's NgModel for both text fields and multiplied the values by the repeat field value. However, I encountered issues with proper conversion.

<div>  
    <input type="value" [(ngModel)]="user.hrDuration"> 
    <input type="value" [(ngModel)]="user.minDuration">
    <input type="value" [(ngModel)]="user.secDuration">
</div>
<div>
 <input type="value"   [(ngModel)]="user.repeat">
</div>
<div>  
    <input type="value" [(ngModel)]="user.hrDuration*user.repeat"> 
    <input type="value" [(ngModel)]="user.minDuration*user.repeat">
    <input type="value" [(ngModel)]="user.secDuration*user.repeat">
</div>

Although I tried this method, it simply multiplied the values directly without proper conversion. My goal is to convert the values first before multiplying them by the repeat field value.

Appreciate any help provided!

javascript angular typescript

Answer 1

Answer №1

If you want to track changes in the input fields, make sure to subscribe to their input events:

<div>  
    <input type="value" [(ngModel)]="user.hrDuration" (input)="updateResult()"> 
    <input type="value" [(ngModel)]="user.minDuration" (input)="updateResult()">
    <input type="value" [(ngModel)]="user.secDuration" (input)="updateResult()">
</div>
<div>
 <input type="value" [(ngModel)]="user.repeat" (input)="updateResult()">
</div>
<div>  
    <input type="text" [ngModel]="result.hrDuration"> 
    <input type="text" [ngModel]="result.minDuration">
    <input type="text" [ngModel]="result.secDuration">
</div>

Then, within the Component, implement a method to handle these input events:

export class AppComponent  {
  user = {
    hrDuration: 1,
    minDuration: 1,
    secDuration: 1,
    repeat: 1
  }

  result = {
    hrDuration: this.user.hrDuration * this.user.repeat,
    minDuration: this.user.minDuration * this.user.repeat,
    secDuration: this.user.secDuration * this.user.repeat
  }

  updateResult() {
    // Perform calculations here
    this.result.hrDuration = this.user.hrDuration * this.user.repeat;
    this.result.minDuration = this.user.minDuration * this.user.repeat;
    this.result.secDuration = this.user.secDuration * this.user.repeat;
  }
}

You can find a working example on StackBlitz: https://stackblitz.com/edit/angular-2aukww

Answer 2

If you want to track changes in the input fields, make sure to subscribe to their input events:

<div>  
    <input type="value" [(ngModel)]="user.hrDuration" (input)="updateResult()"> 
    <input type="value" [(ngModel)]="user.minDuration" (input)="updateResult()">
    <input type="value" [(ngModel)]="user.secDuration" (input)="updateResult()">
</div>
<div>
 <input type="value" [(ngModel)]="user.repeat" (input)="updateResult()">
</div>
<div>  
    <input type="text" [ngModel]="result.hrDuration"> 
    <input type="text" [ngModel]="result.minDuration">
    <input type="text" [ngModel]="result.secDuration">
</div>

Then, within the Component, implement a method to handle these input events:

export class AppComponent  {
  user = {
    hrDuration: 1,
    minDuration: 1,
    secDuration: 1,
    repeat: 1
  }

  result = {
    hrDuration: this.user.hrDuration * this.user.repeat,
    minDuration: this.user.minDuration * this.user.repeat,
    secDuration: this.user.secDuration * this.user.repeat
  }

  updateResult() {
    // Perform calculations here
    this.result.hrDuration = this.user.hrDuration * this.user.repeat;
    this.result.minDuration = this.user.minDuration * this.user.repeat;
    this.result.secDuration = this.user.secDuration * this.user.repeat;
  }
}

You can find a working example on StackBlitz: https://stackblitz.com/edit/angular-2aukww

Answer 3

Answer №2

If you want to calculate a result based on user input in Angular, consider using an onchange event listener along with a function to handle the calculation:

HTML:

<div>  
    <input type="value" [ngModel]="user.hours" (ngModelChange)="calculateResult()"> 
    <input type="value" [ngModel]="user.minutes" (ngModelChange)="calculateResult()">
    <input type="value" [ngModel]="user.seconds" (ngModelChange)="calculateResult()">
</div>
<div>
 <input type="value" [ngModel]="user.repeat" (ngModelChange)="calculateResult()">
</div>
<div>  
    <input type="value" (ngModel)="user.result" readonly>
</div>

JS:

function calculateResult() {
    if (isNaN($scope.user.hours) ||
        isNaN($scope.user.minutes) ||
        isNaN($scope.user.seconds) ||
        isNaN($scope.user.repeat)) return $scope.user.result = "";

    var total = ($scope.user.hours*60*60 + $scope.user.minutes*60 + $scope.user.seconds) * $scope.user.repeat;

    var hh = Math.floor(total / (60*60));
    if ( hh < 10 ) hh = '0' + hh;

    var diff = total % (60*60);

    var mm =  Math.floor(diff / 60);
    if ( mm < 10 ) mm = '0' + mm;

    var ss = Math.floor(diff % 60);
    if ( ss < 10 ) ss = '0' + ss;

    $scope.user.result = hh + ':' + mm+ ':' + ss;
    // Alternatively, you can display the result as hours, minutes, and seconds
}

Displaying the result as a single value can make it easier for users to understand the final outcome rather than multiplying each time variable by repeats, which can be confusing.

Answer 4

If you want to calculate a result based on user input in Angular, consider using an onchange event listener along with a function to handle the calculation:

HTML:

<div>  
    <input type="value" [ngModel]="user.hours" (ngModelChange)="calculateResult()"> 
    <input type="value" [ngModel]="user.minutes" (ngModelChange)="calculateResult()">
    <input type="value" [ngModel]="user.seconds" (ngModelChange)="calculateResult()">
</div>
<div>
 <input type="value" [ngModel]="user.repeat" (ngModelChange)="calculateResult()">
</div>
<div>  
    <input type="value" (ngModel)="user.result" readonly>
</div>

JS:

function calculateResult() {
    if (isNaN($scope.user.hours) ||
        isNaN($scope.user.minutes) ||
        isNaN($scope.user.seconds) ||
        isNaN($scope.user.repeat)) return $scope.user.result = "";

    var total = ($scope.user.hours*60*60 + $scope.user.minutes*60 + $scope.user.seconds) * $scope.user.repeat;

    var hh = Math.floor(total / (60*60));
    if ( hh < 10 ) hh = '0' + hh;

    var diff = total % (60*60);

    var mm =  Math.floor(diff / 60);
    if ( mm < 10 ) mm = '0' + mm;

    var ss = Math.floor(diff % 60);
    if ( ss < 10 ) ss = '0' + ss;

    $scope.user.result = hh + ':' + mm+ ':' + ss;
    // Alternatively, you can display the result as hours, minutes, and seconds
}

Displaying the result as a single value can make it easier for users to understand the final outcome rather than multiplying each time variable by repeats, which can be confusing.

Multiplying Time in the Format of HH:MM:SS

Answer №1

Answer №2

Similar questions

Rendering HTML content in a preformatted <code> tag using Electron

Svelte warns of potential undefined Variable when using "bind:this={}"

The conversion of the property value from type 'java.lang.String' to the required type 'java.time.LocalDate' failed in the JHipster generated file

Execute a function for each template or controller when the page loads

What is the best way to employ document.addEventListener in TypeScript?

Remove class using jQuery when clicked for the second time and also disable hover effect on the second click

Customized Error Handling Function for Ajax Requests

Developing a firestore query using typescript on a conditional basis

The text in Three.js fails to display

Is it possible to provide a project name when using the angular material schematic?

Issue encountered when installing packages with NPM due to a missing first argument

The issue of Angular child components rendering before receiving parent data

display dynamic graphs using json data from a php backend

What is the best way to conceal a div while displaying another div using jQuery?

Fill the tooltip using JSON retrieved from the data-tooltip attribute of the element

AJAX reconstructs accordion elements and shatters them apart

Create an interactive HTML table featuring objects as the selected values

Is there a way to deactivate the toggle button in my code?

Struggling to make the background image appear full screen on the webpage despite implementing a script

"Using a regular expression with jQuery's .test method results in a false