Commit bbca848

**Steps:**

1. Declare seven constants that will be defined as references to the following HTML elements:

- HTML media element (video) with class `player`

- Child of `player` class element with class `viewer` (Example assuming first constant is named `player`: `player.querySelector('.viewer')`)

- Child of `player` element with class `progress`

- Child of `player` element with class `progress__filled` <-- TWO lower dashes

- Child of `player` element with class `toggle`

- **ALL** children of `player` element with a `data-skip` property

- **ALL** children of `player` element with class `player__slider` <-- TWO lower dashes

```JavaScript

const player = document.querySelector('.player'),

video = player.querySelector('.viewer'),

progress = player.querySelector('.progress'),

progressBar = player.querySelector('.progress__filled'),

toggle = player.querySelector('.toggle'),

skipButtons = player.querySelectorAll('[data-skip]'),

ranges = player.querySelectorAll('.player__slider')

```

2. Declare four `let` variables that will be defined as _arrow functions to be used as event handlers_:

- `togglePlay` variable defined as an _arrow function_ that will call on either the `.play()` or `.pause()`

method of the HTMLElement with class `viewer`, depending on whether the `paused` property of that element is

`true` or `false`.

```JavaScript

let togglePlay = () => (video[video.paused ? 'play' : 'pause']())

```

- `updateButton` variable defined as an _arrow function_ that will update the `textContent` property of the HTMLElement

with class `toggle` to be '►' or '❚ ❚' depending on the `boolean` value of the `viewer` HTMLElement's `paused` property.

let updateButton = () => toggle.textContent = video.paused ? '►' : '❚ ❚';

- A 'click' event listener which will call the `togglePlay` function as an _event handler_.

- A 'play' event listener which will call the `updateButton` function as an _event handler_.

- A 'pause' event listener which will call the `updateButton` function as an _event handler_.

- A 'timeupdate` event listener which will call the `handleProgress` function as an _event handler_.

```JavaScript

video.addEventListener('click', togglePlay)

video.addEventListener('play', updateButton)

video.addEventListener('pause', updateButton)

video.addEventListener('timeupdate', handleProgress)

```

4. Attach an _event listener_ to the `toggle` HTMLElement (in this example, the variable name is `toggle` as well) which will

call the `togglePlay` function as an _event handler_.

```JavaScript

toggle.addEventListener('click', togglePlay)

```

5. Declare a `let` variable `mousedown` and define it as `false`.

```JavaScript

let mousedown = false

```

6. Attach four _event listeners_ to the `progress` HTMLElement:

- A 'click' event listener which will call the `scrub` function as an _event handler_.

- A 'mousemove' event listener which will call the `scrub` function as an _event handler_ **IF** `mousedown` is `true`.

- A 'mousedown' event listener with the _event handler_ defined as an _arrow function_ that

will set `mousedown` to true.

- A 'mouseup` event listener with the _event handler_ defined as an _arrow function_ that

will set `mousedown` to false.

```JavaScript

progress.addEventListener('click', scrub)

progress.addEventListener('mousemove', (e) => mousedown && scrub(e))

progress.addEventListener('mousedown', () => mousedown = true)

progress.addEventListener('mouseup', () => mousedown = false)

```

7. Iterate through the `skipButtons` variable that contains a _NodeList, an array-like object,_ and attach a 'click'

_event listener_ to each button with the _event handler_ defined as an _arrow function_ that increments the `currentTime`

property of the `viewer` HTMLElement with the `data-skip` attribute of that button.

```JavaScript

skipButtons.forEach(button => {

button.addEventListener(

//HTML attributes are string values. We want a number, so we parse the value into a `float`

'click', () => video.currentTime += parseFloat(button.dataset.skip))

})

```

8. Iterate through the `ranges` variable that contains a _NodeList, an array-like object_, and attach two _event listeners_

to each item:

- A 'change' _event listener_ with the _event handler_ defined as an _arrow function_ that updates a property on the

`viewer` HTMLElement _corresponding with the `name` attribute of the given NodeList item_ to the `value` attribute of the

given item.

- A 'mousemove' _event listener_ that does the same thing.

```JavaScript

ranges.forEach(range => {

range.addEventListener('change', () => video[range.name] = range.value)

range.addEventListener('mousemove', () => video[range.name] = range.value)

})

```

9. Wrap all that up in a nice litte IIFE _(immediately invoked function expression)_ to avoid polluting the global namespace

(getting tired of reading that yet?)

**Another day, another challenge, another success! Congratulations! <3**