diff --git a/Projects/Meme-Generator-App.md b/Projects/Meme-Generator-App.md new file mode 100644 index 00000000..d9524391 --- /dev/null +++ b/Projects/Meme-Generator-App.md @@ -0,0 +1,30 @@ +# Meme Generator App + +**Tier:** 2-Intermediate + +Allow users to generate custom memes by adding text over an image. + +## User Stories + +- [ ] User can upload an image that will appear in a canvas +- [ ] User can add text in the top part of the image +- [ ] User can add text in the bottom part of the image +- [ ] User can select the color of the text +- [ ] User can select the size of the text +- [ ] User can save the resulting meme + +## Bonus features + +- [ ] User can select the font-family for the text +- [ ] User can share the meme on social media (twitter, reddit, facebook, etc) +- [ ] User can drag the text around and place it wherever he wants on top of the image +- [ ] User can draw shapes on top of the image (circles, rectangles, or free drawing with the mouse) + +## Useful links and resources + +Working with canvas is made very easy by the [p5js](http://p5js.org/) library. + +## Example projects + +- [Meme Generator by imgflip](https://imgflip.com/memegenerator) +- [Meme Generator by Niels Vadot](https://codepen.io/ninivert/pen/BpLKRx) diff --git a/Projects/Shell-Game.md b/Projects/Shell-Game.md new file mode 100644 index 00000000..0ceadb23 --- /dev/null +++ b/Projects/Shell-Game.md @@ -0,0 +1,53 @@ +# Shell Game + +**Tier:** 3-Advanced + +A Shell game is a classic gambling game that dates back to ancient Greece. +Playing it requires three shells, a pea, hand dexterity by the operator, and +keen observation skills on the part of the player. It's also a classic con +game since its easy for the operator to swindle the player. Thank goodness +the latter isn't our intent with this app. + +This Shell game is intended to provide a graphical interface to the classical +shell game and to provide the player with an honest game to play. Our game +draws three shells on the canvas along with the pea, moves the pea under one, +of the shells, and shuffles the shells for a specific interval of time. The +user must then click on the shell she thinks the pea is hidden under. The user +is allowed to continue guessing until the pea is located. + +## User Stories + +- [ ] User can see the canvas with three shells and the pea. +- [ ] User can click the shell the pea is to be hidden under. +- [ ] User can see the pea move under the shell thats been clicked. +- [ ] User can click on a 'Shuffle' button to start an animated shuffling of +the shells for 5 seconds. +- [ ] User can click on the shell she believes the pea is hidden under when +the animation stops. +- [ ] User can see the shell that has been clicked rise to reveal if the pea +is hidden under it. +- [ ] User can continue clicking shells until the pea is found. +- [ ] User can see a congratulations message when the pea is located +- [ ] User can start a new game by clicking a shell the pea is to be hidden +under (step #2 above). The steps above are then repeated. + +## Bonus features + +- [ ] User can see a score panel containing the number of wins and the +number of games played. +- [ ] User can see the number of games played increase when the pea is hidden +under a shell +- [ ] User can see the number of wins incremented when the pea is found on +the first guess. +- [ ] User can see the shell hiding the pea to animate (color, size, or +some other effect) when it is clicked (a correct guess). + +## Useful links and resources + +- [Shell Game (Wikipedia)](https://en.wikipedia.org/wiki/Shell_game) +- [Javascript HTML DOM Animation](https://www.w3schools.com/js/js_htmldom_animate.asp) +- [p5js Animation Library](https://p5js.org/) + +## Example projects + +[Shell Game](https://codepen.io/RedCactus/pen/dwEjXy) diff --git a/README.md b/README.md index 4435f4ed..837b73bd 100644 --- a/README.md +++ b/README.md @@ -33,6 +33,8 @@ required to complete them. | 2 | Developers at an intermediate stage of learning and experience. They are comfortable in UI/UX, using development tools, and building apps that use API services. | | 3 | Developers who have all of the above, and are learning more advanced techniques like implementing backend applications and database services. | +🌟 - New Project + ### Tier-1: Beginner Projects | Name | Short Description | Tier | @@ -60,12 +62,13 @@ required to complete them. | ------------------------------------------------------------------ | -------------------------------------------------- | -------------- | | [Book Finder App](./Projects/Book-Finder-App.md) | Search for books by multiple criteria | 2-Intermediate | | [Card Memory Game](./Projects/Card-Memory-Game.md) | Memorize and match hidden images | 2-Intermediate | -| [Drawing App](./Projects/Drawing-App.md) | Create digital artwork on the web | 2-Intermediate | -| [Emoji Translator App](./Projects/Emoji-Translator-App.md) | Translate sentences into Emoji | 2-Intermediate | +| [🌟Drawing App](./Projects/Drawing-App.md) | Create digital artwork on the web | 2-Intermediate | +| [🌟Emoji Translator App](./Projects/Emoji-Translator-App.md) | Translate sentences into Emoji | 2-Intermediate | | [Flashcards App](./Projects/FlashCards-App.md) | Review and test your knowledge through Flash Cards | 2-Intermediate | | [HighStriker Game](./Projects/HighStriker-Game.md) | Highstriker strongman carnival game | 2-Intermediate | | [Markdown Previewer](./Projects/Markdown-Previewer.md) | Preview text formatted in GitHub flavored markdown | 2-Intermediate | | [Markdown Table Generator](./Projects/Markdown-Table-Generator.md) | Convert a table into Markdown-formatted text | 2-Intermediate | +| [🌟Meme Generator App](./Projects/Meme-Generator-App.md) | Create custom memes | 2-Intermediate | | [Regular Expression Helper](./Projects/RegExp-Helper-App.md) | Test Regular Expressions | 2-Intermediate | | [Sports Bracket Generator](./Projects/Sports-Bracket-Generator.md) | Generate a sports bracket diagram | 2-Intermediate | | [String Art](./Projects/String-Art.md) | An animation of moving, colored strings | 2-Intermediate | @@ -79,10 +82,11 @@ required to complete them. | [Battleship Bot](./Projects/Battleship-Bot.md) | Create a Discord bot that plays Battleship | 3-Advanced | | [Battleship Game Engine](./Projects/Battleship-Game-Engine.md) | Create a callable engine to play the Battleship game | 3-Advanced | | [Chat App](./Projects/Chat-App.md) | Real-time chat interface | 3-Advanced | -| [Elevator](./Projects/Elevator-App.md) | Elevator simulator | 3-Advanced | -| [Fast Food Simulator](./Projects/FastFood-App.md) | Fast Food Restaurant Simulator | 3-Advanced | +| [🌟Elevator](./Projects/Elevator-App.md) | Elevator simulator | 3-Advanced | +| [🌟Fast Food Simulator](./Projects/FastFood-App.md) | Fast Food Restaurant Simulator | 3-Advanced | | [GitHub Timeline](./Projects/GitHub-Timeline-App.md) | Generate a timeline of a users GitHub Repos | 3-Advanced | | [Kudos Slackbot](./Projects/Kudos-Slackbot.md) | Give recognition to a deserving peer | 3-Advanced | +| [🌟Shell Game](./Projects/Shell-Game.md) | Animated shell game | 3-Advanced | | [Slack Archiver](./Projects/Slack-Archiver.md) | Archive Slack Messages | 3-Advanced | | [Spell-It App](./Projects/SpellIt-App.md) | A twist on the classic Speak N Spell game | 3-Advanced | | [Survey App](./Projects/Survey-App.md) | Define, conduct, and view a survey | 3-Advanced |