npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@choudharymahipal/countdown-timer

v2.0.0

Published

You can install it from here [NPM Package](https://www.npmjs.com/package/@choudharymahipal/countdown-timer)

Downloads

208

Readme

Countdown Timer

You can install it from here NPM Package

Overview

CountdownTimer is a lightweight, customizable JavaScript library that enables you to create countdown timers effortlessly. Ideal for web applications, events, or any time-based functionality.

Coutdown-timer screenshot

Demo

Open in StackBlitz for DEMO

Features

  • Easy integration and setup
  • Customizable appearance
  • Show/Hide cards (Days, Hours, Minutes and Seconds)
  • Customizable Labels (Change labels according to your language preferences)
  • Callback to get status about countdown timer.

Installation

Install the library via npm:

npm i @choudharymahipal/countdown-timer

if any dependancy error then try this

npm i @choudharymahipal/countdown-timer --legacy-peer-deps

Usage

Step 1: Import the Module

In your app.module.ts:

import { CountdownTimerModule } from '@choudharymahipal/countdown-timer';

@NgModule({
  imports: [
    CountdownTimerModule
  ],
})
export class AppModule { }

Step 2: Add the Component

Use the countdown timer in your component's template:

For v0.0.2 : Just pass your targetDate and it will generate countdown timer based on targetDate. Here targetDate is required and It will accept Date format only, not a string.

<mahi-countdown-timer [targetDate]="targetDate"></mahi-countdown-timer>

For v1.0.0 : We have added 4 new properties to show and hide any card based on your requirements. display_days, display_hours, display_minutes and display_seconds are boolean type variables. Just pass true and false, it will show/hide cards automatically. All these 4 properties are optional.

<mahi-countdown-timer 
    [targetDate]="targetDate"
    [display_days]="display_days"
    [display_hours]="display_hours"
    [display_minutes]="display_minutes"
    [display_seconds]="display_seconds"
>
</mahi-countdown-timer>

For v2.0.0 : Now, New customizable Labels and callback events are introduced. You can add your own labels for each cards in your language. And from isTimerRunning and timeRemainingCount, will give you, latest updated status about current countdown timer. For more details you can check its demo on stackblitz.

<mahi-countdown-timer 
    [targetDate]="targetDate"
    [display_days]="display_days"
    [display_hours]="display_hours"
    [display_minutes]="display_minutes"
    [display_seconds]="display_seconds"
    [label_days]="label_days"
    [label_hours]="label_hours" 
    [label_minutes]="label_minutes" 
    [label_seconds]="label_seconds" 
    (isTimerRunning)="getIsTimerRunning($event)" 
    (timeRemainingCount)="getTimeRemainingCount($event)">
>
</mahi-countdown-timer>

Step 3: Define the Target Time and setup properties

In your component TypeScript file:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class YourComponent {
  targetTime: Date = new Date('2025-12-31T23:59:59'); //Required

  //show and hide cards
  display_days: boolean = false; //Optional
  display_hours: boolean = true; //Optional
  display_minutes: boolean = true; //Optional
  display_seconds: boolean = true; //Optional

  //labels
  label_days: string = "Day"; //Optional
  label_hours: string = "Hour"; //Optional
  label_minutes: string = "Minute"; //Optional
  label_seconds: string = "Second"; //Optional

  //Callback events
  isTimerRunning: boolean = false;
  timeRemaining = {
    days: 0,
    hours: 0,
    minutes: 0,
    seconds: 0,
  };

  constructor() {}

  getIsTimerRunning(event:any){
    this.isTimerRunning = event;
  }

  getTimeRemainingCount(event:any){
    this.timeRemaining = event;
  }

}

Contributing

[!NOTE] We welcome contributions to the Countdown Timer Library! If you'd like to help out, please visit our GitHub repository: countdown-timer-library.