From b66a501d15e7dd6d67da229dd53a86b9f90c3423 Mon Sep 17 00:00:00 2001 From: annibuliful Date: Sat, 1 Oct 2022 08:59:45 +0700 Subject: [PATCH 1/2] feat: update readme --- README.md | 49 +++++++++++++++++++++++++------------------------ 1 file changed, 25 insertions(+), 24 deletions(-) diff --git a/README.md b/README.md index f6557617..eb14909a 100644 --- a/README.md +++ b/README.md @@ -85,11 +85,11 @@ required to complete them. | --------------------------------------------------------------------------------- | -------------------------------------------------- | -------------- | | [Bit Masks](./Projects/2-Intermediate/Bit-Masks-App.md) | Using Bit Masks for Conditions | 2-Intermediate | | [Book Finder App](./Projects/2-Intermediate/Book-Finder-App.md) | Search for books by multiple criteria | 2-Intermediate | -| [Calculator CLI](./Projects/2-Intermediate/Calculator-CLI.md) | Create a basic calculator cli. | 2-Intermediate | +| [Calculator CLI](./Projects/2-Intermediate/Calculator-CLI.md) | Create a basic calculator cli. | 2-Intermediate | | [Card Memory Game](./Projects/2-Intermediate/Card-Memory-Game.md) | Memorize and match hidden images | 2-Intermediate | | [Charity Finder App](./Projects/2-Intermediate/Charity-Finder-App.md) | Find a Global Charity to donate to | 2-Intermediate | | [Chrome Theme Extension](./Projects/2-Intermediate/Chrome-Theme-Extension.md) | Build your own chrome theme extention. | 2-Intermediate | -| [Currency Converter](./Projects/2-Intermediate/Currency-Converter.md) | Convert one currency to another. | 2-Intermediate | +| [Currency Converter](./Projects/2-Intermediate/Currency-Converter.md) | Convert one currency to another. | 2-Intermediate | | [Drawing App](./Projects/2-Intermediate/Drawing-App.md) | Create digital artwork on the web | 2-Intermediate | | [Emoji Translator App](./Projects/2-Intermediate/Emoji-Translator-App.md) | Translate sentences into Emoji | 2-Intermediate | | [Flashcards App](./Projects/2-Intermediate/FlashCards-App.md) | Review and test your knowledge through Flash Cards | 2-Intermediate | @@ -119,28 +119,29 @@ 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 | -| [Calendar](./Projects/1-Beginner/Calendar-App.md) | Create your own Calendar | 3-Advanced | -| [Calorie Counter](./Projects/3-Advanced/Calorie-Counter-App.md) | Calorie Counter Nutrition App | 3-Advanced | -| [Chat App](./Projects/3-Advanced/Chat-App.md) | Real-time chat interface | 3-Advanced | -| [Contribution Tracker App](./Projects/3-Advanced/Contribution-Tracker-App.md) | Track funds donated to charity | 3-Advanced | -| [Elevator](./Projects/3-Advanced/Elevator-App.md) | Elevator simulator | 3-Advanced | -| [Fast Food Simulator](./Projects/3-Advanced/FastFood-App.md) | Fast Food Restaurant Simulator | 3-Advanced | -| [Instagram Clone](./Projects/3-Advanced/Instagram-Clone-App.md) | A clone of Facebook's Instagram app | 3-Advanced | -| [GitHub Timeline](./Projects/3-Advanced/GitHub-Timeline-App.md) | Generate a timeline of a users GitHub Repos | 3-Advanced | -| [Kudos Slackbot](./Projects/3-Advanced/Kudos-Slackbot.md) | Give recognition to a deserving peer | 3-Advanced | -| [Movie App](./Projects/3-Advanced/Movie-App.md) | Browse, Find Ratings, Check Actors and Find you next movie to watch | 3-Advanced | -| [MyPodcast Library](./Projects/3-Advanced/MyPodcast-Library-app.md) | Create a library of favorite podcasts | 3-Advanced | -| [NASA Exoplanet Query](./Projects/3-Advanced/NASA-Exoplanet-Query.md) | Query NASA's Exoplanet Archive | 3-Advanced | -| [Shell Game](./Projects/3-Advanced/Shell-Game.md) | Animated shell game | 3-Advanced | -| [Shuffle Deck](./Projects/3-Advanced/Shuffle-Deck-App.md) | Evaluate different algorithms for shuffling a card deck | 3-Advanced | -| [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 | +| 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 | +| [Calendar](./Projects/1-Beginner/Calendar-App.md) | Create your own Calendar | 3-Advanced | +| [Calorie Counter](./Projects/3-Advanced/Calorie-Counter-App.md) | Calorie Counter Nutrition App | 3-Advanced | +| [Chat App](./Projects/3-Advanced/Chat-App.md) | Real-time chat interface | 3-Advanced | +| [Contribution Tracker App](./Projects/3-Advanced/Contribution-Tracker-App.md) | Track funds donated to charity | 3-Advanced | +| [Elevator](./Projects/3-Advanced/Elevator-App.md) | Elevator simulator | 3-Advanced | +| [Fast Food Simulator](./Projects/3-Advanced/FastFood-App.md) | Fast Food Restaurant Simulator | 3-Advanced | +| [Instagram Clone](./Projects/3-Advanced/Instagram-Clone-App.md) | A clone of Facebook's Instagram app | 3-Advanced | +| [GitHub Timeline](./Projects/3-Advanced/GitHub-Timeline-App.md) | Generate a timeline of a users GitHub Repos | 3-Advanced | +| [Kudos Slackbot](./Projects/3-Advanced/Kudos-Slackbot.md) | Give recognition to a deserving peer | 3-Advanced | +| [Movie App](./Projects/3-Advanced/Movie-App.md) | Browse, Find Ratings, Check Actors and Find you next movie to watch | 3-Advanced | +| [MyPodcast Library](./Projects/3-Advanced/MyPodcast-Library-app.md) | Create a library of favorite podcasts | 3-Advanced | +| [NASA Exoplanet Query](./Projects/3-Advanced/NASA-Exoplanet-Query.md) | Query NASA's Exoplanet Archive | 3-Advanced | +| [Shell Game](./Projects/3-Advanced/Shell-Game.md) | Animated shell game | 3-Advanced | +| [Shuffle Deck](./Projects/3-Advanced/Shuffle-Deck-App.md) | Evaluate different algorithms for shuffling a card deck | 3-Advanced | +| [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 From ee4f43c83c9fdac5a762cf63752db869137e8052 Mon Sep 17 00:00:00 2001 From: annibuliful Date: Sat, 1 Oct 2022 09:00:36 +0700 Subject: [PATCH 2/2] feat: svg app --- .../3-Advanced/Change-SVG-Image-Color-App.md | 32 +++++++++++++++++++ 1 file changed, 32 insertions(+) create mode 100644 Projects/3-Advanced/Change-SVG-Image-Color-App.md diff --git a/Projects/3-Advanced/Change-SVG-Image-Color-App.md b/Projects/3-Advanced/Change-SVG-Image-Color-App.md new file mode 100644 index 00000000..459d6637 --- /dev/null +++ b/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/)