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.

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

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);
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using POST to submit a form containing the <keygen> element in AngularJS

Today marks my first attempt at submitting a form in AngularJS using a POST Http Request. This particular form contains a unique element that generates a key, as shown below: <keygen id="spkac" name="spkac" challenge="randomchars" keytype="rsa" hidden& ...

What is the best method for packaging a React component library?

Currently, I am working on developing a React component library that I aim to distribute via npm to reach a wide audience. In my development process, I utilize webpack and babel for packaging and code processing. However, as a newcomer to webpack, I am uns ...

Utilizing AngularJS to Organize Repetitive JSON Information

Can anyone assist me with a query on JSON objects that are repeated in the following format: [{ "nip": "6080022A", "nama": "ASLAN PURNAMA", "semester1_2012": null, "semester2_2012": null, "semester1_2013": null, "semester2_2013": n ...

Implement the addition of a class upon hovering using AngularJS

My goal is to include a new class when hovering over the li element using Angular in the code snippet below. <li ng-mouseenter="cola-selected=true" class="pull-left" ng-class="{'selected' : cola-selected}"> <a href="interna.html"> ...

Filter Observable based on object array property

I am trying to filter an Observable and only keep the stream that has a specific property value in an array of objects inside it. For example, consider this Observable: const observable = of({name: 'agency', year: '2010', job: [ ...

Learning more about the functionality of ui-router, particularly how the ui-sref directive can be used to navigate to

Here is an example of the HTML code: <li class="list-group-item" ui-sref="contacts.detail({id:4})"> <span class="badge" ui-sref="contacts.selected">14</span> Cras justo odio </li> When contacts.selected is clicked, it w ...

Choose not to alter the display value during keyup and keydown events, while still triggering the change event

$(function(){ $(".cls_user_details select").keyup(function(){ $(".cls_user_details select").val("Profile"); }) }) <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="cls_user_setti ...

Creating a JavaScript array in Rails 4 based on current data without the need to reload the webpage

Currently in my rails 4 app, I am working on a unique tags validation using jquery validate to ensure that tags are not duplicated before they can be added to an item. The tag list structure is as follows: <div id="taglist"> <span class="label ...

stop all HTML5 videos when a specific video is played using jQuery

I am facing an issue with 10 HTML5 videos on the same page, CHALLENGE Whenever I click on different videos, they all start playing simultaneously... <div><video class="SetVideo"></video><button class="videoP"></button>< ...

React - output from forEach() function is not defined

I am facing a challenge in rendering prop values from a nested object. There are two issues that I'm encountering: 1. The JSX code line (with variables) is not showing up in the browser 2. When I console log the variables with .forEach() methods, th ...

Animating several elements by toggling their classes

I'm struggling to implement smooth animations on this box. I've tried using 'switchClass' but can't seem to keep everything together. Any help would be greatly appreciated. Here is the code snippet for reference: <script src=" ...

iterative outcomes with ajax and jquery scripting in javascript

Hey there! I'm trying to create a JavaScript script using AJAX that will extract the id and value of a button when hovered over. The extracted value will then be sent to a PHP script on the same page, where it will be used as a variable for searching ...

Displaying XML data using d3js

Currently, I am working on a d3.js assignment for my school project. While looking at some examples to load an XML file, I seem to be encountering difficulties in figuring out what's going wrong. The XML file is loading correctly, but as I am still le ...

Develop a RESTful API in Node.js that allows for the sending of audio files along with JSON

My current project involves a REST API that I've built using node and express. I'm now facing a challenge where I need to send both JSON Data and an Audio File in a single http request. The audio file needs to be playable on the client side. JSO ...

Instructions on integrating a column of buttons into a Bootstrap table containing information retrieved from a MySQL database

My bootstrap table is currently displaying data that is loaded from a MySQL database. I am looking to enhance it by adding a column with buttons, similar to the layout shown in this image. https://i.stack.imgur.com/8fWfR.png However, I am facing some dif ...

Executing the onSuccess callback in Ajax without any ability to manipulate the ajax requests

My dilemma lies in needing to execute a JavaScript function upon the successful completion of an AJAX call. Unfortunately, I am unable to directly manage the AJAX calls as they are handled by the DNN5 framework. Is there a way for me to trigger my functio ...

Attempting to modify a JSON file within a React application

I recently obtained a JSON file named 'DealerList.json' which I managed to import into my app using the following code snippet: import DealerList from './json/DealerList' let tasks = DealerList; The tasks now store the JSON data and I ...

What is the best way to retrieve the results of an indexedDb request beyond the limitations of its callback function?

I am working on a form that has an input box which I want to auto-complete with values from an IndexedDb objectStore. Currently, it is functioning with two overlapping input boxes, using a simple array. However, I am looking to make it work with the values ...

Tips for creating a dynamic route with NextJs 14 API

Looking to start a blog with Next.js 14 and I'm working on defining a function in api/posts/[postSlug]/route.js. How do I access the postSlug parameter within this function? Here's my current function code: // api/posts/[postSlug]/route.js impor ...

The authService is facing dependency resolution issues with the jwtService, causing a roadblock in the application's functionality

I'm puzzled by the error message I received: [Nest] 1276 - 25/04/2024 19:39:31 ERROR [ExceptionHandler] Nest can't resolve dependencies of the AuthService (?, JwtService). Please make sure that the argument UsersService at index [0] is availab ...