Merge ee4f43c83c into 08b771c863

Projects/3-Advanced/Change-SVG-Image-Color-App.md

@@ -0,0 +1,32 @@
+# Change SVG image Color App
+
+**Tier:** 3-Advanced
+Let's say you want to create an SVG editor that can change color when you click on each color zone(SVG path or SVG group). your application can change the color of an SVG image and export it back with the same quality but different colors.
+
+[Sample App](https://www.loom.com/share/a6aea98553c043078e4177e62d72f5c3)
+[Sample SVG file](https://gist.github.com/annibuliful/7becdd187375799b8a8906f0d1d957ed)
+
+## User Stories
+
+- [ ] User upload SVG file
+- [ ] User click on color zone
+- [ ] User change color on current color zone
+
+## Bonus features
+
+- [ ] User can change color with gradient color
+- [ ] User can convert SVG to PNG others format
+
+## Useful links and resources
+
+[W3school SVG](https://www.w3schools.com/graphics/svg_intro.asp)
+
+[mozilla SVG](https://developer.mozilla.org/en-US/docs/Web/SVG)
+
+[Canvas API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API)
+
+[DOM manipuldationn](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents)
+
+## Example projects
+
+[Box svg](https://boxy-svg.com/)

README.md

@@ -120,7 +120,7 @@ required to complete them.
 ### Tier-3: Advanced Projects
 
 | Name                                                                              | Short Description                                                   | Tier       |
-| ----------------------------------------------------------------------------- | ------------------------------------------------------------------- | ---------- |
+| --------------------------------------------------------------------------------- | ------------------------------------------------------------------- | ---------- |
 | [Battleship Bot](./Projects/3-Advanced/Battleship-Bot.md)                         | Create a Discord bot that plays Battleship                          | 3-Advanced |
 | [Battleship Game Engine](./Projects/3-Advanced/Battleship-Game-Engine.md)         | Create a callable engine to play the Battleship game                | 3-Advanced |
 | [Boole Bots Game](./Projects/3-Advanced/Boole-Bot-Game.md)                        | Battling Bots driven by Boolean algebra                             | 3-Advanced |
@@ -141,6 +141,7 @@ required to complete them.
 | [Slack Archiver](./Projects/3-Advanced/Slack-Archiver.md)                         | Archive Slack Messages                                              | 3-Advanced |
 | [Spell-It App](./Projects/3-Advanced/SpellIt-App.md)                              | A twist on the classic Speak N Spell game                           | 3-Advanced |
 | [Survey App](./Projects/3-Advanced/Survey-App.md)                                 | Define, conduct, and view a survey                                  | 3-Advanced |
+| [Change SVG image Color App](./Projects/3-Advanced/Change-SVG-Image-Color-App.md) | Define, conduct, and view a survey                                  | 3-Advanced |
 
 ## Plans for the future