+ This box changes color based on your selection.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/ColorChanger-MiniApp/segawa74/readme.md b/ColorChanger-MiniApp/segawa74/readme.md
new file mode 100644
index 000000000..3b7a26fc2
--- /dev/null
+++ b/ColorChanger-MiniApp/segawa74/readme.md
@@ -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.
+
+
+
+## 🛠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.
diff --git a/ColorChanger-MiniApp/segawa74/screenshot.png b/ColorChanger-MiniApp/segawa74/screenshot.png
new file mode 100644
index 000000000..64fc25725
Binary files /dev/null and b/ColorChanger-MiniApp/segawa74/screenshot.png differ
diff --git a/ColorChanger-MiniApp/segawa74/script.js b/ColorChanger-MiniApp/segawa74/script.js
new file mode 100644
index 000000000..4e3cf9b3e
--- /dev/null
+++ b/ColorChanger-MiniApp/segawa74/script.js
@@ -0,0 +1,250 @@
+$(document).ready(function () {
+ // State
+ const state = {
+ selectedElement: "box",
+ selectedColor: "#3498db",
+ // Store colors and opacity for each element type
+ elements: {
+ box: { color: "#3498db", opacity: 100 },
+ heading: { color: "#FFFFFF", opacity: 100 },
+ text: { color: "#FFFFFF", opacity: 100 },
+ "button-primary": { color: "#3498db", opacity: 100 },
+ "button-secondary": { color: "#2ecc71", opacity: 100 },
+ "button-accent": { color: "#e74c3c", opacity: 100 },
+ border: { color: "", opacity: 100 },
+ },
+ savedColors: [],
+ };
+
+ // Cache DOM elements
+ const $colorPicker = $("#color-picker");
+ const $colorCode = $("#color-code");
+ const $opacitySlider = $("#opacity-slider");
+ const $opacityValue = $("#opacity-value");
+ const $elementItems = $(".element-item");
+ const $colorSwatches = $(".color-swatch");
+ const $saveColorBtn = $("#save-color");
+ const $savedColorsContainer = $("#saved-colors");
+
+ // Preview elements
+ const $boxPreview = $("#box-preview");
+ const $headingPreview = $("#heading-preview");
+ const $textPreview = $("#text-preview");
+ const $buttonPrimaryPreview = $("#button-primary-preview");
+ const $buttonSecondaryPreview = $("#button-secondary-preview");
+ const $buttonAccentPreview = $("#button-accent-preview");
+
+ // Helper functions
+ function hexToRgba(hex, opacity) {
+ let r = parseInt(hex.slice(1, 3), 16);
+ let g = parseInt(hex.slice(3, 5), 16);
+ let b = parseInt(hex.slice(5, 7), 16);
+ return `rgba(${r}, ${g}, ${b}, ${opacity / 100})`;
+ }
+
+ function getColorWithOpacity(color, opacity) {
+ return opacity === 100 ? color : hexToRgba(color, opacity);
+ }
+
+ function updatePreview() {
+ // Apply all saved element colors with their respective opacities
+ Object.keys(state.elements).forEach((key) => {
+ const element = state.elements[key];
+ if (!element.color) return;
+
+ const colorWithOpacity = getColorWithOpacity(
+ element.color,
+ element.opacity
+ );
+
+ switch (key) {
+ case "box":
+ $boxPreview.css("backgroundColor", colorWithOpacity);
+ break;
+ case "heading":
+ $headingPreview.css("color", colorWithOpacity);
+ break;
+ case "text":
+ $textPreview.css("color", colorWithOpacity);
+ break;
+ case "button-primary":
+ $buttonPrimaryPreview.css("backgroundColor", colorWithOpacity);
+ break;
+ case "button-secondary":
+ $buttonSecondaryPreview.css("backgroundColor", colorWithOpacity);
+ break;
+ case "button-accent":
+ $buttonAccentPreview.css("backgroundColor", colorWithOpacity);
+ break;
+ case "border":
+ if (element.color) {
+ $boxPreview.css("border", `3px solid ${colorWithOpacity}`);
+ } else {
+ $boxPreview.css("border", "");
+ }
+ break;
+ }
+ });
+ }
+
+ function renderSavedColors() {
+ $savedColorsContainer.empty();
+
+ state.savedColors.forEach(function (color, index) {
+ const $savedColor = $("