How to annoy the hell out of your users

#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. 👻

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.

<!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.

#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!

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.

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.

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: