diff --git a/ColorChanger-MiniApp/segawa74/index.html b/ColorChanger-MiniApp/segawa74/index.html new file mode 100644 index 000000000..b314c55aa --- /dev/null +++ b/ColorChanger-MiniApp/segawa74/index.html @@ -0,0 +1,132 @@ + + + + + + Color Changer Mini-App + + + + + + +
+
+

Color Changer Mini-App

+ + +
+

Select Element

+
+
+ Box Background +
+
Headings
+
Text
+
+ Primary Button +
+
+ Secondary Button +
+
+ Accent Button +
+
Borders
+
+
+ + +
+

Choose Color

+
+ + +
+ +
+ + +
+ +

Color Palette

+
+
+
+
+
+
+
+
+
+
+
+ + +
+

Saved Colors

+
+ +
+ +
+
+ +
+
+

Preview Box

+

+ 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. + +![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. 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 = $("
").addClass("saved-color"); + + const $colorSwatch = $("
") + .addClass("saved-color-swatch") + .css("backgroundColor", color) + .attr("title", "Click to use this color") + .on("click", function () { + selectColor(color); + }); + + const $colorCode = $("
").addClass("saved-color-code").text(color); + + const $deleteBtn = $("