- [functions and arrow functions](#functions-and-arrow-functions)

- [Event handlers](#event-handlers)

- [`var` and `let`](#var-and-let)

If you need to support IE, it is probably safe to replace `let` with `var`. <small>And cope with the unexpected 😈</small>

Comes in handy

- [Preflight / functions and arrow functions](#functions-and-arrow-functions)

An explanation is attached to each solution.

In this tutorial the solutions are ranked. Although all solutions will work, the first solution is the "worst" and the last solution is the "best". This has been done to provide the approach to the solution. Further lessons will base on the third solution.

- [Task – attaching the event handlers](https://codepen.io/mulithemuli/pen/JjPREzX)

- [Solution #1](https://codepen.io/mulithemuli/pen/yLBaMem)

- [Solution #2](https://codepen.io/mulithemuli/pen/pozEPGd)

- [Solution #3](https://codepen.io/mulithemuli/pen/WNeGOxX)

Print the number of times the button has been clicked to the bottom of the page in a specified container.

The area where the number of times clicked is defined. Local variable storage in the script has been reduced to a minimum.

- [Task – adding the counter](https://codepen.io/mulithemuli/pen/WNeGOaK)

- [Solution](https://codepen.io/mulithemuli/pen/bGbwROK)

Only updating the number of counts when the text actually has changed.

The change will be determined as previously but we need to check if the text has been changed.

- [Task – improving the counter](https://codepen.io/mulithemuli/pen/vYBXZMZ)

- [Solution](https://codepen.io/mulithemuli/pen/VwZKWOp)

The buttons are useful but not necessarily relevant to every user. We would like to hide (but not remove) the buttons and delegate the change of an input to the click of the button.

When JavaScript is active we would like to remove the button from the view but trigger its click action when the input has been changed.

- [Task – removing the buttons](https://codepen.io/mulithemuli/pen/VwZKWOp) (same as the solution from lesson 3)

- [Solution](https://codepen.io/mulithemuli/pen/XWrjayp)

Comes in handy

- [Preflight / functions and arrow functions](#functions-and-arrow-functions)

- event delegation

- jQuery [`.each()`](https://api.jquery.com/each/) function

- Task – reusability / marker class

- Solution

We can now select specific sections of the page to be handled as we like. But what if the DOM gets updated by an event like an AJAX call? The new DOM should get the same event handling as the other parts but the existing parts should not get the same events attached twice.

Covered in this lesson

- remember marker classes

- Task – reusability / only once

- Solution

It is a solution which can be used by more than just us? To make it more convenient for the users we would like to create a jQuery plugin which does all this covered before.

Covered in this lesson

- basic jQuery Plugin creation

- Task – making a jQuery plugin

- Solution