I'm in need of a reverse countdown timer for my Angular project. I've explored various options such as observables and RxJS timers, but haven't found one that fits my requirements perfectly yet. Does anyone have a solution for a reverse countdown timer or know how to modify the code from the link below to work within an Angular project?
export class CountdownTimer {
// Set the end date for the countdown
private targetDate: Date = new Date(2018, 9, 22);
private timeDifference: number;
private countdownValue: number;
private daysLeft: number;
private hoursLeft: number;
private minutesLeft: number;
private secondsLeft: number;
constructor() {
Observable.interval(1000).map((x) => {
this.timeDifference = Math.floor((this.targetDate.getTime() - new Date().getTime()) / 1000);
}).subscribe((x) => {
this.daysLeft = this.calculateDays(this.timeDifference);
this.hoursLeft = this.calculateHours(this.timeDifference);
this.minutesLeft = this.calculateMinutes(this.timeDifference);
this.secondsLeft = this.calculateSeconds(this.timeDifference);
});
}
calculateDays(t){
var days;
days = Math.floor(t / 86400);
return days;
}
calculateHours(t){
var days, hours;
days = Math.floor(t / 86400);
t -= days * 86400;
hours = Math.floor(t / 3600) % 24;
return hours;
}
calculateMinutes(t){
var days, hours, minutes;
days = Math.floor(t / 86400);
t -= days * 86400;
hours = Math.floor(t / 3600) % 24;
t -= hours * 3600;
minutes = Math.floor(t / 60) % 60;
return minutes;
}
calculateSeconds(t){
var days, hours, minutes, seconds;
days = Math.floor(t / 86400);
t -= days * 86400;
hours = Math.floor(t / 3600) % 24;
t -= hours * 3600;
minutes = Math.floor(t / 60) % 60;
t -= minutes * 60;
seconds = t % 60;
return seconds;
}
My goal is to show the number of pixels a user has scrolled on my website using the scrollTop method in jQuery. I want this number of pixels to be displayed within a 'pixels' class. Therefore, I plan to have <p><span class="pixels"> ...
I am currently using the nicEdit editor and have successfully integrated my own custom image resizing script. However, I am facing an issue where the default _moz_resizing feature in Firefox is interfering with my custom script. My goal is to have specifi ...
I'm currently facing a challenge with creating a jQuery .each() function to iterate through an array that I've constructed from a Raphael object. While I am able to achieve this using a traditional JavaScript for-loop: for (var i = 0; i < reg ...
Utilizing GoogleMap API for Custom Location Display I have an imported array of JSON objects named data which includes an address property. The Google Maps API is used to retrieve coordinates from the addresses in order to generate custom markers displaye ...
In the Visual Studio React + Redux template project, I have created a react component with the following "render()" method: public render() { return ( <React.Fragment> <h1>Welcome to the Adventure Company {th ...
I'm currently working on incorporating a global loading indicator that can be utilized throughout the entire application. I have created an injectable service with show and hide functions: import { Injectable } from '@angular/core'; import ...
-12:00 - 5:30 => -6:30 -2:00 - 5:30 => 3:30 00:00 - 5:30 => -5:30 6:00 - 2:30 => 3:30 I am interested in subtracting time with both positive and negative indices. let myCountries = [ { countryName: "NewZealand", ...
While studying NodeJS and utilizing EJS as a templating engine, I encountered an issue when clicking on the register button on my Registration page. The error message states that title is not defined. Here is the snippet of my code: users.js var express ...
Trying to get weinre working through Ajax by calling this on dom ready: $.ajax({ url: 'http://debug.build.phonegap.com/target/target-script-min.js#hutber', dataType: "script", crossDomain: true, error: function(data){ c( ...
I am looking to streamline the process of registering for classes. The snippet of HTML code on the page appears as follows: <form id="SearchClasses" name="selectedStatusForm" action="/more/SearchClasses.action" method=&quo ...
I'm struggling to comprehend a strange aspect of the JSON data format. Here's the issue: I have a string with a Windows directory path, where backslashes are escaped. However, the jQuery JSON parser seems to require double escaping for some reas ...
I am currently working on developing a Node.js application to manage a small drone. The SDK provides the following instructions: To establish a connection between the Tello and a PC, Mac, or mobile device, use Wi-Fi. Sending Commands & Receiving Responses ...
Currently, I'm facing a challenge with altering the visual appearance of a button. Specifically, I want to make it resemble an arrow protruding from it, indicating that it is the active button. The button in question is enclosed within a card componen ...
Following the migration to Angular 14, I made sure to update my "@swimlane/ngx-charts" version to "20.1.2" and the "d3" version to "7.8.4". However, even after running the npm install command, I am still encountering 5 high severity vulnerabilities in my p ...
In my PHP code, I have written a function that extracts values from a CSS file and creates an array. Now, I need to loop through this array and create another array that only contains color values (strings starting with #). The challenge is that the length ...
I'm having trouble retrieving the value declared in the first function CreateTag and using it as a variable in the second function CreateStream. Despite working with nodejs Express, I've attempted to use RETURN without success. I've tried v ...
UPDATE: It's come to my attention that there may have been a shift from chaining to piping in RxJS 6.x. Can anyone confirm? See more at: This is my introduction to working with RxJS streams. I'm attempting to create some basic ones, but encounte ...
In my Angular app, I have a child component that invokes a function in the ngOnChanges lifecycle hook. export class GameComponent implements OnInit, OnChanges { ngOnChanges(changes: SimpleChanges) { this.generateRandomIcon(); } generateRan ...
I've encountered a strange issue while using the BxSlider plugin of jQuery on my page. When I implement the code for the slider with BxSlider, all other custom functions seem to stop working without any errors being displayed in the console. I've ...
I am looking to create a tooltip box that appears when hovering over an element, and I want the tooltip to only disappear when the user's mouse exits a specific custom hover area outlined by a vector graphic. My current implementation is working, but ...