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 createdleti=0;// Add an event listener to the entire document to catch all click eventsdocument.addEventListener("click",({ target })=>{// Check if the clicked element is a buttonif(target.tagName==="BUTTON"){// Create a new button elementconstnewButton=document.createElement("button");// Set the button text with an incremented counternewButton.textContent=`Click (${++i})! `;// Add the new button to the document bodydocument.body.appendChild(newButton);// Get the button's dimensions after it's added to the DOMconstrect=newButton.getBoundingClientRect();// Calculate maximum positions to keep button within viewportconstmaxLeft=window.innerWidth-rect.width;constmaxTop=window.innerHeight-rect.height;// Set the button to absolute positioningnewButton.style.position="absolute";// Position the button randomly within the viewport boundsnewButton.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

---