Skip to content

Commit 2b896b3

Browse files
segawa74segawa74
committed
Add:ColorChanger-MiniApp/segawa74(thinkswell#1115)
1 parent 27ee633 commit 2b896b3

File tree

5 files changed

+677
-0
lines changed

5 files changed

+677
-0
lines changed

‎ColorChanger-MiniApp/segawa74/index.html

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Color Changer Mini-App</title>
7+
<!-- jQuery CDN -->
8+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
9+
<!-- Custom CSS -->
10+
<link rel="stylesheet" href="styles.css" />
11+
</head>
12+
<body>
13+
<div class="container">
14+
<div class="control-panel">
15+
<h1>Color Changer Mini-App</h1>
16+
17+
<!-- Target Element Selection -->
18+
<div class="section">
19+
<h2>Select Element</h2>
20+
<div class="element-list">
21+
<div class="element-item selected" data-element="box">
22+
Box Background
23+
</div>
24+
<div class="element-item" data-element="heading">Headings</div>
25+
<div class="element-item" data-element="text">Text</div>
26+
<div class="element-item" data-element="button-primary">
27+
Primary Button
28+
</div>
29+
<div class="element-item" data-element="button-secondary">
30+
Secondary Button
31+
</div>
32+
<div class="element-item" data-element="button-accent">
33+
Accent Button
34+
</div>
35+
<div class="element-item" data-element="border">Borders</div>
36+
</div>
37+
</div>
38+
39+
<!-- Color Selection -->
40+
<div class="section">
41+
<h2>Choose Color</h2>
42+
<div class="color-input-group">
43+
<input type="color" id="color-picker" value="#3498db" />
44+
<input type="text" id="color-code" placeholder="#HEX" />
45+
</div>
46+
47+
<div class="form-group">
48+
<label>Opacity: <span id="opacity-value">100%</span></label>
49+
<input
50+
type="range"
51+
id="opacity-slider"
52+
min="0"
53+
max="100"
54+
value="100"
55+
/>
56+
</div>
57+
58+
<h3>Color Palette</h3>
59+
<div class="color-palette" id="basic-palette">
60+
<div
61+
class="color-swatch selected"
62+
style="background-color: #3498db"
63+
data-color="#3498db"
64+
></div>
65+
<div
66+
class="color-swatch"
67+
style="background-color: #2ecc71"
68+
data-color="#2ecc71"
69+
></div>
70+
<div
71+
class="color-swatch"
72+
style="background-color: #e74c3c"
73+
data-color="#e74c3c"
74+
></div>
75+
<div
76+
class="color-swatch"
77+
style="background-color: #f1c40f"
78+
data-color="#f1c40f"
79+
></div>
80+
<div
81+
class="color-swatch"
82+
style="background-color: #9b59b6"
83+
data-color="#9b59b6"
84+
></div>
85+
<div
86+
class="color-swatch"
87+
style="background-color: #1abc9c"
88+
data-color="#1abc9c"
89+
></div>
90+
<div
91+
class="color-swatch"
92+
style="background-color: #e67e22"
93+
data-color="#e67e22"
94+
></div>
95+
<div
96+
class="color-swatch"
97+
style="background-color: #34495e"
98+
data-color="#34495e"
99+
></div>
100+
</div>
101+
</div>
102+
103+
<!-- Saved Colors -->
104+
<div class="section">
105+
<h2>Saved Colors</h2>
106+
<div id="saved-colors">
107+
<!-- Saved colors will be inserted here -->
108+
</div>
109+
<button id="save-color" class="button">Save Current Color</button>
110+
</div>
111+
</div>
112+
113+
<div class="preview-area">
114+
<div class="preview-box" id="box-preview">
115+
<h2 id="heading-preview">Preview Box</h2>
116+
<p id="text-preview">
117+
This box changes color based on your selection.
118+
</p>
119+
</div>
120+
121+
<div class="preview-buttons">
122+
<button class="button" id="button-preview">Primary Button</button>
123+
<button class="button secondary">Secondary Button</button>
124+
<button class="button accent">Accent Button</button>
125+
</div>
126+
</div>
127+
</div>
128+
129+
<!-- Custom JS -->
130+
<script src="script.js"></script>
131+
</body>
132+
</html>

‎ColorChanger-MiniApp/segawa74/readme.md

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
# 🎨 Color Changer Mini-App
2+
3+
A fun and interactive application that allows users to change the color and opacity of various elements on a webpage.
4+
5+
![Color Changer App Screenshot](screenshot.png)
6+
7+
## 🛠 Technologies Used
8+
9+
- **HTML5** - For structure
10+
- **CSS3** - For styling
11+
- **JavaScript** - For functionality
12+
- **jQuery** - For DOM manipulation and events
13+
14+
## ✨ Features
15+
16+
- **Multiple Element Selection:** Change colors of different elements (box background, headings, text, buttons, borders)
17+
- **Individual Opacity Control:** Each element has its own opacity setting
18+
- **Color Selection Methods:**
19+
- Color picker
20+
- HEX code input
21+
- Pre-defined color palette
22+
- **Color Saving:** Save your favorite colors for quick access later
23+
- **Real-time Preview:** See changes in real-time as you adjust colors and opacity
24+
- **Responsive Design:** Works well on different screen sizes
25+
26+
## 🚀 How to Run the Project
27+
28+
### Local Setup
29+
30+
1. Clone the repository
31+
32+
```
33+
git clone https://github.com/yourusername/ColorChanger-MiniApp.git
34+
```
35+
36+
2. Open the `index.html` file in your web browser
37+
38+
No server is required to run this project. Simply opening the HTML file in a browser will work.
39+
40+
## 📌 How to Use
41+
42+
1. **Select an Element:** Click on one of the element options in the "Select Element" section (Box Background, Headings, Text, etc.)
43+
2. **Choose a Color:** Use the color picker, enter a HEX code, or click on one of the color swatches in the palette
44+
3. **Adjust Opacity:** Use the opacity slider to set the transparency level for the selected element
45+
4. **Save Colors:** Click the "Save Current Color" button to add the current color to your saved colors list
46+
5. **Apply Saved Colors:** Click on any saved color to apply it to the currently selected element
47+
48+
## 📂 Project Structure
49+
50+
- `index.html` - The main HTML file containing the structure of the application
51+
- `styles.css` - Contains all the styling for the application
52+
- `script.js` - Contains the jQuery code that powers the functionality
53+
54+
## 🔮 Future Improvements
55+
56+
- Add more element types that can be customized
57+
- Implement color scheme export functionality
58+
- Add gradients and pattern options
59+
- Support for RGB and HSL color formats in addition to HEX
60+
61+
## 📜 License
62+
63+
This project is contributed to the JavaScript Mini Projects repository and follows its licensing terms.

‎ColorChanger-MiniApp/segawa74/screenshot.png

88.3 KB
Loading

0 commit comments

Comments
 (0)