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

1. Click the initial "Click me!" button
2. A new button "Click 1!" appears at a random position
3. Click any button to create more buttons
4. 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:

1. Listens for clicks on any button element
2. Creates a new button with incremented text
3. Positions it randomly using Math.random() for coordinates
4. 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

---