|
1 | | -# 🎨 BG Color Changer |
| 1 | +# 🎨 Background Color Changer |
2 | 2 |
|
3 | | -This is a beginner-friendly JavaScript project that changes the webpage's background colour when a button is clicked. It's a simple yet fun way to understand DOM manipulation and event handling in JavaScript. |
| 3 | +This is a simple and fun web project that changes the page's background colour every time you click a button. It's a beginner-friendly project created to practice basic JavaScript DOM manipulation and event handling. |
4 | 4 |
|
5 | | ---- |
| 5 | +## 🚀 Live Demo |
6 | 6 |
|
7 | | -## 🔗 Live Demo |
8 | | - |
9 | | -[👉 Click here to view live](https://suru190.github.io/bg-color-changer/) |
10 | | - |
11 | | ---- |
| 7 | +🔗 [Click here to view the live site](https://suru190.github.io/bg-color-changer/) |
12 | 8 |
|
13 | 9 | ## 📸 Screenshots |
14 | 10 |
|
15 | 11 | ### 🖥️ Desktop View |
16 | | - |
17 | | -<img src="./assets/desktop-view.png" alt="Desktop View" width="600"/> |
| 12 | + |
18 | 13 |
|
19 | 14 | ### 📱 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 |
20 | 25 |
|
21 | | -<img src="./assets/mobile-view.jpeg" alt="Mobile View" width="300"/> |
| 26 | +- HTML5 |
| 27 | +- CSS3 |
| 28 | +- JavaScript |
22 | 29 |
|
23 | | ---- |
| 30 | +## ✅ What I Learned |
24 | 31 |
|
25 | | -## 💡 Features |
| 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 |
26 | 37 |
|
27 | | -- Random background color generator |
28 | | -- Displays the current hex color code |
29 | | -- Smooth color transition |
30 | | -- Responsive design (mobile + desktop) |
| 38 | +## 🔮 Future Improvements |
31 | 39 |
|
32 | | ---- |
| 40 | +- Add a copy button to copy the color code |
| 41 | +- Include multiple color modes (e.g., light, dark, pastel) |
| 42 | +- Add animation for background transitions |
0 commit comments