The "Countdown" template displays a countdown until your presentation starts.

It could be handy, for example when you organize a meetup, to display a countdown until the event start.

• Installation
  • From a CDN
  • From NPM
  • Framework integration
• Usage
  • Usage
  • Slots
• Attributes
  • Example without any slots
• Theming
• Development
• License

This template could be added to your presentation using the following methods.

It's recommended to use unpkg if you want to use this template from a CDN. To do so, add the following include script in the main HTML file of your project:

<script type="module" src="https://unpkg.com/@deckdeckgo/slide-countdown@latest/dist/deckdeckgo-slide-countdown/deckdeckgo-slide-countdown.esm.js"></script>

To install this template in your project from npm run the following command:

npm install @deckdeckgo/slide-countdown

The Stencil documentation provide examples of framework integration for Angular, React, Vue and Ember.

That being said, commonly, you might either import or load it:

import '@deckdeckgo/slide-countdown';

import { defineCustomElements as deckDeckGoSlideElement } from '@deckdeckgo/slide-countdown/dist/loader';
deckDeckGoSlideElement();

The "Countdown" slide's Web Component could be integrated using the tag <deckgo-slide-countdown/>.

<deckgo-deck>
    <deckgo-slide-countdown until="2019-08-05T23:25:59.000+02:00">
        <h1 slot="title">My presentation starts at</h1>
        <p slot="days">Days</p>
        <p slot="hours">Hours</p>
        <p slot="minutes">Minutes</p>
        <p slot="seconds">Seconds</p>
    </deckgo-slide-countdown>
</deckgo-deck>

The slots title as well as days, hours, minutes and seconds are optional.

The time until your presentation should be provided to render the countdown. This value could be either passed through attributes days, hours, minutes and seconds or as a particular date using until.

This component exposes the following attributes:

If you provide a date using until, note that the format should be provided as a valid and parsable date. See Date.parse() for more information about the format.

<deckgo-deck>
  <deckgo-slide-countdown hours="0" minutes="10" seconds="45">
  </deckgo-slide-countdown>
</deckgo-deck>

The following theming options will affect this component if set on its host or parent.

To develop and run this Web Component locally, proceed as following:

git clone https://github.com/deckgo-community/countdown
cd countdown
npm install
npm run start

MIT © David Dal Busco, Nicolas Mattia & Gaurav Mahto