How to annoy the hell out of your users
Tags: javascript, jokes, tutorial
Published: 2020-04-27 17:53:43

---
title: How to annoy the hell out of your users
published: true
description: 
tags: javascript, jokes, tutorial
---

### Intro

We always strive to keep our users happy all the time, because in the end that's what matters the most right? Happy users equals more revenue equals food on the table.
But sometimes you just want to be the bad guy and play a little with your users and annoy them. 🤷‍♂️

Well then, this is the article for you. Without further ado, let's get started.

### The idea
Who loves it when you see a bright button on your page that says 
`Click me!!!` and you simply cannot click it because it scurries away?! Well that's what are we going to implement. 👻
![Time waster gif](https://dev-to-uploads.s3.amazonaws.com/i/ixicgvedm3o5h587bs9j.gif)


### The solution
For the purpose of this example we'll just use a simple empty template, although we'll also mention how can you use it in an existing app.

For starters we'll need to have a basic HTML file which loads our script and styles.

```HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Time waster</title>
    <link rel="stylesheet" type="text/css" href="timeWaster.css"/>
</head>
<body>
    <div id="timeWaster"></div>
    <script src="timeWaster.js" type="text/javascript"></script>
</body>
</html>
```
You can see also see that we have created one `div` that has an `id` of `timeWaster`.
* If you have an already existing application, put the `timeWaster` div preferably as the top element of your `body`

After that we can just sprinkle some styling on our `timeWaster` element with a `cyan` background and `Comic Sans MS` for better readability.
```CSS
#timeWaster {
    border: 1px solid #000;
    width: 75px;
    font-family: "Comic Sans MS", sans-serif;
    background-color: #00ffff;
    position: absolute;
}
```
And now we'll just need to implement the logic of the unclickable button!

```JavaScript
const timeWaster = document.getElementById('timeWaster');
timeWaster.innerHTML = 'Click me!!!';
const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
const height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
const t0 = performance.now();
```
As a setup we'll need to take the element reference by its `id` and add some text to it. We'll also take over the current height and width of the page so when we hover over the button it doesn't go way out of the page somewhere. Last but not least we'll start measuring time for an interesting reason I'll mention later on.

```JavaScript
const getRandom = (number) => Math.random() * number;

timeWaster.addEventListener('mouseenter', () => {
  const newTop = getRandom(height);
  const newLeft = getRandom(width);
  timeWaster.style.marginTop = newTop + 'px';
  timeWaster.style.marginLeft = newLeft + 'px';
});
```
As a next point we'll register a `mouseenter` event listener which will calculate a random width and height and reposition the `timeWaster` button somewhere else on the page.

And as an interesting twist, we'll add a click handler if some user is persistent and manages to somehow click the button.
```JavaScript
timeWaster.addEventListener('click', () => {
  const t1 = performance.now();
  const minutesSpent = +((t1 - t0) / 60000).toFixed(1);
  window.alert(`You just spent ${minutesSpent} minutes of your life trying to click a stupid button that does nothing.`);
});
```
We see that now where the first time measurement we mentioned previously is used.
We are going to alert a message with how many minutes are spent on clicking the button 😂.

### Conclusion
And that's all folks! That's all that we need to make some users angry. As a friendly advice - please don't do this to your website if some of your users know you or know where you live.

The full source code can be found at:
{% github https://github.com/kirkovg/time-waster no-readme %}
Feel free to submit an issue or open a PR!
Cheers