{countdown}

# <code style='font-size: 200%'>{countdown}</code>

### &#x23F2; :: &#x1F4AD; &#x1F4AC; &#x1F469;&#x200D;&#x1F4BB; :: &#x23F0;<br/><a href='https://github.com/gadenbuie/countdown' style='color: #d33682;'>github.com/gadenbuie/countdown</a>

Version: <span style="color: #b58900;">0.4.0.9000</span>

Updated: <span style="color: #2aa198;">2024-04-10</span>

.footnote[
[![CRAN status](https://www.r-pkg.org/badges/version/countdown)](https://CRAN.R-project.org/package=countdown)
[![countdown on r-universe/gadenbuie](https://gadenbuie.r-universe.dev/badges/countdown)](https://gadenbuie.r-universe.dev)
[![R-CMD-check](https://github.com/gadenbuie/countdown/actions/workflows/R-CMD-check.yaml/badge.svg)](https://github.com/gadenbuie/countdown/actions/workflows/R-CMD-check.yaml)
]

---

[xaringan]: https://github.com/yihui/xaringan#readme
[rmarkdown]: https://rmarkdown.rstudio.com
[countdown]: https://github.com/gadenbuie/countdown

# Hey look, it's a timer!

<div class="countdown" id="timer_e8cd08a3" data-update-every="1" data-play-sound="true" tabindex="0" style="top:26%;right:33%;">
<div class="countdown-controls"><button class="countdown-bump-down">−</button><button class="countdown-bump-up">+</button></div>
<code class="countdown-time"><span class="countdown-digits minutes">00</span><span class="countdown-digits colon">:</span><span class="countdown-digits seconds">42</span></code>
</div><style>:root {--countdown-font-size:3rem;--countdown-margin:0.6em;--countdown-padding:10px 15px;--countdown-box-shadow:0px 4px 10px 0px rgba(50, 50, 50, 0.4);--countdown-border-width:0.1875 rem;--countdown-border-radius:0.9rem;--countdown-line-height:1;--countdown-color-border:#d33682;--countdown-color-background:inherit;--countdown-color-text:#d33682;--countdown-color-running-background:#2aa198;--countdown-color-running-border:#0D9188FF;--countdown-color-running-text:#073642;--countdown-color-finished-background:#dc322f;--countdown-color-finished-border:#CD1F1BFF;--countdown-color-finished-text:#fdf6e3;--countdown-color-warning-background:#E6C229;--countdown-color-warning-border:#CEAC04FF;--countdown-color-warning-text:#3A2F02FF;}</style>

### How to use your new countdown timer

Click or <kbd>Space</kbd> on the timer to **start** or **stop** it.

Double click or <kbd>Esc</kbd> anytime to **reset** it.

Use the **&plus;** and **&minus;** buttons or <kbd>&uarr;</kbd> <kbd>&darr;</kbd> to **bump** the timer **up** or **down**.

---
# Easily add a timer to your slides!

First, install `countdown` from [GitHub][countdown]

```r
remotes::install_github("gadenbuie/countdown", subdir = "r")
```

Then call on `countdown`

```r
library(countdown)
```

and in your [xaringan] slides or [R Markdown][rmarkdown] document add

```markdown
`r countdown(minutes = 0, seconds = 42)`
```

````markdown
```{r}
countdown(minutes = 0, seconds = 42)
```
````

---

# What's so cool about a timer?

.pull-left[
If your slides support your teaching materials, on-screen timers are a great way to bracket group activities.

Put your prompt on the screen and ask the group:

> _Take 4 minutes to discuss with your partner_

Then click on your timer to keep everyone on track!
]

.pull-right[
.center[
I learned this from [&commat;StatGarrett](https://twitter.com/StatGarrett)'s
rad `rstudio::conf` workshop!

Here's an example from his
[Master the Tidyverse materials](https://github.com/rstudio-education/master-the-tidyverse/).
]
]

---

# `countdown` has style

Settings of individual timers

- _`minutes`_
- _`seconds`_
- `play_sound`
- `top`
- `right`
- `bottom`
- `left`
- `update_every`
- `warn_when`
- .subtle[`font_size`]
- .subtle[`margin`]
- .subtle[`padding`]

Style all timers at once

- `font_size`
- `margin`
- `padding`
- `box_shadow`
- `border_width`
- `border_radius`
- `line_height`
- `color` options for
  - `_background`, `_border`, `_text`
  - and for `running`, `finished`, `warning`
]

---
layout: true

# The first-time timer

---

Here's how I created the first timer and set this presentation's timer styles.

``` r
library(countdown)

# Get the solarized color palette
solarized <- xaringanthemer:::solarized

countdown(
  minutes = 0,
  seconds = 42,
  play_sound = TRUE # Fanfare when it's over
)

countdown_style(
  # Set timer theme to match solarized colors
  color_border              = solarized$magenta,
  color_text                = solarized$magenta,
  color_running_background  = solarized$cyan,
  color_running_text        = solarized$base02,
  color_finished_background = solarized$red,
  color_finished_text       = solarized$base3
)
```

---

If you customize your timer's styles,<br>
**you only have to do it once with `style_timer()`**.

After that, you only ever _need_ to specify `minutes` and `seconds`<sup>&#x2731;</sup>.

The default timer looks pretty good in most cases, so try it first!

```r
countdown(minutes = 0, seconds = 15)
```

.center[
<iframe src="default-timer/index.html" width="240px" height="128px" style="border:3px solid #002b36;"></iframe>
]

---
layout: false

# Moar timers!

You can have as many timers as you want, even on the same screen.
--

Use the `top`, `bottom`, `left` and `right` arguments to position the timers.

<p style="margin-bottom: -10px">The default is <strong>bottom</strong>, <strong>right</strong>.</p>

```r
countdown(minutes = 0, seconds = 7, bottom = 0)
```

<p style="margin-bottom: -10px">This timer is <strong>top</strong>, <strong>right</strong>.</p>

```r
countdown(minutes = 0, seconds = 13, top = 0)
```

<p style="margin-bottom: -10px">This timer is <strong>bottom</strong>, <strong>left</strong>.</p>

```r
countdown::countdown(minutes = 0, seconds = 21, left = 0)
```

.center.big[
&#x1F446;&#x1F3FC;
&#x1F448;&#x1F3FC; Go ahead, click them! &#x1F449;&#x1F3FC;
]

---

# Start Immediately

```r
countdown(start_immediately = TRUE)
```

Inside **xaringan** slides, when `start_immediately = TRUE`,
the timer will start when you land on the slide.

When used with other web pages,
the timer starts as soon as it's visible.

---

# Customize your timers

`top`/`bottom` and `left`/`right` cancel each other out unless you specify both.

You can also override the global timer `font_size`, `padding`, and `margin`.

```r
countdown(minutes = 1, seconds = 30,
          left = 0, right = 0,
          padding = "50px",
          margin = "5%",
          font_size = "6em")
```

---

# Full-screen timers

Set `top`, `bottom`, `left` and `right` all to `0` to get a full screen timer, or
use  `countdown_fullscreen()` for a (possibly stand-alone) [full-screen timer](fullscreen/index.html).

Very helpful for hiding content while the activity is going on, or for presenters.

Here's the code. I made the the `font_size` bigger and adjusted the `margin`
around the timer so it takes up the whole screen.

```r
countdown(minutes = 0, seconds = 90,
          top = 0, bottom = 0,
          left = 0, right = 0,
          margin = "5%",
          font_size = "8em")
```

---
class: center top

# Keep Calm

### and

# Countdown

Avoid countdown panic with a timer<br>that only **update**s once **every** *n* seconds

```r
countdown(minutes = 1, update_every = 15, right = "33%")
```

---

# Be Warned Before Time Runs Out

Warn your audience that time is about to run out. The warning style is applied to the timer for the last _N_ seconds by setting `warn_when = N`.

```r
countdown(0, 10, warn_when = 5, right = "33%", bottom = "33%", blink_colon = TRUE)
```

Modify the `background`, `text` and `border` colors of the warning state using the `color_warning_...` arguments.

---

# Behind the scenes

Behind the scenes, `countdown` is a little R wrapper around
a very small amount of HTML and CSS and bit more of Javascript.

Each countdown timer element looks something like this:

````html
<div class="countdown" id="timer_ff97b84d" data-update-every="1" tabindex="0" style="right:0;bottom:0;">
  <div class="countdown-controls"><button class="countdown-bump-down">&minus;</button><button class="countdown-bump-up">&plus;</button></div>
  <code class="countdown-time">
    <span class="countdown-digits minutes">03</span>
    <span class="countdown-digits colon">:</span>
    <span class="countdown-digits seconds">30</span>
  </code>
</div>
````

Once the timer is activated, `<div class="countdown">` gets an added class:

- `running` when the timer is _running_, or
- `finished` when the timer is _finished_.

---

# Customized CSS

Want to completely customize the CSS of each timer?
--

No problem!

Just give each timer a unique `id` that you can use in your CSS.

```css
#special_timer.running {
  background-color: black;
  background-image: url(img/bg-stars.gif);
}
#special_timer.finished {
  background-color: black;
  background-image: url(img/bg-sqfw.gif);
  background-size: cover;
}
#special_timer.running .countdown-digits {
  color: #fdf6e3;
}
```

```r
countdown::countdown(0, 9, id = "special_timer")
```

---

# Make a joyful noise!

`countdown` timers are quiet by default, but it can be nice to have a noisy timer that gets everyone's attention.

Set `play_sound = TRUE` to be alerted to the end of the timer with fanfare!

```r
countdown(0, 10, play_sound = TRUE)
```

Check out [beepr](https://github.com/rasmusab/beepr) if you want awesome sound alerts in your R session!

---
class: inverse center middle
name: shiny

# &#x2728; &#x23F2;&#xFE0F;<br>Shiny Timers

---

# A Shiny countdown app

**countdown** ships with a [Shiny app](https://shiny.rstudio.com) for an interactive _full-screen countdown timer_!

To launch the app, run

```r
countdown_app()
```

or use the version hosted online at [apps.garrickadenbuie.com/countdown](https://apps.garrickadenbuie.com/countdown/).

.center[
<a href="https://apps.garrickadenbuie.com/countdown/">
<img src="img/countdown-app.png" width="75%" />
</a>
]

---

# Use timers inside Shiny apps

**countdown** ships with out-of-the-box Shiny integration:

* Interact with timers in Shiny apps using `countdown_update()`

* Set the `id` of a countdown timer to receive updates in the Shiny app
  (use `input$<id>`)

* Try the demo app to learn more: `countdown_shiny_example()`

---

background-image: url(https://media.giphy.com/media/xT5LMRClPgWMjpEmbe/giphy.gif)
background-size: cover