Interactive Timekeeping Tool with AngularJS Alarm Feature

Question

Interactive Timekeeping Tool with AngularJS Alarm Feature

I have successfully implemented the functionality to display the system time and date. Additionally, I have set up textboxes for users to input the time they want to set as their first alarm.

My current goal is to trigger a particular action once the system time reaches the set 1st alarm time. At the moment, I am merely using a text label for this purpose but it is not the main focus.

The HTML section includes:

<input type="text" placeholder="Enter Time Start Here" ng-model="firstAlert"/>{{firstAlert}}
<button type="button" ng-click="Check()">Submit</button>

In the JavaScript part:

$scope.Check=function(){
    if(Date.now() == $scope.firstAlert)
    {
        $scope.info = "They're the same!";
    }
}

I am looking for guidance on the best approach to achieve this functionality. My initial idea does not seem to be efficient. While searching for examples, I primarily found timer implementations which are not what I require. Ideally, I would like the user to enter the date and time in a specific format (mm/dd/yy hh:mm PM or AM) or in a shorter date format.

javascript angularjs

Answer 1

Answer №1

To handle the timing in Angular, consider using either $interval or $timeout

You may need to make your logic in Check more detailed, but this is roughly how you would set up a check every second:

$interval($scope.Check, 1000);

Answer 2

To handle the timing in Angular, consider using either $interval or $timeout

You may need to make your logic in Check more detailed, but this is roughly how you would set up a check every second:

$interval($scope.Check, 1000);

Answer 3

Answer №2

Suppose the variable $scope.fisrtAlert is correctly formatted, you could consider implementing the following logic.

var timer = $interval(function(){
   if($scope.firstAlert && Date.now()==$scope.firstAlert){
      $scope.info = "Ring Ring";
   }
}, 1000);

$scope.stopTimer = function(){
  $interval.cancel(timer);
}

Answer 4

Suppose the variable $scope.fisrtAlert is correctly formatted, you could consider implementing the following logic.

var timer = $interval(function(){
   if($scope.firstAlert && Date.now()==$scope.firstAlert){
      $scope.info = "Ring Ring";
   }
}, 1000);

$scope.stopTimer = function(){
  $interval.cancel(timer);
}

Interactive Timekeeping Tool with AngularJS Alarm Feature

Answer №1

Answer №2

Similar questions

Is there a way to assign a null value to an empty material UI text field when submitting the form, rather than an empty string?

Implement validation for an editable row form with AngularJS

Issue with preventDefault not functioning correctly within a Bootstrap popover when trying to submit a

Choosing2 - incorporate a style to a distinct choice

Having trouble terminating the session with the authentication provider SSO on Node JS

The video in the TypeScript code within the Owl Carousel is not displaying properly - only the sound is playing. The video screen remains stationary

Tips for troubleshooting an Angular error when no specific information is provided

Understanding the behavior of the enter key in Angular and Material forms

From Vanilla Javascript to ES6 Spread Operator

Next.js project encountered a TypeError with message [ERR_INVALID_ARG_TYPE]: The "to" argument is expected to be a string type

Javascript issue: SyntaxError - A numerical value is required after the decimal point

What could be the reason my dropdown menu is not appearing on hover?

Retrieving Data from Database Using Laravel and Ajax Post-Update

Cloning Div repeatedly instead of the specified quantity

Is there a way to ensure that a certain block of code in Typescript is executed only after an API call has been completed?

When sorting in AngularJS using the orderBy filter, remember that string values should come before numeric values: for example, sort as follows (n/a, 0,

Error: Unable to assign value to the innerHTML property of an undefined element created by JavaScript

How can you use JavaScript to create a JSON object using values from an HTML form textarea and then send

Creating a custom comparison method between two select dropdowns using the jQuery Validation plugin

encountering problems with Next.js routing resulting in 404 errors