diff --git a/Projects/Bug-Race-Game.md b/Projects/Bug-Race-Game.md new file mode 100644 index 00000000..323549b7 --- /dev/null +++ b/Projects/Bug-Race-Game.md @@ -0,0 +1,79 @@ +# Bug Race + +**Tier:** 3-Advanced + +In this project you will test your animation skills by creating a game that +lets the user race bugs while trying to guess the winner. As part of this +you'll need to provide the user with various controls that allow the game to +be customized including bug icons, assigning names to the bugs, making a choice +of who the winner might be, and bug speed. + +### Constraints +- The developer will need to select the bug icons to be used in the game +- The developer should randomly adjust the speed of each bug before a race +starts so they travel at different rates within the speed selected by the +user (slow, normal, or fast). +- It is up to the developer to define the speed ranges associated with the slow, +normal, and fast speed setting. +- You may use an animation library, but you'll get more out of this project +if you try to implement it using native language features. + +## User Stories + +- [ ] User can see: + - An input panel containing controls to configure the game's UI and + operation. + - A race track consisting of four horizontal lanes the bugs will travel in + - A radio button associated with each lane to allow the user to select a + potential winner + - A 'Start' button. + +### Game Controls +- [ ] User can see the following controls in the input panel. + - A list of race lane numbers with radio buttons for each showing + thumbnails for three unique bugs, and a text box the user can use to + give the bug a name. + - An Speed selection control with three radio buttons - Slow, Normal, Fast +- [ ] User can click a radio button to select the bug icon to be assigned +to a lane. +- [ ] User can see an warning message if the same icon is selected for more +than one lane. +- [ ] User can enter a name for the bug in each lane. +- [ ] User can see an error message if the same name is repeated for more than +one bug. +- [ ] User can select the bug speed by clicking one of the Speed radio buttons + +### Racing + +- [ ] User can select a potential winner by clicking on the radio button on +any lane. +- [ ] User can start a race by clicking on the 'Start' button +- [ ] User can see the 'Start' button is disabled until the race is over +- [ ] User can see an error message if no winner was selected. +- [ ] User can see bugs race across their assigned lane to the finish line +- [ ] User can see all bugs stop moving when the first one reaches the finish +line +- [ ] User can see game metrics updated to show the number of races run in +this session. + +## Bonus features + +- [ ] User can see race metrics for each bug showing the number of races +run, number of wins, and number of losses. +- [ ] User can see the winning bug bounce when it wins a race +- [ ] User can see loosing bugs flip on their backs when they loose a race +- [ ] User can hear unique sounds played when the race starts and ends. + +## Useful links and resources + +- [3D Bug Images](https://www.google.com/search?q=3d+bug+drawings&tbm=isch&source=hp&sa=X&ved=2ahUKEwjxkNT7--jhAhUI-6wKHW3_CgQQsAR6BAgHEAE&biw=1279&bih=550) +- [Basic Animations (MDN)](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations +) +- [How to build a simple Sprite animation in Javascript](https://medium.com/dailyjs/how-to-build-a-simple-sprite-animation-in-javascript-b764644244aa) +- [Javascript Animations](https://javascript.info/animation) + +## Example projects + +- [Arcade Game](https://jdmedlock.github.io/arcadegame/) +- [Drag Race Animation](https://codepen.io/Delime/pen/IyuAr) +- [Horse Race](https://codepen.io/nathanielzanzouri/pen/jVgEZY) \ No newline at end of file diff --git a/Projects/GitTweet-App.md b/Projects/GitTweet-App.md new file mode 100644 index 00000000..f41ab5c7 --- /dev/null +++ b/Projects/GitTweet-App.md @@ -0,0 +1,72 @@ +# GitTweet + +**Tier:** 3-Advanced + +In the [GitHub Timeline](./GitHub-Timeline-App.md) app you used GitHub's API to +create a timeline of your repos. What could be more powerful that using an API +such as this? Why using two API's, of course. + +The goal of GitTweet is to create a GitHub app to tweet when a pull requst +is created for one of your repos. + +## User Stories + +- [ ] User can see an input area tabular display prepopulated with rows for +each of the GitHub repos she owns and a selection checkbox next to each repo +name, a single input date field, and a 'Scan' button. +- [ ] User can click the checkboxes in the repo list to select or deselect +repos for processing. +- [ ] User can enter a date into the date field. This defines the point after +which any new PR requests will be tweeted. +- [ ] User can click the 'Scan' button to identify repos that have had a new +PR created that has not been previously tweeted. In other words. Consecutively +entering the same date to scan from should only generate tweets for PR's that +have not yet been tweeted. +- [ ] User can see an error message if no date was entered, if it is not a +valid date, or if it is a future date. +- [ ] User can see repos highlighted if a tweet will be generated for them +and the 'Scan' button will change to 'Tweet'. +- [ ] User may deselect a repo by clicking on its checkbox. Doing this will +change the button back to 'Scan' and clicking it will repeat the search for +repos that have had new PR's (not yet tweeted) created since the scan date +entered by the user. +- [ ] User may enter an new scan date at this point which also changes the +button back to 'Scan'. +- [ ] User may click the 'Tweet' button to send a tweet bearing the following +message - `Pull Requst # created for repo - `. +- [ ] User can see this tweet send from her Twitter account. + +## Bonus features + +- [ ] User does not need to manually enter a scan date. If omitted the scan +will resume from the last scan date which must persist across sessions. +- [ ] User may enter a custom tweet message +- [ ] User repo selections will persist across sessions so they do not have +to be reselected each time. + +## Useful links and resources + +- [Twitter Developer Docs](https://developer.twitter.com/en.html) +- [GitHub Apps](https://developer.github.com/apps//) +- GitHub offers two API's you may use to access repo data. You may also choose + to use an NPM package to access the GitHub API. Documentation for the GitHub + API can be found at: + + - [GitHub REST API V3](https://developer.github.com/v3/) + - [GitHub GraphQL API V4](https://developer.github.com/v4/) + + Sample code showing how to use the GitHub API's are: + + - [GitHub REST API client for JavaScript ](https://github.com/octokit/rest.js/) + - [GitHub GraphQL API client for browsers and Node](https://github.com/octokit/graphql.js) + + You can use this CURL command to see the JSON returned by the V3 REST API for + your repos: + + ``` + curl -u "user-id" https://api.github.com/users/user-id/repos + ``` + +## Example projects + +[Zapier GitHub Integration](https://zapier.com/apps/github/integrations/twitter) diff --git a/Projects/Pearson-Regression-App.md b/Projects/Pearson-Regression-App.md new file mode 100644 index 00000000..b1467f08 --- /dev/null +++ b/Projects/Pearson-Regression-App.md @@ -0,0 +1,63 @@ +# Pearson Regression + +**Tier:** 1-Beginner + +There are few, if any, applications that don't require some form of +cross-disciplinary knowledge in order to implement useful functionality for +a user. In the case of an app for the medical profession it might be domain +expertise in biology or pharmacology. A paint manufacturer or a crop science +business might rely on apps with an intimate knowledge of chemistry. And, a +payroll application will certainly incorporate HR and accounting concepts. + +Regardless of the industry segement an app is developed for one cross domain +expertise in common with them all is mathematics. As an application developer +you don't have to be a mathemetician, but it's useful to have an understanding +of how to apply mathematical concepts to the problems you are trying to solve. + +The objective of this app is to apply the Pearson Correlation Coefficient +against two sets of data to provide the user with the degree to which they +may or may not be related. For example, given a set of temperatures and another +set of car prices this would let the user test whether or not they are related +(spoiler alert: they are unrelated!). + +### Constraints + +- The Developer must program all calculations without relying on a package. + +## User Stories + +- [ ] User can see an input panel with two input fields allowing entry of `x` +and `y` coordinates, and 'Add' and 'Calculate' buttons. +- [ ] User can enter numbers into these boxes where `x` and `y` are observations +from the two data sets. +- [ ] User can click the 'Add' button to add the `x` and `y` to a tabular +output area listing the pairs of observations. +- [ ] User can see and error message if either of the two input fields are +empty or do not contain valid real numbers. +- [ ] User can see the 'Calculate' button is disabled until errors have been +corrected. +- [ ] User can click the 'Calculate' button to perform the regression analysis +and to display its results. +- [ ] User can see results of the calculation which include: + - Arithmetic means for both the `x` and `y` observations + - Standard deviations for both the `x` and `y` observations + - Pearson correlation coefficient with one of the following interpretations: + - No correlation + - Neutral + - Some correlation + +## Bonus features + +- [ ] User can see a scatter plot of the observations +- [ ] User can upload observations from a file on the local machine. +- [ ] User can see a regression line overlaying the scatter plot + +## Useful links and resources + +- [Pearson Correlation Coefficient (Wikipedia)](https://en.wikipedia.org/wiki/Pearson_correlation_coefficient) +- [Linear Regression](https://en.wikipedia.org/wiki/Linear_regression) +- [Pearson's Correlation Coefficient](http://www.code-in-javascript.com/pearsons-correlation-coefficient-in-javascript/) + +## Example projects + +[Correlation](https://memory.psych.mun.ca/tech/js/correlation.shtml) diff --git a/README.md b/README.md index e63c9342..e293914b 100644 --- a/README.md +++ b/README.md @@ -43,45 +43,51 @@ required to complete them. | ---------------------------------------------------------------------- | --------------------------------------------------------- | ---------- | | [Bin2Dec](./Projects/Bin2Dec-App.md) | Binary-to-Decimal number converter | 1-Beginner | | [Border Radius Previewer](./Projects/Border-Radius-Previewer.md) | Preview how CSS3 border-radius values affect an element | 1-Beginner | -| [🌟Calculator](./Projects/Calculator-App.md) | Calculator | 1-Beginner | +| [Calculator](./Projects/Calculator-App.md) | Calculator | 1-Beginner | | [Christmas Lights](./Projects/Christmas-Lights-App.md) | Simulate a string of Christmas lights | 1-Beginner | | [Cause Effect App](./Projects/Cause-Effect-App.md) | Click list item to display item details | 1-Beginner | | [Color Cycle](./Projects/Color-Cycle-App.md) | Cycle a color value through incremental changes | 1-Beginner | -| [🌟Countdown Timer](./Projects/Countdown-Timer-App.md) | Event Countdown timer | 1-Beginner | +| [🌟Countdown Timer](./Projects/Countdown-Timer-App.md) | Event Countdown timer | 1-Beginner | | [CSV2JSON App](./Projects/CSV2JSON-App.md) | CSV to JSON converter | 1-Beginner | -| [🌟Dynamic CSS Variables](./Projects/Dynamic-CSSVar-app.md) | Dynamically change CSS variable settings | 1-Beginner | +| [🌟Dynamic CSS Variables](./Projects/Dynamic-CSSVar-app.md) | Dynamically change CSS variable settings | 1-Beginner | | [Flip Image](./Projects/Flip-Image-App.md) | Change the orientation of images across two axes | 1-Beginner | -| [🌟GitHub Status](./Projects/GitHub-Status-App.md) | Display Current GitHub Status | 1-Beginner | +| [🌟GitHub Status](./Projects/GitHub-Status-App.md) | Display Current GitHub Status | 1-Beginner | | [JSON2CSV App](./Projects/JSON2CSV-App.md) | JSON to CSV converter | 1-Beginner | -| [🌟Key Value](./Projects/Key-Value-App.md) | Keyboard Event Values | 1-Beginner | -| [Lorem Ipsum Generator](./Projects/Lorem-Ipsum-Generator.md) | Generate lorem ipsum placeholder text | 1-Beginner | -| [Notes App](./Projects/Notes-App.md) | Create an online note pad | 1-Beginner | +| [🌟Key Value](./Projects/Key-Value-App.md) | Keyboard Event Values | 1-Beginner | +| [Lorem Ipsum Generator](./Projects/Lorem-Ipsum-Generator.md) | Generate lorem ipsum placeholder text | 1-Beginner | +| [Notes App](./Projects/Notes-App.md) | Create an online note pad | 1-Beginner | +| [🌟Pearson Regression](./Projects/Pearson-Regression-App.md) | Calculate the correlation coefficent for two sets of data | 1-Beginner | | [Pomodoro Clock](./Projects/Pomodoro-Clock.md) | Task timer to aid personal productivity | 1-Beginner | | [:star2: Product Landing Page](./Projects/Product-Landing-Page.md) | Showcase product details for possible buyers | 1-Beginner | | [Quiz App](./Projects/Quiz-App.md) | Test your knowledge by answering questions | 1-Beginner | -| [🌟Recipe App](./Projects/Recipe-App.md) | Recipe | 1-Beginner | -| [Roman to Decimal Converter](./Projects/Roman-to-Decimal-Converter.md) | Convert Roman to Decimal numbers | 1-Beginner | +| [Recipe App](./Projects/Recipe-App.md) | Recipe | 1-Beginner | +| [Roman to Decimal Converter](./Projects/Roman-to-Decimal-Converter.md) | Convert Roman to Decimal numbers | 1-Beginner | | [Slider Design](./Projects/Slider-Design.md) | Display images using a slider control | 1-Beginner | | [:star2: Stopwatch App](./Projects/Stopwatch-App.md) | Count time spent on activities | 1-Beginner | | [TrueOrFalse](./Projects/True-or-False-App.md) | Identify the result of a conditional comparison | 1-Beginner | | [Wind Chill](./Projects/Windchill-App.md) | Calculate the windchill factor from an actual temperature | 1-Beginner | -| [🌟Word Frequency](./Projects/Word-Frequency-App.md) | Calculate word frequency in a block of text | 1-Beginner | +| [🌟Word Frequency](./Projects/Word-Frequency-App.md) | Calculate word frequency in a block of text | 1-Beginner | ### Tier-2: Intermediate Projects | Name | Short Description | Tier | | ------------------------------------------------------------------ | -------------------------------------------------- | -------------- | -| [🌟Bit Masks](./Projects/Bit-Masks-App.md) | Using Bit Masks for Conditions | 2-Intermediate | +| [🌟Bit Masks](./Projects/Bit-Masks-App.md) | Using Bit Masks for Conditions | 2-Intermediate | | [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 | +<<<<<<< HEAD | [🌟Charity Finder App](./Projects/Charity-Finder-App.md) | Find a Global Charity to donate to | 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 | +>>>>>>> fa2c511d7d9966d9b1874baba9812316f2935a7e | [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 | +| [Meme Generator App](./Projects/Meme-Generator-App.md) | Create custom memes | 2-Intermediate | | [🌟Podcast Directory](./Projects/Podcast-Directory-App.md) | Directory of favorite podcasts | 2-Intermediate | | [Regular Expression Helper](./Projects/RegExp-Helper-App.md) | Test Regular Expressions | 2-Intermediate | | [🌟Simple Online Store](./Projects/Simple-Online-Store.md) | Simple Online Store | 2-Intermediate | @@ -89,27 +95,29 @@ required to complete them. | [String Art](./Projects/String-Art.md) | An animation of moving, colored strings | 2-Intermediate | | [Timezone Slackbot](./Projects/Timezone-Slackbot.md) | Display Team Timezones | 2-Intermediate | | [To-Do App](./Projects/To-Do-App.md) | Manage personal to-do tasks | 2-Intermediate | -| [🌟Typing Practice](./Projects/Typing-Practice-App.md) | Typing Practice | 2-Intermediate | +| [Typing Practice](./Projects/Typing-Practice-App.md) | Typing Practice | 2-Intermediate | ### Tier-3: Advanced Projects -| Name | Short Description | Tier | -| -------------------------------------------------------------- | ---------------------------------------------------- | ---------- | -| [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 | -| [🌟Calorie Counter](./Projects/Calorie-Counter-App.md) | Calorie Counter Nutrion App | 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 | -| [🌟Instagram Clone](./Projects/Instagram-Clone-App.md) | A clone of Facebook's Instagram app | 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 | -| [🌟MyPodcast Library](./Projects/MyPodcast-Library-app.md) | Create a library of favorite podcasts | 3-Advanced | -| [🌟Shell Game](./Projects/Shell-Game.md) | Animated shell game | 3-Advanced | -| [🌟Shuffle Deck](./Projects/Shuffle-Deck-App.md) | Evaluate different algorithms for shuffling a card deck |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 | +| Name | Short Description | Tier | +| -------------------------------------------------------------- | -------------------------------------------------------- | ---------- | +| [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 | +| [🌟Bug Race Game](./Projects/Bug-Race-Game.md) | Create a Bug Race game to show off your animation skills | 3-Advanced | +| [🌟Calorie Counter](./Projects/Calorie-Counter-App.md) | Calorie Counter Nutrion App | 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 | +| [🌟Instagram Clone](./Projects/Instagram-Clone-App.md) | A clone of Facebook's Instagram app | 3-Advanced | +| [GitHub Timeline](./Projects/GitHub-Timeline-App.md) | Generate a timeline of a users GitHub Repos | 3-Advanced | +| [🌟GitTweet](./Projects/GitTweet-App.md) | Automatically Tweet your repo milestones | 3-Advanced | +| [Kudos Slackbot](./Projects/Kudos-Slackbot.md) | Give recognition to a deserving peer | 3-Advanced | +| [🌟MyPodcast Library](./Projects/MyPodcast-Library-app.md) | Create a library of favorite podcasts | 3-Advanced | +| [Shell Game](./Projects/Shell-Game.md) | Animated shell game | 3-Advanced | +| [🌟Shuffle Deck](./Projects/Shuffle-Deck-App.md) | Evaluate different algorithms for shuffling a card deck | 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 | ## Plans for the future