# Exercises

Work through these in order.

## 1. Click counter

Create an `index.html` file with two buttons and a place to show the count.

* When the first button is clicked, show 0. The next time show 1, then 2, etc.
* Clicking the second button should use the same counter and update the same display.

## 2. Delay clicker

Create a button with the text "Log in 3 seconds" and an area where you can show a message.

* When the button is clicked, wait 3 seconds and then show the text: "This text was delayed by 3 seconds".

## 3. Page onload

Create a callback function (as a variable) that shows "DOM fully loaded and parsed".

This callback should run when the DOM is fully loaded. Search for how to run code when the DOM is ready (e.g. "DOM ready" or "page load event").

## 4. Mouse position

Create a handler that shows the x,y coordinates of the mouse (e.g. update a paragraph or a fixed div as the user moves the mouse).

## 5. Mouse position online tool

Imagine an online tool where businesses see where their users' mouse is most of the time, to check if their design works well.

Write JS that, after 30 seconds, computes the average x and y position of the user's mouse and displays it.

> \[!TIP] Before starting, make a plan for how you will implement this (e.g. with your mentor).