A fun and interactive web project that asks a simple question, but with a twist: the "No" button runs away!
This project is a creative and humorous take on a simple yes-or-no question. When presented with the question "Do you wanna go out with me?", the user has two choices. While the "Yes" button is straightforward, the "No" button is coded to actively evade the user's mouse cursor, making it a fun challenge to try and click it.
It's a simple but effective demonstration of how JavaScript can be used to create dynamic and interactive user experiences.
- Interactive UI: A playful and engaging user interface.
- Dynamic Button Movement: The "No" button randomly repositions itself on the screen whenever the mouse hovers over it.
- Responsive Design: The layout and functionality work well across different screen sizes.
- Two-Page Flow: A simple, two-step experience from the initial question to the "yes" confirmation page.
- HTML5: For the basic structure and content of the pages.
- CSS3: For styling, including the layout, button design, and transition effects.
- JavaScript: For the core logic that makes the "No" button move dynamically around the page.
The magic of this project lies in a small JavaScript function.
- An
onmouseoverevent listener is attached to the "No" button. - When the user's cursor hovers over the button, the
moveButton()function is triggered. - This function calculates a new random
xandycoordinate within the browser's window and instantly moves the button to that new position using CSSleftandtopproperties. - This creates the illusion that the button is "running away" from the cursor, making it nearly impossible to click.