|
1 | | -# 🎨 Background Color Changer |
| 1 | +# 🎨 Random Color Generator |
2 | 2 |
|
3 | | -This is a simple and fun web project that changes the webpage background colour every time you click a button. It's a beginner-friendly project created to practice basic JavaScript DOM manipulation and event handling. |
| 3 | +## 📌 Description |
| 4 | +A simple and interactive web application that generates random colors, displays them in both **HEX** and **RGB** formats, lets you **copy color codes**, and has a **dark mode toggle**. The app is fully responsive and works on all screen sizes. |
| 5 | + |
| 6 | +--- |
4 | 7 |
|
5 | 8 | ## 🚀 Live Demo |
| 9 | +[View Live Project](https://suru190.github.io/Random-Color-Generator/) |
6 | 10 |
|
7 | | -🔗 [Click here to view the live site](https://suru190.github.io/BG-Color-Changer/) |
| 11 | +--- |
8 | 12 |
|
9 | 13 | ## 📸 Screenshots |
10 | 14 |
|
11 | | -### 🖥️ Desktop View |
12 | | - |
| 15 | +### 💻 Desktop View |
| 16 | + |
13 | 17 |
|
14 | 18 | ### 📱 Mobile View |
15 | | - |
16 | | - |
17 | | -## 🛠️ Features |
18 | | - |
19 | | -- Random background color change |
20 | | -- Smooth transition effect |
21 | | -- Displays the current color code |
22 | | -- Responsive design for mobile and desktop |
23 | | - |
24 | | -## 🧑💻 Technologies Used |
25 | | - |
26 | | -- HTML5 |
27 | | -- CSS3 |
28 | | -- JavaScript |
29 | | - |
30 | | -## ✅ What I Learned |
31 | | - |
32 | | -- DOM selection with `getElementById` |
33 | | -- Generating random colors using `Math.random` |
34 | | -- Adding event listeners in JavaScript |
35 | | -- Applying styles dynamically with `style` property |
36 | | -- Making a simple layout responsive with media-friendly CSS |
37 | | - |
38 | | -## 🔮 Future Improvements |
39 | | - |
40 | | -- Add a copy button to copy the color code |
41 | | -- Include multiple color modes (e.g., light, dark, pastel) |
| 19 | + |
| 20 | + |
| 21 | +--- |
| 22 | + |
| 23 | +## ✅ Features |
| 24 | +- Generate random colors with one click. |
| 25 | +- Display **HEX** and **RGB** color codes. |
| 26 | +- Copy HEX or RGB code to the clipboard. |
| 27 | +- Dark mode toggle for better user experience. |
| 28 | +- Fully responsive design. |
| 29 | + |
| 30 | +--- |
| 31 | + |
| 32 | +## 🛠️ Technologies Used |
| 33 | +- **HTML5** |
| 34 | +- **CSS3** |
| 35 | +- **JavaScript (ES6)** |
| 36 | + |
| 37 | +--- |
| 38 | + |
| 39 | +## 📚 What I Learned |
| 40 | +- How to generate random HEX and RGB values using JavaScript. |
| 41 | +- How to manipulate DOM elements dynamically. |
| 42 | +- Clipboard API usage (`navigator.clipboard.writeText()`). |
| 43 | +- How to implement dark mode using `classList.toggle()`. |
| 44 | +- Responsive design techniques using media queries. |
| 45 | + |
| 46 | +--- |
| 47 | + |
| 48 | +## 📂 Project Structure |
| 49 | +```bash |
| 50 | +| |
| 51 | +│── index.html |
| 52 | +│── style.css |
| 53 | +│── script.js |
| 54 | +│── desktop-view.png |
| 55 | +└── README.md |
0 commit comments