lubridate: Time travel

class: animated, fadeOut, center

#fireworks.finished {
  background-color: black;
  background-image: url(../images/fireworks.gif);
  background-size: cover;
  color: white;
}
</style>

.black {background-color: black;}

<style>

.clock {font-family: 'Orbitron, sans-serif'; font-weight: 400;}

.noise h1 {position: absolute;
    top: 174px;
    left: 94px;
    font-size: 8.3rem !important;
    font-weight: bold;
    font-family: "Holtwood One SC" !important;
    color: white;}
.sketch2 {font-family: "Londrina Sketch" !important; font-weight: 900;}
.metal {font-family: "Metal+Mania"; font-weight: 700;}
.metal2 {font-family: "Metal+Mania"; font-weight: 700; text-decoration: underline overline;}
.bright-red {color: #f62e14; opacity: 1;}
.transparent {opacity: 0}

.small-font h1 {font-size: 4.3rem !important;}
.teal h3 {font-weight: bold;}
.bigchart {margin-top: -10px; margin-left: -5%; width: 110%;}
.wider {width: 107%;}
img {max-width: 120%; width: 100%;}
.clear {clear:both;}
h2, h3 {color: black; padding-bottom: 28px;}

.pull-right img {width: 139%;
    max-width: 139%;
    margin-left: -38px;
    margin-top: -20px;}
    
.pull-left .remark-code-line {font-size: 1.49rem;}
.pull-up {margin-top: -28px;}

.small-font {font-size: 1.2rem;}
.small-font .remark-code-line {font-size: 1.5rem;}

.med-font .remark-code-line {font-size: 1.7rem;}

.shift-up {margin-top: -20px;}
.shift-left {margin-left: -28px;}
.small-shift-left {margin-left: -60px;}
.shift-right {margin-left: 180px;}
.shift-down {padding-top: 2px;}

.small-font table {width: 108%; font-size: 1.6rem !important;
    margin-left: -30px;}
.remark-slide table {width: 108%; font-size: 2rem;}
.small-table table {width: 39%;}

.remark-code {width: 104%;}
.remark-code-line {font-size: 1.75rem; line-height: 1.37; color: #223035;}

</style>

---
class: center, animated, slideOutRight

</div>

---
class: center, animated, slideInLeft

---
class: center, animated, fadeOut

</div>

---
class: inverse, center, middle, animated, infinite, pulse

<h1> .teal[.bigger[.big[DATES]]] </h1>
<h1><b> .big[ --- ] </b></h1>
<h1> .teal[.bigger[.big[TIME]]] </h1>

</div>

---
class: inverse, center, middle, black

# .big[.blue[Step 1]]
## .big[Become a date]

---
class: inverse, center, black, animated, fadeIn

---
class: inverse, center, middle, black, animated, fadeIn
exclude: true

.bigs[

<h1 style="font-size: 107px !important; float: left; margin-left: 54px;"> 
<span style="font-size: 78%">.gray[HH:MM]</span>
</h1>
]

---
class: inverse, center, black

.bigs[

]

---
exclude: true

# Convert ".teal[text]" to .blue[DATE]

<br>

.bluecode[.small-font[

| Function to use  |  Order of date elements                                 |
|:----|:-----------------------------------------------------------------|
|`mdy(`date`)  `    | Month-Day-Year ~ "<span class="teal">05-18-2023</span>" or <span class="teal">05/18/2023</span>                |
|`dmy()  `    | Day-Month-Year (Euro dates) ~ <span class="teal">18-05-2023</span> or <span class="teal">18/05/2023</span>  |
|`ymd()  `    | Year-Month-Day (Science dates) ~ <span class="teal">2023-05-18</span> or <span class="teal">2023/05/18</span> |
|`ymd_hms() ` | Year-Month-Day Hour:Minutes:Seconds ~  <span class="teal">2023-05-18 8:35:22 AM</span>   |

]]

---
exclude: false

# Convert ".teal[text]" to .blue[DATE]

<br>

.bluecode[.small-font[

| Format | Function to use   |
|:----|:-----------------------------------------------------------------|
| Month-Day-Year ~ "<span class="teal">05-18-2023</span>" or "<span class="teal">05/18/2023</span>"                | `mdy(`date`)  `    |  
| Day-Month-Year (Euro dates) ~ "<span class="teal">18-05-2023</span>" or "<span class="teal">18/05/2023</span>"  | `dmy()  `    | 
| Year-Month-Day (Science dates) ~ "<span class="teal">2023-05-18</span>" or "<span class="teal">2023/05/18</span>" | `ymd()  `    | 
| Year-Month-Day Hour:Minutes:Seconds ~  "<span class="teal">2023-05-18 8:35:22 AM</span>"   | `ymd_hms() ` |

]]

---
exclude: false

# <i class="fa fa-clock teal" aria-hidden="true"></i> Real world dates

<br>

.teal[**Month**]-.teal[**Day**]-.teal[**Year**] **dates**

.bluecode[

| Format |  Function to use         |  
|:------|:-------------------------|  
| "<span class="teal">05/18/2023 </span>" | `mdy(`date`)  ` |  
| "<span class="teal">May 18, 2023 </span>"| `mdy(`date`)  `       | 
| "<span class="teal">05/18/2023 8:00 CDT </span>"| `mdy_hm(`date`, tz = `"US/Central"`)  `| 
| "<span class="teal">05/18/2023 11:05:32 GMT </span>"| `mdy_hms(`date`, tz = `"GMT"`)  `|

]

---
exclude: true

# <i class="fa fa-clock teal" aria-hidden="true"></i> Real world dates

<br>

.teal[**Month**]-.teal[**Day**]-.teal[**Year**] **dates**

.bluecode[

| Function to use |  Format          |   
|:--------|:-------------------------|  
| `mdy(`date`)  ` |   "<span class="teal">05/18/2023</span>" |
| `mdy(`date`)  `       | "<span class="teal">May 18, 2023</span>"| 
| `mdy_hm(`date`, tz = `"US/Central"`)  `| "<span class="teal">05/18/2023 8:00 CDT</span>"|
| `mdy_hms(`date`, tz = `"GMT"`)  `| "<span class="teal">05/18/2023 11:05:32 GMT</span>"|

]
---

# <i class="fa fa-clock teal" aria-hidden="true"></i> Real world dates

<br>

.teal[**European**] **dates**

.bluecode[

| Format |  Function to use         |      | 
|:--------|:-------------------------|----:| 
| "<span class="teal">18-05-2023</span>" | `dmy(`date`) `  |    |
| "<span class="teal">18/05/2023</span>" | `dmy(`date`) `  |   |

]

---

# <i class="fa fa-clock teal" aria-hidden="true"></i> Real world dates

<br>

.teal[**No nonsense**] **dates**

.bluecode[

| Format |  Function to use         |   
|:--------|:-------------------------| 
| "<span class="teal">20230518</span>" | `ymd(`date`, tz = `"US/Central"`) `  |
| "<span class="teal">202305180630</span>" | `ymd_hm(`date`, tz = `"US/Central"`) `  |

]

---
class: inverse, center, middle, black

# .big[.blue[Step 2]]
## .big[Sort your components]

---
class: animated, fadeIn
background-image: url(../images/lubridate_sort_allison_horst.png)
background-size: 96%

---

<h1 style="margin-bottom: 60px;"> Date components </h1>

.bluecode[.small-font[

| Function to use  |  Date component                                           |
|:-------|:-------------------------------------------------------------|
|`year(`date`)  `  | Year          |
|`month()`   | Month: _1, 2, 3_; Use <span class="teal">label=TRUE</span> for _Jan, Feb, Mar_  |
|`day()`     | Day of the month  |
|`wday()`    | Day of the week: _1, 2, 3_; Use <span class="teal">label=TRUE</span> for _Sun, Mon, Tue_  |
| _- Time -_   |            |
|`hour() `   |  Hour of the day _(24hr)_ |
|`minute() ` |  Minutes   |
|`second() ` |  Seconds   |
|`tz()  `    |  Time zone |

]]

---
class: inverse, center, middle, black

# .big[.blue[Step 3]]
## .big[Show your style]

---

# <i class="fa-solid fa-stamp"></i> [.teal[**Stamp**]] your dates

<br>

```r
report_style <- stamp_date("Reported on December 15th, 2023")
```

```r
new_date <- ymd("2024-05-15")
```

```r
report_style(new_date)
```

## .teal["Reported on May 15th, 2024"]

---
class: inverse, center, middle, animated, fadeIn, fadeOut

<h1 class="animated pulse" style="font-size: 9rem !important;"> MONSTERS .blue[**EVERYWHERE!**] </h1>

---
class: inverse, center, animated, fadeIn

</div>

<h1 class="animated bounceInUp" style="position: absolute; bottom: -20px;"> MONSTERS .blue[**EVERYWHERE!**] </h1>

---
class: inverse, center, middle

# <i class="fas fa-carrot" aria-hidden="true"></i> [Back to Videos](https://tidy-mn.github.io/R-camp-penguins/index.html)