CODEWITHSUNDEEP
javascriptangulartypescriptobservable
Rildo Gomez
Rildo Gomez

Reputation: 305

how to create a Countup timer Angular 5

I've been trying to create a count-up timer like days hours minutes seconds I got a countdown timer that

Here is the code:

import {Component, OnInit, ElementRef, Input} from '@angular/core'
import {Observable} from 'rxjs/Rx';

@Component({
  selector: 'countdown',
template: `Time to vote {{message}} {{countDown}}`,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent  {
    @Input() name: string;
    message :string;
    private future:Date;
    private futureString:string;
    private diff: any;
    @Input() inputDate: Date;


    constructor(elm: ElementRef) {
        this.futureString = elm.nativeElement.getAttribute('inputDate'); 
    }

  dhms(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 [
             days + 'd',
             hours + 'h',
             minutes + 'm',
             seconds + 's'
            ].join(' ');
  }


  ngOnInit() {
      Observable.interval(1000).map((x) => {
          this.future = new Date(this.inputDate.toString().replace( /(\d{2})-(\d{2})-(\d{4})/, "$2/$1/$3"));
        this.diff = Math.floor((this.future.getTime() - new Date().getTime()) / 1000);
    }).subscribe((x) => { 
            this.message = this.dhms(this.diff);
          });

  }
}

Is there a way to modify this to make it count up instead of count down? I've been trying for a while now so any help would be appreciated. thanks in advance

Upvotes: 1

Views: 2282

Answers (1)

Rahul Singh
Rahul Singh

Reputation: 19622

Updated the StackBlitz Link

In a nutshell

@Component({
  selector: 'countdown',
  template: `Time to vote {{message}} {{countDown}}`,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent {
  @Input() name: string;
  message: string;
  private future: Date;
  private futureString: string;
  private diff: any;
  @Input() inputDate: Date;


  constructor(elm: ElementRef) {
    this.futureString = elm.nativeElement.getAttribute('inputDate');
  }


  dhms(difference) {
    var days, hours, mins, secs;
    days = Math.floor(difference / (60 * 60 * 1000 * 24) * 1);
    hours = Math.floor((difference % (60 * 60 * 1000 * 24)) / (60 * 60 * 1000) * 1);
    mins = Math.floor(((difference % (60 * 60 * 1000 * 24)) % (60 * 60 * 1000)) / (60 * 1000) * 1);
    secs = Math.floor((((difference % (60 * 60 * 1000 * 24)) % (60 * 60 * 1000)) % (60 * 1000)) / 1000 * 1);

    return [
      days + 'd',
      hours + 'h',
      mins + 'm',
      secs + 's'
    ].join(' ');
  }


  ngOnInit() {
    Observable.interval(1000).map((x) => {
      this.future = new Date(this.inputDate.toString().replace(/(\d{2})-(\d{2})-(\d{4})/, "$2/$1/$3"));
      this.diff = Math.floor((new Date().getTime() - this.inputDate.getTime()));
    }).subscribe((x) => {


      this.message = this.dhms(this.diff);
    });


  }
}

Upvotes: 3

Related Questions