Random Button Generator

A simple interactive web application that creates new buttons at random positions every time you click any button on the page.

🚀 Features

Dynamic Button Creation: Click any button to spawn a new one
Random Positioning: New buttons appear at random locations on the screen
Click Counter: Each new button shows an incremented click count
Responsive Design: Adapts to different screen sizes
Dark/Light Mode: Automatically switches based on user's system preference
Clean UI: Modern styling with hover effects

🎯 Demo

Click the initial "Click me!" button
A new button "Click 1!" appears at a random position
Click any button to create more buttons
Watch as your screen fills with randomly positioned buttons!

🛠️ Technologies Used

HTML5: Structure and content
CSS3: Styling with dark/light mode support
Vanilla JavaScript: Interactive functionality
CSS Media Queries: Responsive design and theme switching

💡 How It Works

The application uses a simple event listener that:

Listens for clicks on any button element
Creates a new button with incremented text
Positions it randomly using Math.random() for coordinates
Appends it to the document body

// Initialize a counter variable to track the number of buttons created
let i = 0;

// Add an event listener to the entire document to catch all click events
document.addEventListener("click", ({ target }) => {
    // Check if the clicked element is a button
    if (target.tagName === "BUTTON") {
        // Create a new button element
        const newButton = document.createElement("button");
        
        // Set the button text with an incremented counter
        newButton.textContent = `Click (${++i})! `;

        // Add the new button to the document body
        document.body.appendChild(newButton);
        
        // Get the button's dimensions after it's added to the DOM
        const rect = newButton.getBoundingClientRect();
        
        // Calculate maximum positions to keep button within viewport
        const maxLeft = window.innerWidth - rect.width;
        const maxTop = window.innerHeight - rect.height;
        
        // Set the button to absolute positioning
        newButton.style.position = "absolute";
        
        // Position the button randomly within the viewport bounds
        newButton.style.left = `${Math.random() * maxLeft}px`;
        newButton.style.top = `${Math.random() * maxTop}px`;
    }
});

🎨 Styling Features

Light Mode: Clean white background with dark text
Dark Mode: Dark background with light text (auto-detected)
Button Hover Effects: Color changes and crosshair cursor
Responsive Typography: Scales with screen size

🔧 Customization

You can easily customize:

Button styling: Modify the CSS in the <style> section
Random positioning: Adjust the Math.random() calculations
Button text format: Change the textContent template
Colors and themes: Update CSS custom properties

SafferStha/Random-Button-Generator

About

Topics

Resources

Uh oh!

Stars

Watchers

Forks

Languages