Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 2b896b3

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

File tree

5 files changed

+677
-0
lines changed

5 files changed

+677
-0
lines changed
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>
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.
88.3 KB
Loading[フレーム]

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /