Today, I wanted to play a little trick, a simple “fool yes or no” game. I’ve seen these online before, and I thought, “Hey, I can probably whip that up myself!”
The Idea
The basic concept is simple: a pop-up window with a question like “Are you a fool?”. There are two buttons, “Yes” and “No”. The catch? The “No” button runs away when you try to click it.
Getting Started
First, I fired up my trusty text editor. I figured I’d use basic HTML, CSS, and JavaScript for this – nothing too fancy.
I started with the HTML structure:
- A div to hold the whole thing.
- A heading (h2) for the question.
- Two buttons: one for “Yes” and one for “No”.
- I gave the “No” button a special ID so I could easily target it with JavaScript.
Making it Move
Next up, the CSS. I didn’t need much, just some basic styling to make it look presentable. I set the position of the main div to be relative, so I could move the “No” button around within it. The “No” button itself was set to absolute positioning.
Now for the fun part – the JavaScript! This is where the magic happens:
- I added an event listener to the “No” button. Specifically, I listened for the “mouseover” event – that’s when the mouse pointer hovers over the button.
- When the “mouseover” event fires, I triggered a function.
- Inside this function, I generated random numbers for the new “top” and “left” positions of the “No” button.
- Used ‘*()’ times up the windows width or height to create new position.
- Then, I updated the button’s style with these new positions. That’s what makes it “run away”!
- It tooks me a little bit to figure out the number setting, but after a few tests, done!
The “Yes” Button
I didn’t want to leave the “Yes” button out. I added another event listener to it, this time for the “click” event. When clicked, it displays a simple alert message – something like “I knew it!”.
Testing and Tweaking
I spent some time testing and tweaking the code. The main thing was making sure the “No” button didn’t run off the screen. I had to adjust the random number generation to keep it within the bounds of the window.
And also change a little bit style to looks better.
The Result
It’s a pretty silly little thing, but it works! The “No” button scampers away, and the “Yes” button delivers its cheeky message. It was a fun little exercise in basic web development, and it reminded me how much you can do with just a few lines of code.
