├── shirt.png ├── shirt2.png ├── script.js ├── style.css ├── index.html └── README.md /shirt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Andrew-Tsegaye/Change-Product-Image-Color/HEAD/shirt.png -------------------------------------------------------------------------------- /shirt2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Andrew-Tsegaye/Change-Product-Image-Color/HEAD/shirt2.png -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | // Get elements from the DOM 2 | const color = document.querySelector(".color"); 3 | const colorInput = document.querySelector(".color-input"); 4 | 5 | // Add input event listener 6 | colorInput.addEventListener("input", () => { 7 | /*Set background of the color div to the color set in the input field*/ 8 | color.style.backgroundColor = colorInput.value; 9 | }); 10 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: Helvetica, sans-serif; 4 | min-height: 100vh; 5 | display: flex; 6 | justify-content: center; 7 | align-items: center; 8 | gap: 2em; 9 | } 10 | 11 | .product { 12 | position: relative; 13 | box-shadow: 0 0 2em rgba(0, 0, 0, 0.2); 14 | border-radius: 1em; 15 | overflow: hidden; 16 | } 17 | 18 | .img-1 { 19 | width: 30em; 20 | z-index: 0; 21 | } 22 | 23 | .img-2 { 24 | position: absolute; 25 | top: 0; 26 | left: 0; 27 | width: 100%; 28 | z-index: 2; 29 | } 30 | 31 | p { 32 | max-width: 30em; 33 | line-height: 27px; 34 | } 35 | 36 | .color { 37 | background: red; 38 | position: absolute; 39 | top: 0; 40 | left: 0; 41 | width: 100%; 42 | height: 100%; 43 | z-index: 1; 44 | mix-blend-mode: multiply; 45 | } 46 | 47 | .color-input { 48 | background: #fff; 49 | border: 1px #ccc solid; 50 | border-radius: 4px; 51 | padding: 0.3em; 52 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Change Product Image Color w JavaScript 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 |
19 |
20 | 21 |
22 |

Jack & Jones T-Shirt

23 |

24 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, 25 | reprehenderit quas ea quo sed odit, quis iure consequuntur a ratione 26 | eligendi eum. Facere, quis. 27 |

28 | Customize shirt color: 29 | 30 |
31 | 32 | 33 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Change Product Image Color 2 | 3 | This project is a web application that allows users to change the color of a product image by selecting a new color using a color picker. 4 | 5 | Live Demo: [color-Tshirt.com](https://change-product-image-color.netlify.app) 6 | 7 | ![app](https://i.imgur.com/U7ubGx1.png) 8 | 9 | ## Features 10 | 11 | - Users can upload an image of a product 12 | - Users can change the color of the product image using a color picker 13 | - Users can download the modified image 14 | 15 | ## Technologies Used 16 | This project was built using: 17 | 18 | - HTML 19 | - CSS 20 | - JavaScript 21 | - [P5.js](https://p5js.org) - a JavaScript library for creative coding 22 | 23 | ## Usage 24 | 25 | 1. Visit the live demo at [https://change-product-image-color.netlify.app](https://change-product-image-color.netlify.app) 26 | 2. Upload an image of a product 27 | 3. Use the color picker to change the color of the product image 28 | 4. Download the modified image 29 | 30 | ## Contributing 31 | Contributions to this project are welcome. To contribute, follow these steps: 32 | 33 | 1. Fork this repository 34 | 2. Create a new branch (`git checkout -b feature/your-feature`) 35 | 3. Make changes and commit them (`git commit -am 'Add your feature'`) 36 | 4. Push to the branch (`git push origin feature/your-feature`) 37 | 5. Create a new Pull Request 38 | 39 | ## License 40 | This project is licensed under the MIT License. See the LICENSE file for details. 41 | 42 | ## Acknowledgements 43 | This project was inspired by developer [Andrew Tsegaye](https://www.linkedin.com/in/andrewtsegaye). 44 | --------------------------------------------------------------------------------