Skip to content

Commit 39a7b52

Browse files
authored
Update README.md
1 parent 77dd493 commit 39a7b52

1 file changed

Lines changed: 46 additions & 32 deletions

File tree

README.md

Lines changed: 46 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,55 @@
1-
# 🎨 Background Color Changer
1+
# 🎨 Random Color Generator
22

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+
---
47

58
## 🚀 Live Demo
9+
[View Live Project](https://suru190.github.io/Random-Color-Generator/)
610

7-
🔗 [Click here to view the live site](https://suru190.github.io/BG-Color-Changer/)
11+
---
812

913
## 📸 Screenshots
1014

11-
### 🖥️ Desktop View
12-
![Desktop View](./desktop-view.png)
15+
### 💻 Desktop View
16+
![App Screenshot](desktop-view.png)
1317

1418
### 📱 Mobile View
15-
![Mobile View](./mobile-view.jpg)
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+
![Mobile View](./mobile-view.png)
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

Comments
 (0)