Skip to content

Add:ColorChanger-MiniApp/segawa74(#1115) #1189

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Add:ColorChanger-MiniApp/segawa74(#1115) #1189

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
132 changes: 132 additions & 0 deletions ColorChanger-MiniApp/segawa74/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,132 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Color Changer Mini-App</title>
<!-- jQuery CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!-- Custom CSS -->
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="container">
<div class="control-panel">
<h1>Color Changer Mini-App</h1>

<!-- Target Element Selection -->
<div class="section">
<h2>Select Element</h2>
<div class="element-list">
<div class="element-item selected" data-element="box">
Box Background
</div>
<div class="element-item" data-element="heading">Headings</div>
<div class="element-item" data-element="text">Text</div>
<div class="element-item" data-element="button-primary">
Primary Button
</div>
<div class="element-item" data-element="button-secondary">
Secondary Button
</div>
<div class="element-item" data-element="button-accent">
Accent Button
</div>
<div class="element-item" data-element="border">Borders</div>
</div>
</div>

<!-- Color Selection -->
<div class="section">
<h2>Choose Color</h2>
<div class="color-input-group">
<input type="color" id="color-picker" value="#3498db" />
<input type="text" id="color-code" placeholder="#HEX" />
</div>

<div class="form-group">
<label>Opacity: <span id="opacity-value">100%</span></label>
<input
type="range"
id="opacity-slider"
min="0"
max="100"
value="100"
/>
</div>

<h3>Color Palette</h3>
<div class="color-palette" id="basic-palette">
<div
class="color-swatch selected"
style="background-color: #3498db"
data-color="#3498db"
></div>
<div
class="color-swatch"
style="background-color: #2ecc71"
data-color="#2ecc71"
></div>
<div
class="color-swatch"
style="background-color: #e74c3c"
data-color="#e74c3c"
></div>
<div
class="color-swatch"
style="background-color: #f1c40f"
data-color="#f1c40f"
></div>
<div
class="color-swatch"
style="background-color: #9b59b6"
data-color="#9b59b6"
></div>
<div
class="color-swatch"
style="background-color: #1abc9c"
data-color="#1abc9c"
></div>
<div
class="color-swatch"
style="background-color: #e67e22"
data-color="#e67e22"
></div>
<div
class="color-swatch"
style="background-color: #34495e"
data-color="#34495e"
></div>
</div>
</div>

<!-- Saved Colors -->
<div class="section">
<h2>Saved Colors</h2>
<div id="saved-colors">
<!-- Saved colors will be inserted here -->
</div>
<button id="save-color" class="button">Save Current Color</button>
</div>
</div>

<div class="preview-area">
<div class="preview-box" id="box-preview">
<h2 id="heading-preview">Preview Box</h2>
<p id="text-preview">
This box changes color based on your selection.
</p>
</div>

<div class="preview-buttons">
<button class="button" id="button-preview">Primary Button</button>
<button class="button secondary">Secondary Button</button>
<button class="button accent">Accent Button</button>
</div>
</div>
</div>

<!-- Custom JS -->
<script src="script.js"></script>
</body>
</html>
63 changes: 63 additions & 0 deletions ColorChanger-MiniApp/segawa74/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
# 🎨 Color Changer Mini-App

A fun and interactive application that allows users to change the color and opacity of various elements on a webpage.

![Color Changer App Screenshot](screenshot.png)

## 🛠 Technologies Used

- **HTML5** - For structure
- **CSS3** - For styling
- **JavaScript** - For functionality
- **jQuery** - For DOM manipulation and events

## ✨ Features

- **Multiple Element Selection:** Change colors of different elements (box background, headings, text, buttons, borders)
- **Individual Opacity Control:** Each element has its own opacity setting
- **Color Selection Methods:**
- Color picker
- HEX code input
- Pre-defined color palette
- **Color Saving:** Save your favorite colors for quick access later
- **Real-time Preview:** See changes in real-time as you adjust colors and opacity
- **Responsive Design:** Works well on different screen sizes

## 🚀 How to Run the Project

### Local Setup

1. Clone the repository

```
git clone https://github.com/yourusername/ColorChanger-MiniApp.git
```

2. Open the `index.html` file in your web browser

No server is required to run this project. Simply opening the HTML file in a browser will work.

## 📌 How to Use

1. **Select an Element:** Click on one of the element options in the "Select Element" section (Box Background, Headings, Text, etc.)
2. **Choose a Color:** Use the color picker, enter a HEX code, or click on one of the color swatches in the palette
3. **Adjust Opacity:** Use the opacity slider to set the transparency level for the selected element
4. **Save Colors:** Click the "Save Current Color" button to add the current color to your saved colors list
5. **Apply Saved Colors:** Click on any saved color to apply it to the currently selected element

## 📂 Project Structure

- `index.html` - The main HTML file containing the structure of the application
- `styles.css` - Contains all the styling for the application
- `script.js` - Contains the jQuery code that powers the functionality

## 🔮 Future Improvements

- Add more element types that can be customized
- Implement color scheme export functionality
- Add gradients and pattern options
- Support for RGB and HSL color formats in addition to HEX

## 📜 License

This project is contributed to the JavaScript Mini Projects repository and follows its licensing terms.
Binary file added ColorChanger-MiniApp/segawa74/screenshot.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading