🎨 Random Color Element Generator

An interactive web application built with HTML, SCSS/CSS, and Vanilla JavaScript that generates colorful circular elements at random positions on the screen whenever you click the button.

---

✨ Features

• Dynamic Color Generation: Generates random RGB colors on every click.
• Random Screen Placement: Spawns circular colored nodes dynamically at random percentages across the viewport.
• Interactive Button: Button background color dynamically syncs with the newly generated color, accompanied by a subtle click animation.
• Lightweight & Fast: Pure Vanilla JavaScript with zero external runtime dependencies.

---

🛠️ Tech Stack

• HTML5: Markup structure.
• SCSS / CSS3: Styling, layout centering, and button transition effects.
• JavaScript (ES6+): DOM manipulation and random RGB & coordinate math logic.

---

📂 Project Structure

randomcolor/
├── index.html       # Main HTML markup
├── style.scss       # SCSS source stylesheet
├── style.css        # Compiled CSS stylesheet
├── style.css.map    # Source map for debugging
├── script.js        # JavaScript logic for DOM creation & random colors
└── README.md        # Project documentation

---

🚀 Getting Started

1. Clone or navigate to the repository:

   cd frontend/javascript/randomcolor

2. Open in browser:

   • Double-click index.html or open it with Live Server in VS Code / Antigravity IDE.

---

🕹️ How It Works

1. Click on the Select Element button in the center of the screen.
2. The JavaScript script generates:
   • Random values for Red, Green, and Blue channels (0-255).
   • Random coordinates for $X$ and $Y$ viewport positions (0-100%).
3. A new 50px circular element is appended to the <main> container and positioned at the generated coordinates.
4. The button's background updates to reflect the new color.