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 yourbody
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:
Feel free to submit an issue or open a PR!
Cheers
Top comments (1)
I remember doing this back in the Visual Basic days... good memories 😆