├── .github └── ISSUE_TEMPLATE │ ├── bug_report.md │ ├── feature_request.md │ └── project_idea.md ├── .gitignore ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── Example Guide.md ├── LICENSE ├── Projects ├── 1-Beginner │ ├── Bin2Dec-App.md │ ├── Border-Radius-Previewer.md │ ├── CSV2JSON-App.md │ ├── Calculator-App.md │ ├── Calendar-App.md │ ├── Cause-Effect-App.md │ ├── Christmas-Lights-App.md │ ├── Color-Cycle-App.md │ ├── Countdown-Timer-App.md │ ├── Dollars-To-Cents-App.md │ ├── Dynamic-CSSVar-app.md │ ├── First-DB-App.md │ ├── Flip-Image-App.md │ ├── GitHub-Status-App.md │ ├── Hello-App.md │ ├── IOT-Mailbox-App.md │ ├── JSON2CSV-App.md │ ├── Javascript-Validation-With-Regex.md │ ├── Key-Value-App.md │ ├── Lorem-Ipsum-Generator.md │ ├── Notes-App.md │ ├── Pearson-Regression-App.md │ ├── Polygon-Api.md │ ├── Pomodoro-Clock.md │ ├── Product-Landing-Page.md │ ├── Quiz-App.md │ ├── Random-Meal-Generator.md │ ├── Random-Number-Generator.md │ ├── Recipe-App.md │ ├── Roman-to-Decimal-Converter.md │ ├── Slider-Design.md │ ├── Spotify-Api.md │ ├── Stopwatch-App.md │ ├── True-or-False-App.md │ ├── Vigenere-Cipher.md │ ├── Weather-App.md │ ├── Windchill-App.md │ └── Word-Frequency-App.md ├── 2-Intermediate │ ├── Bit-Masks-App.md │ ├── Book-Finder-App.md │ ├── Calculator-CLI.md │ ├── Card-Memory-Game.md │ ├── Charity-Finder-App.md │ ├── Chrome-Theme-Extension.md │ ├── Currency-Converter.md │ ├── Drawing-App.md │ ├── Emoji-Translator-App.md │ ├── FlashCards-App.md │ ├── Flip-Art-App.md │ ├── Game-Suggestion-App.md │ ├── GitHub-Profiles.md │ ├── HighStriker-Game.md │ ├── Image-Scaner.md │ ├── Markdown-Previewer.md │ ├── Markdown-Table-Generator.md │ ├── Meme-Generator-App.md │ ├── Name-Generator.md │ ├── Password-Generator.md │ ├── Podcast-Directory-App.md │ ├── QRCode-Badge-App.md │ ├── RegExp-Helper-App.md │ ├── Sales-DB-App.md │ ├── Simple-Online-Store.md │ ├── Sports-Bracket-Generator.md │ ├── String-Art.md │ ├── This-or-That-Game.md │ ├── Timezone-Slackbot.md │ ├── To-Do-App.md │ ├── Typing-Practice-App.md │ ├── Voting-App.md │ └── math-editor.md ├── 3-Advanced │ ├── Battleship-Bot.md │ ├── Battleship-Game-Engine.md │ ├── Boole-Bot-Game.md │ ├── Bug-Race-Game.md │ ├── Calorie-Counter-App.md │ ├── Chat-App.md │ ├── Contribution-Tracker-App.md │ ├── Elevator-App.md │ ├── FastFood-App.md │ ├── GitHub-Timeline-App.md │ ├── GitTweet-App.md │ ├── Instagram-Clone-App.md │ ├── Kudos-Slackbot.md │ ├── Movie-App.md │ ├── MyPodcast-Library-app.md │ ├── NASA-Exoplanet-Query.md │ ├── Shell-Game.md │ ├── Shuffle-Deck-App.md │ ├── Slack-Archiver.md │ ├── SpellIt-App.md │ ├── Survey-App.md │ └── Tic-Tac-Toe.md └── 4-Submissions │ ├── Blog.md │ ├── Camera-App.md │ ├── Christmas-Calendar.md │ ├── Drum-Machine.md │ ├── Magic-8-Ball.md │ └── Polygon.io-api.md ├── README.md └── app-ideas.png /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Desktop (please complete the following information):** 27 | - OS: [e.g. iOS] 28 | - Browser [e.g. chrome, safari] 29 | - Version [e.g. 22] 30 | 31 | **Smartphone (please complete the following information):** 32 | - Device: [e.g. iPhone6] 33 | - OS: [e.g. iOS8.1] 34 | - Browser [e.g. stock browser, safari] 35 | - Version [e.g. 22] 36 | 37 | **Additional context** 38 | Add any other context about the problem here. 39 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/project_idea.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Project Idea 3 | about: Submit a new project idea. 4 | title: "" 5 | labels: project-idea 6 | assignees: "" 7 | --- 8 | 9 | **Project Name** 10 | 11 | Name of your project 12 | 13 | **Project Description** 14 | 15 | Description of your project (Try to be as detailed as you can!) 16 | 17 | **Project Difficulty** 18 | 19 | Beginner, Intermediate, Advanced 20 | 21 | **Project User Stories** - List of tasks to be completed 22 | 23 | - [ ] Task 1 24 | - [ ] Task 2 25 | - [ ] Task 3 26 | - [ ] ... 27 | 28 | **Useful links and resources (Optional)** 29 | - [link](#) 30 | - [link](#) 31 | 32 | **Example Projects (Optional)** 33 | - [link](#) 34 | - [link](#) 35 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as 6 | contributors and maintainers pledge to making participation in our project and 7 | our community a harassment-free experience for everyone, regardless of age, body 8 | size, disability, ethnicity, sex characteristics, gender identity and expression, 9 | level of experience, education, socio-economic status, nationality, personal 10 | appearance, race, religion, or sexual identity and orientation. 11 | 12 | ## Our Standards 13 | 14 | Examples of behavior that contributes to creating a positive environment 15 | include: 16 | 17 | * Using welcoming and inclusive language 18 | * Being respectful of differing viewpoints and experiences 19 | * Gracefully accepting constructive criticism 20 | * Focusing on what is best for the community 21 | * Showing empathy towards other community members 22 | 23 | Examples of unacceptable behavior by participants include: 24 | 25 | * The use of sexualized language or imagery and unwelcome sexual attention or 26 | advances 27 | * Trolling, insulting/derogatory comments, and personal or political attacks 28 | * Public or private harassment 29 | * Publishing others' private information, such as a physical or electronic 30 | address, without explicit permission 31 | * Other conduct which could reasonably be considered inappropriate in a 32 | professional setting 33 | 34 | ## Our Responsibilities 35 | 36 | Project maintainers are responsible for clarifying the standards of acceptable 37 | behavior and are expected to take appropriate and fair corrective action in 38 | response to any instances of unacceptable behavior. 39 | 40 | Project maintainers have the right and responsibility to remove, edit, or 41 | reject comments, commits, code, wiki edits, issues, and other contributions 42 | that are not aligned to this Code of Conduct, or to ban temporarily or 43 | permanently any contributor for other behaviors that they deem inappropriate, 44 | threatening, offensive, or harmful. 45 | 46 | ## Scope 47 | 48 | This Code of Conduct applies both within project spaces and in public spaces 49 | when an individual is representing the project or its community. Examples of 50 | representing a project or community include using an official project e-mail 51 | address, posting via an official social media account, or acting as an appointed 52 | representative at an online or offline event. Representation of a project may be 53 | further defined and clarified by project maintainers. 54 | 55 | ## Enforcement 56 | 57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 58 | reported by contacting the project team at popflorin1705@yahoo.com. All 59 | complaints will be reviewed and investigated and will result in a response that 60 | is deemed necessary and appropriate to the circumstances. The project team is 61 | obligated to maintain confidentiality with regard to the reporter of an incident. 62 | Further details of specific enforcement policies may be posted separately. 63 | 64 | Project maintainers who do not follow or enforce the Code of Conduct in good 65 | faith may face temporary or permanent repercussions as determined by other 66 | members of the project's leadership. 67 | 68 | ## Attribution 69 | 70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, 71 | available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html 72 | 73 | [homepage]: https://www.contributor-covenant.org 74 | 75 | For answers to common questions about this code of conduct, see 76 | https://www.contributor-covenant.org/faq 77 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing Guideline 2 | 3 | If you have a fun and interesting project idea, you can submit a new issue using the **project idea** label including the following information: 4 | 5 | - Project name 6 | - Project description 7 | - Project difficulty 8 | - Project user stories (Requirements) 9 | - Useful links and resources (Optional) 10 | - Example projects (Optional) 11 | 12 | Before submitting, check for any spelling/grammar errors and ensure that your project is clear and concise before submitting. 13 | 14 | [EXAMPLE TEMPLATE](./Projects/1-Beginner/Bin2Dec-App.md) 15 | -------------------------------------------------------------------------------- /Example Guide.md: -------------------------------------------------------------------------------- 1 | # Application Name 2 | 3 | **Tier:** Add corresponding tier (1-Beginner, 2-Intermediate, 3-Advanced) 4 | 5 | Add a clear description of the application and its main features. 6 | Answer the following questions: 7 | 8 | - "What is the purpose of this application?" 9 | - "Are there any resources needed in order to complete the project?" - If yes, be sure to add it. 10 | 11 | ## User Stories 12 | 13 | - [ ] User can ... first user story 14 | - [ ] User can ... second user story 15 | - [ ] User can ... third user story 16 | - [ ] User can ... fourth user story 17 | - [ ] User can ... fifth user story 18 | - etc... 19 | 20 | ## Bonus features 21 | 22 | - [ ] User can ... first bonus feature 23 | - [ ] User can ... second bonus feature 24 | - etc... 25 | 26 | ## Useful links and resources 27 | 28 | Add useful links and resources corresponding to this project. 29 | 30 | ## Example projects 31 | 32 | Add one or more examples of projects that have similar functionality to this application. This will act as a developer guide. 33 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Florin Pop 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /Projects/1-Beginner/Bin2Dec-App.md: -------------------------------------------------------------------------------- 1 | # Bin2Dec 2 | 3 | **Tier:** 1-Beginner 4 | 5 | Binary is the number system all digital computers are based on. 6 | Therefore it's important for developers to understand binary, or base 2, 7 | mathematics. The purpose of Bin2Dec is to provide practice and 8 | understanding of how binary calculations. 9 | 10 | Bin2Dec allows the user to enter strings of up to 8 binary digits, 0's 11 | and 1's, in any sequence and then displays its decimal equivalent. 12 | 13 | This challenge requires that the developer implementing it follow these 14 | constraints: 15 | 16 | - Arrays may not be used to contain the binary digits entered by the user 17 | - Determining the decimal equivalent of a particular binary digit in the 18 | sequence must be calculated using a single mathematical function, for 19 | example the natural logarithm. It's up to you to figure out which function 20 | to use. 21 | 22 | ## User Stories 23 | 24 | - [ ] User can enter up to 8 binary digits in one input field 25 | - [ ] User must be notified if anything other than a 0 or 1 was entered 26 | - [ ] User views the results in a single output field containing the decimal (base 10) equivalent of the binary number that was entered 27 | 28 | ## Bonus features 29 | 30 | - [ ] User can enter a variable number of binary digits 31 | 32 | ## Useful links and resources 33 | 34 | [Binary number system](https://en.wikipedia.org/wiki/Binary_number) 35 | 36 | ## Example projects 37 | 38 | Try not to view this until you've developed your own solution: 39 | 40 | - [Binary to decimal conversion program for beginners](https://www.youtube.com/watch?v=YMIALQE26KQ) 41 | - [Binary to Decimal converter using React](https://github.com/email2vimalraj/Bin2Dec) 42 | - [Binary to Decimal converter with plain html, js and css](https://grfreire.github.io/Bin2Dec/) 43 | - [Binary to Decimal converter using Flutter & Dart](https://github.com/israelss/AppIdeasCollection/tree/master/Tier1/Bin2Dec) 44 | - [Live preview built with Flutter for Web](https://bin2dec.web.app/#/) 45 | - [Binary to Decimal converter using React](https://github.com/geoffctn/Bin2Dec) 46 | - [Matrix-like Binary to Decimal converter using Angular](https://github.com/ZangiefWins/MatrixBin2Dec) 47 | - [Live preview on heroku](https://matrix-bin2dec.herokuapp.com/) 48 | -------------------------------------------------------------------------------- /Projects/1-Beginner/Border-Radius-Previewer.md: -------------------------------------------------------------------------------- 1 | # Border-radius Previewer 2 | 3 | **Tier:** 1-Beginner 4 | 5 | The border-radius property can have multiple values changed. Preview how the shape looks while changing these values. 6 | 7 | ## User Stories 8 | 9 | - [ ] User can see a box which has a `border-radius` property applied to it 10 | - [ ] User can change the 4 `border-radius` values that are applied to the box (top-left, top-right, bottom-left, bottom-right) 11 | - [ ] User can copy the resulting CSS to the clipboard 12 | 13 | ## Bonus features 14 | 15 | - [ ] User can change all 8 possible values of the border-radius in order to create a complex shape 16 | 17 | ## Useful links and resources 18 | 19 | - [CSS3 Borders](https://www.w3schools.com/css/css3_borders.asp) 20 | - [Copy to Clipboard](https://www.w3schools.com/howto/howto_js_copy_clipboard.asp) 21 | 22 | ## Example projects 23 | 24 | - [9elements Fancy Border Radius](https://9elements.github.io/fancy-border-radius/) 25 | - [Border Radius](https://border-radius.com/) 26 | - [CSS Gradient Border](https://codepen.io/thebabydino/pen/zbqPVd) 27 | -------------------------------------------------------------------------------- /Projects/1-Beginner/CSV2JSON-App.md: -------------------------------------------------------------------------------- 1 | # CSV2JSON 2 | 3 | **Tier:** 1-Beginner 4 | 5 | In the [JSON2CSV](./JSON2CSV-App.md) application you translated JSON 6 | to a comma separated value (CSV) format. The objective of CSV2JSON is to 7 | reverse that process by converting a block of CSV text to JSON. 8 | 9 | In CSV2JSON you'll start by copying the JSON2CSV app you created and then 10 | modify it to allow CSV to JSON conversion as well the JSON to CSV conversion 11 | that's already present. In additional to providing a useful function, this 12 | challenge will also give you practice in modifying existing applications to 13 | add new functionality. 14 | 15 | ### Constraints ### 16 | 17 | - Read the user stories below carefully. Some of the functionality created 18 | for JSON2CSV will need to be modified. 19 | - You may not use any libraries or packages designed to perform this type of 20 | conversion. 21 | - Nested JSON structures are not supported. 22 | 23 | ## User Stories 24 | 25 | - [ ] User can paste CSV syntax into a text box 26 | - [ ] User can click a 'Convert to JSON' button to validate the CSV text box and convert it to JSON 27 | - [ ] User can see an warning message if the CSV text box is empty or if it doesn't contain valid CSV 28 | - [ ] User can see the converted CSV in the JSON text box 29 | 30 | ### Stories already implemented in JSON2CSV 31 | - [ ] User can paste JSON syntax into a text box 32 | - [ ] User can click a 'Convert to CSV' button to validate the JSON text box and convert it to CSV 33 | - [ ] User can see an warning message if the JSON text box is empty or if it doesn't contain valid JSON 34 | - [ ] User can click a 'Clear' button to clear the contents of both the JSON and CSV text boxes. 35 | 36 | ## Bonus features 37 | 38 | - [ ] User can enter the path to the CSV file on the local file system in a text box 39 | - [ ] User can click a 'Open CSV' button to load file containing the CSV into the text box 40 | - [ ] User can see a warning message if the CSV file is not found 41 | - [ ] User can click a 'Save CSV' button to save the CSV file to the file entered in the same text box used for opening the CSV file 42 | - [ ] User can see a warning message if the CSV text box is empty or if the save operation failed. 43 | - [ ] User can enter the path to the JSON file on the local file system in a text box 44 | - [ ] User can click a 'Open JSON' button to load file containing the JSON into the text box 45 | - [ ] User can see a warning message if the JSON file is not found 46 | - [ ] User can click a 'Save JSON' button to save the JSON file to the file entered in the same text box used for opening the JSON file 47 | - [ ] User can see a warning message if the JSON text box is empty or if the save operation failed. 48 | 49 | ## Useful links and resources 50 | 51 | - [Comma Separated Values (CSV)](https://en.wikipedia.org/wiki/Comma-separated_values) 52 | - [JavaScript Object Notation (JSON)](https://www.json.org/) 53 | - [Saving a file with pure JS](https://codepen.io/davidelrizzo/pen/cxsGb) 54 | - [Reading files in Javascript](https://codepen.io/jduprey/details/xbale) 55 | 56 | ## Example projects 57 | 58 | - [CSV to JSON Converter](https://codepen.io/JFarrow/pen/CAwyo) 59 | - [JSV Converter](https://gpaiva00.github.io/json-csv) 60 | -------------------------------------------------------------------------------- /Projects/1-Beginner/Calculator-App.md: -------------------------------------------------------------------------------- 1 | # Calculator 2 | 3 | **Tier:** 1-Beginner 4 | 5 | Calculators are not only one of the most useful tools available, but they are 6 | also a great way to understand UI and event processing in an application. In 7 | this problem you will create a calculator that supports basic arithmetic 8 | calculations on integers. 9 | 10 | The styling is up to you so use your imagination and get creative! You might 11 | also find it worth your time to experiment with the calculator app on your 12 | mobile device to better understand basic functionality and edge cases. 13 | 14 | ### Constraints 15 | 16 | - You may not use the `eval()` function to execute calculations 17 | 18 | ## User Stories 19 | 20 | - [ ] User can see a display showing the current number entered or the 21 | result of the last operation. 22 | - [ ] User can see an entry pad containing buttons for the digits 0-9, 23 | operations - '+', '-', '/', and '=', a 'C' button (for clear), and an 'AC' 24 | button (for clear all). 25 | - [ ] User can enter numbers as sequences up to 8 digits long by clicking on 26 | digits in the entry pad. Entry of any digits more than 8 will be ignored. 27 | - [ ] User can click on an operation button to display the result of that 28 | operation on: 29 | * the result of the preceding operation and the last number entered OR 30 | * the last two numbers entered OR 31 | * the last number entered 32 | - [ ] User can click the 'C' button to clear the last number or the last 33 | operation. If the users last entry was an operation the display will be 34 | updated to the value that preceded it. 35 | - [ ] User can click the 'AC' button to clear all internal work areas and 36 | to set the display to 0. 37 | - [ ] User can see 'ERR' displayed if any operation would exceed the 38 | 8 digit maximum. 39 | 40 | ## Bonus features 41 | 42 | - [ ] User can click a '+/-' button to change the sign of the number that is 43 | currently displayed. 44 | - [ ] User can see a decimal point ('.') button on the entry pad to that 45 | allows floating point numbers up to 3 places to be entered and operations to 46 | be carried out to the maximum number of decimal places entered for any one 47 | number. 48 | 49 | ## Useful links and resources 50 | 51 | - [Calculator (Wikipedia)](https://en.wikipedia.org/wiki/Calculator) 52 | - [MDN](https://developer.mozilla.org/en-US/) 53 | 54 | ## Example projects 55 | 56 | - [BHMBS - JS-Neumorphic-Calculator](https://barhouum7.github.io/JS-Neumorphic-Calc.github.io/) 57 | - [Javascript iOS Style Calculator](https://codepen.io/ssmkhrj/full/jOWBQqO) 58 | - [Javascript Calculator](https://codepen.io/giana/pen/GJMBEv) 59 | - [React Calculator](https://codepen.io/mjijackson/pen/xOzyGX) 60 | - [Javascript-CALC](https://github.com/x0uter/javascript-calc) 61 | - [Sample Calculator](https://sevlasnog.github.io/sample-calculator) 62 | - [Python Calculator](https://github.com/kana800/Side-Projects/tree/master/1-Beginner/calculator) 63 | -------------------------------------------------------------------------------- /Projects/1-Beginner/Calendar-App.md: -------------------------------------------------------------------------------- 1 | # My calendar 2 | 3 | **Tier:** 3-Advanced 4 | 5 | Build a calendar application to organize you daily life. Add functionality to add events and reminder. 6 | Style your own calendar according to your requirement 7 | 8 | - Understanding how calendar application works 9 | - Only basic understanding of HTML/CSS and JS is required 10 | - Working on more features help you learning advance concepts of JS 11 | 12 | ## User Stories 13 | 14 | - [ ] User can create event 15 | - [ ] User can edit event 16 | - [ ] User can delete event 17 | 18 | ## Bonus features 19 | 20 | - [ ] User can drag events between dates 21 | - [ ] User can set reminder for a event 22 | - [ ] Change theme (light/dark) (play with css), play with css 😄 23 | - [ ] Store data locally so that events does not get deleted when server is restarted 24 | 25 | ## Useful links and resources 26 | 27 | - [Local Storage](https://blog.logrocket.com/the-complete-guide-to-using-localstorage-in-javascript-apps-ba44edb53a36/) 28 | - [MDN](https://developer.mozilla.org/en-US/) 29 | - [Design Ideas](https://dribbble.com/tags/calendar) 30 | 31 | ## Example projects 32 | 33 | - [Simple calendar](https://medium.com/@nitinpatel_20236/challenge-of-building-a-calendar-with-pure-javascript-a86f1303267d) 34 | - [eCalendar](https://github.com/muzhaqi16/eCalendar) 35 | -------------------------------------------------------------------------------- /Projects/1-Beginner/Cause-Effect-App.md: -------------------------------------------------------------------------------- 1 | # CauseEffect 2 | 3 | **Tier:** 1-Beginner 4 | 5 | Patterns are integral to software engineering and represent potentially 6 | reusable components in program logic. However, patterns aren't used only 7 | for program logic, they are exist in other domains such as DevOps, user 8 | support, and the user interface. 9 | 10 | A common user interface pattern is to summarize data in one section of a page 11 | that consists of some type of list (like text, images, or icons) that describes 12 | or categorizes a set of data. When a list item is clicked, the detailed data 13 | behind it is displayed in an adjacent pane on the page. 14 | 15 | For example, on a real estate site clicking an address in a list of properties 16 | for sale displays the details about the property in another part of the 17 | page. 18 | 19 | This challenge requires that the developer implementing it follow these 20 | constraints: 21 | 22 | - You are responsible for creating your own test data. Use a hardcoded 23 | Javascript object to define your test data (see below). 24 | - Use only native HTML/CSS/Javascript in your first version of this app 25 | - You may use other packages or libraries when implementing subsequent 26 | versions. 27 | 28 | ## User Stories 29 | 30 | - [ ] User can see a list of person names arranged vertically in a summary 31 | pane on the page. 32 | - [ ] User can click on a name in the list to update an adjacent pane on the 33 | page with that individuals full name, address, telephone number, and 34 | birthday. 35 | - [ ] User can click on another name in the list to refresh the detail pane 36 | with that individuals information. 37 | 38 | ## Bonus features 39 | 40 | - [ ] User can see the person name in the summary pane highlighted when the 41 | cursor is hovered over it. 42 | - [ ] User can see the person name in the summary pane highlighted 43 | using a selection effect (color, size, etc.) when it is clicked. This is a 44 | different effect from the hover effect 45 | - [ ] User can see the selection effect removed from a name in the summary 46 | list when a new name is clicked. 47 | 48 | ## Useful links and resources 49 | 50 | - [DOM Events](https://developer.mozilla.org/en-US/docs/Web/API/Event) 51 | - Consider defining your test data in a JavaScript object having a format 52 | such as this: 53 | 54 | ``` 55 | const people = [ 56 | {name: "...", street: "...", city: "...", state: "...", country: "...", telephone: "...", birthday: "..."}, 57 | . 58 | . 59 | . 60 | {name: "...", street: "...", city: "...", state: "...", country: "...", telephone: "...", birthday: "..."} 61 | ]; 62 | ``` 63 | 64 | ## Example projects 65 | 66 | Checkout the interaction between the Navigation items on the left hand side 67 | of the page and the main body of the page on the [Javascript MDN site](https://developer.mozilla.org/en-US/docs/Web/JavaScript) 68 | -------------------------------------------------------------------------------- /Projects/1-Beginner/Christmas-Lights-App.md: -------------------------------------------------------------------------------- 1 | # Christmas Lights 2 | 3 | **Tier:** 1-Beginner 4 | 5 | The ChristmasLights application relies on your development talents to create 6 | a mesmerizing light display. Your task is to draw seven colored circles 7 | in a row and based on a timer change the intensity of each circle. When 8 | a circle is brightened it's predecessor returns to its normal intensity. 9 | 10 | This simulates the effect of a string of rippling lights, similar to the ones 11 | displayed during the Christmas Holidays. 12 | 13 | ## User Stories 14 | 15 | - [ ] User can press a button to start and stop the display 16 | - [ ] User can change the interval of time controlling the change in intensity 17 | 18 | ## Bonus features 19 | 20 | - [ ] User can select the color used to fill each circle 21 | - [ ] User can specify the intensity value 22 | - [ ] User can change the size of any circle in the row 23 | - [ ] User can specify the number of rows to be included in the display. From 24 | one to seven rows can be chosen 25 | 26 | ## Useful links and resources 27 | 28 | - [Sample Image](https://previews.123rf.com/images/whiterabbit/whiterabbit1003/whiterabbit100300020/6582600-seven-color-balls-red-orange-yellow-green-cyan-blue-and-magenta-in-a-row-on-a-white-background.jpg) 29 | - [Adafruit LED Matrix](https://cdn-shop.adafruit.com/970x728/1487-02.jpg) 30 | 31 | ## Example projects 32 | 33 | [PureCSSChristmasLights](https://codepen.io/tobyj/pen/QjvEex) 34 | [Christmas Lights](https://codepen.io/irfanezani_/pen/mdeLpKo) 35 | 36 | 37 | -------------------------------------------------------------------------------- /Projects/1-Beginner/Color-Cycle-App.md: -------------------------------------------------------------------------------- 1 | # ColorCycle 2 | 3 | **Tier:** 1-Beginner 4 | 5 | The use of color plays a major role in an applications User Interface and 6 | User Experience (UI/UX). ColorCycle seeks to help WebDev's better understand 7 | RBG colors by making small changes to a colored box over time. 8 | 9 | This app draws a box filled with a user specified color and makes small changes 10 | over time also based on user input. In other words, from cycles through 11 | changes to the originally specified color. These changes allow the user to 12 | experience the visual impact different changes to the individual parts of 13 | an RGB color specification (e.g. `#000000` color code). 14 | 15 | ## User Stories 16 | 17 | - [ ] User can specify a starting fill color as a six hexadecimal standard 18 | CSS color code in three individual components of two digits each - red, 19 | blue, and green 20 | - [ ] User can specify an increment value for each color component that will 21 | be added to that component every .25 second 22 | - [ ] User can see the box containing the fill color change every .25 seconds 23 | - [ ] User can only change the color components and their increments when 24 | the app is stopped 25 | - [ ] User can start and stop the fill operation using a button whose name 26 | changes to 'Start' when stopped and 'Stop' when started 27 | - [ ] User will receive an warning if something other than hexadecimal digits 28 | are entered for the color components 29 | 30 | ## Bonus features 31 | 32 | - [ ] User can change the time interval between color changes 33 | - [ ] User can specify the color encoding format used from RGB to another format like HSL 34 | 35 | ## Useful links and resources 36 | 37 | [CSS Color Codes](https://qhmit.com/css/css_color_codes.cfm) 38 | 39 | ## Example projects 40 | 41 | [CSS Color Changing Background](https://codepen.io/SoumyajitChand/pen/wjKVed) 42 | -------------------------------------------------------------------------------- /Projects/1-Beginner/Countdown-Timer-App.md: -------------------------------------------------------------------------------- 1 | # Countdown Timer 2 | 3 | **Tier:** 1-Beginner 4 | 5 | We all have important events we look forward to in life, birthdays, 6 | anniversaries, and holidays to name a few. Wouldn't it be nice to have an app 7 | that counts down the months, days, hours, minutes, and seconds to an event? 8 | Countdown Timer is just that app! 9 | 10 | The objective of Countdown Timer is to provide a continuously decrementing 11 | display of the he months, days, hours, minutes, and seconds to a user entered 12 | event. 13 | 14 | ### Constraints 15 | 16 | - Use only builtin language functions for your calculations rather than relying 17 | on a library or package like [MomentJS](https://momentjs.com/). This assumes, 18 | of course, that the language of your choice has adequate date and time 19 | manipulation functions built in. 20 | - You may not use any code generators such as the 21 | [Counting Down To](https://countingdownto.com/) site. You should develop your 22 | own original implementation. 23 | 24 | ## User Stories 25 | 26 | - [ ] User can see an event input box containing an event name field, an 27 | date field, an optional time, and a 'Start' button. 28 | - [ ] User can define the event by entering its name, the date it is 29 | scheduled to take place, and an optional time of the event. If the time is 30 | omitted it is assumed to be at Midnight on the event date in the local time 31 | zone. 32 | - [ ] User can see a warning message if the event name is blank. 33 | - [ ] User can see a warning message if the event date or time are incorrectly 34 | entered. 35 | - [ ] User can see a warning message if the time until the event data and time 36 | that has been entered would overflow the precision of the countdown timer. 37 | - [ ] User can click on the 'Start' button to see the countdown timer start 38 | displaying the days, hours, minutes, and seconds until the event takes place. 39 | - [ ] User can see the elements in the countdown timer automatically 40 | decrement. For example, when the remaining seconds count reaches 0 the remaining 41 | minutes count will decrement by 1 and the seconds will start to countdown from 59. This progression must take place from seconds all the way up to the remaining days position in countdown display. 42 | 43 | ## Bonus features 44 | 45 | - [ ] User can save the event so that it persists across sessions 46 | - [ ] User can see an alert when the event is reached 47 | - [ ] User can specify more than one event. 48 | - [ ] User can see a countdown timers for each event that has been defined. 49 | 50 | ## Useful links and resources 51 | 52 | - Images of analog tube-based countdown timers can be found 53 | [here](https://nixieshop.com/) 54 | - [`clearInterval` MDN](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval) 55 | - [`setInterval` MDN](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval) 56 | - [Date MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) 57 | 58 | ## Example projects 59 | 60 | [Simple Clock/Countdown Timer](https://codepen.io/karlo-stekovic/pen/OajKVK) 61 | [Countdown Timer built with React](https://www.florin-pop.com/blog/2019/05/countdown-built-with-react/) 62 | -------------------------------------------------------------------------------- /Projects/1-Beginner/Dollars-To-Cents-App.md: -------------------------------------------------------------------------------- 1 | # Dollars To Cents 2 | 3 | **Tier:** 1-Beginner 4 | 5 | Converting dollars to cents would enable you to practice your fundamental knowledge of programming. Loops, if conditions and a simple algorithm will be used. 6 | Your task is to let the user input a dollar value (float), assuming that it can also accept extra cents (ex. $2.75), and convert it into an integer (in this case, if $2.75 = 275). After this, convert into coins with the sub-type of dollars: penny, nickel, dime and quarter. Use an algorithm that would divide the dollar value to the four coin types, and output few coins as possible. 7 | 8 | The challenge: Try this without using any frameworks. 9 | 10 | (EX. If you have $0.58, I would have 4 coins: 2 quarters, 0 dimes, 1 nickel and 3 pennies) 11 | 12 | ## User Stories 13 | 14 | - [ ] User can enter a dollar value 15 | - [ ] User can see the total cents from the converted dollar value 16 | 17 | ## Bonus features 18 | 19 | - [ ] User can see how many were pennies, nickels, quarters and dimes from the total cents 20 | 21 | ## Useful links and resources 22 | 23 | - [Math functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math) 24 | - [Loops and iterations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) 25 | - [Money values in JavaScript](https://timleland.com/money-in-javascript/) 26 | 27 | ## Example projects 28 | 29 | - [Dollars to cents converter](https://github.com/LimonJuice322/Dollars-to-cents-converter) 30 | -------------------------------------------------------------------------------- /Projects/1-Beginner/Dynamic-CSSVar-app.md: -------------------------------------------------------------------------------- 1 | # Dynamic CSS Variables 2 | 3 | **Tier:** 1-Beginner 4 | 5 | CSS variables are a powerful tool that lets the developer associate a symbolic 6 | name with a value, and then use that name in the stylesheet wherever that 7 | value is required. The advantage is that when a change to that value is 8 | required it only needs to change in the CSS variable definition rather than in 9 | the many spots it may be used. 10 | 11 | What can make this even more powerful is to dynamically change the value of a 12 | CSS variable at runtime. 13 | 14 | The goal of this app is to dynamically change the background color of text boxes 15 | based to let you gain experience using both CSS variables and dynamically 16 | changing them from within the app. 17 | 18 | ## User Stories 19 | 20 | - [ ] User can see three two boxes to be used to enter a User ID and Password 21 | along with 'Cancel' and 'Login' buttons underneath them. The default background 22 | color of the text boxes is white. 23 | - [ ] User can enter a user id and password into the text boxes. 24 | - [ ] User can click the 'Login' button to validate the user id and password. 25 | - [ ] User can see a warning message if one or both of the text boxes contains 26 | spaces and the background color of the empty text box will change to light 27 | yellow. 28 | - [ ] User can see a warning message if the user id doesn't match 'testuser' 29 | and the background color of the text box will change to light red. 30 | - [ ] User can see a warning message if the password doesn't match 'mypassword' 31 | and the background color of the text box will change to light red. 32 | - [ ] User can click the 'Cancel' button to clear the text boxes and reset 33 | their background colors to white. 34 | 35 | ## Bonus features 36 | 37 | - [ ] User can see the color of the text box border change when an error is 38 | detected 39 | - [ ] User can see the size and font of the contents of the text box change 40 | when an error is detected. 41 | 42 | ## Useful links and resources 43 | 44 | - [Custom properties (--*): CSS variables (MDN)](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) 45 | - [CSSStyleDeclaration (MDN)](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration) 46 | 47 | ## Example projects 48 | 49 | [Dynamic CSS Variables](https://codepen.io/gordawn/pen/oOWBXX) 50 | -------------------------------------------------------------------------------- /Projects/1-Beginner/Flip-Image-App.md: -------------------------------------------------------------------------------- 1 | # FlipImage 2 | 3 | **Tier:** 1-Beginner 4 | 5 | It's important for Web Developers to understand the basics of manipulating 6 | images since rich web applications rely on images to add value to the user 7 | interface and user experience (UI/UX). 8 | 9 | FlipImage explores one aspect of image manipulation - image rotation. This 10 | app displays a square pane containing a single image presented in a 2x2 11 | matrix. Using a set of up, down, left, and right arrows adjacent to each 12 | of the images the user may flip them vertically or horizontally. 13 | 14 | You must only use native HTML, CSS, and Javascript to implement this app. 15 | Image packages and libraries are not allowed. 16 | 17 | ## User Stories 18 | 19 | - [ ] User can see a pane containing a single image repeated in a 2x2 matrix 20 | - [ ] User can flip any one of the images vertically or horizontally using a set of up, down, left, and right arrows next to the image 21 | 22 | ## Bonus features 23 | 24 | - [ ] User can change the default image by entering the URL of a different image in an input field 25 | - [ ] User can display the new image by clicking a 'Display' button next to the input field 26 | - [ ] User can see an error message if the new images URL is not found 27 | 28 | ## Useful links and resources 29 | 30 | - [How to Flip an Image](https://www.w3schools.com/howto/howto_css_flip_image.asp) 31 | - [Create a CSS Flipping Animatin](https://davidwalsh.name/css-flip) 32 | 33 | ## Example projects 34 | 35 | [Image Effects by @bennettfeely](https://codepen.io/seyedi/pen/gvqYQv) 36 | -------------------------------------------------------------------------------- /Projects/1-Beginner/GitHub-Status-App.md: -------------------------------------------------------------------------------- 1 | # GitHub Status 2 | 3 | **Tier:** 1-Beginner 4 | 5 | Web apps acquire data in many ways. Through user input in web pages, through 6 | API's to backend systems, from files and databases, and sometimes by "scraping" 7 | websites. The objective of the GitHub Status app is to introduce you to one 8 | way to scrape information from another web site. 9 | 10 | GitHub Status uses the NPM Request package to retrieve the current GitHub site 11 | status from the [GitHub Status](https://www.githubstatus.com/) web site. The 12 | Request package allows websites to be retrieved not to a browser window, but 13 | as a JSON document that can be readily accessed by your code. 14 | 15 | Although this application specification relies heavily on Javascript, feel free 16 | to develop it using your language of choice! 17 | 18 | ## User Stories 19 | 20 | - [ ] User can see the current status for GitHub Git operations, API Requests, 21 | Operational Issues, PRs, Dashboard, & Projects, Operational Notifications, 22 | Operational Gists, and Operational GitHub Pages as a list in the main app 23 | window. 24 | - [ ] User can retrieve the most recent status from the GitHub Status web 25 | site by clicking a 'Get Status' button. 26 | 27 | ## Bonus features 28 | 29 | - [ ] User can see any of the GitHub components that are not in 'Operational' 30 | status highlighted by a different color, background animation, or any other 31 | technique to make it stand out. Use your imagination! 32 | 33 | ## Useful links and resources 34 | 35 | - [Web Scraping (Wikipedia)](https://en.wikipedia.org/wiki/Web_scraping) 36 | - [NPM Request](https://www.npmjs.com/package/request) 37 | - [Javascript JSON (MDN)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON) 38 | - [Javascript Object Notation](https://json.org/) 39 | - Hint! You can use the following code to display the JSON for the GitHub Status 40 | web site page from the command line command `node ghstatus`. You can use this 41 | output to determine which JSON element contain the status information you'll 42 | need to develop this app. 43 | ``` 44 | ghstatus.js 45 | 46 | const request = require('request'); 47 | request('https://www.githubstatus.com/', { json: true }, (err, res, body) => { 48 | console.log(body); 49 | }); 50 | ``` 51 | 52 | ## Example projects 53 | 54 | - [Peter Luczynski's example](https://peterluczynski.github.io/github-status/) 55 | - [Diogo Moreira's example](https://diogomoreira.github.io/github-status/) 56 | -------------------------------------------------------------------------------- /Projects/1-Beginner/Hello-App.md: -------------------------------------------------------------------------------- 1 | # Hello 2 | 3 | **Tier:** 1-Beginner 4 | 5 | It is a given that applications must provide users with the functionality 6 | necessary to accomplish some task or goal. The effectiveness of app functionality 7 | is the first determinate of how users perceive the apps they use. However, it 8 | is not the only thing that influences user satisfaction. 9 | 10 | The User Interface and User Experience (UI/UX) features developers build into 11 | apps have at least an equal amount of influence on users perception of an app. 12 | It may be an oversimplification, but UI/UX is largely (but not wholly) 13 | concerned with an apps "form". Personalization is an aspect of UX that tailors 14 | characteristics and actions to 15 | the individual user. Personalizing app functionality in this manner works to 16 | make the app easier and more pleasing to use. 17 | 18 | The objective of the Hello app is to leverage geolocation to obtain the users 19 | country so it can then generate a customized greeting in the users native 20 | language. 21 | 22 | ### Constraints 23 | 24 | - Developers should use the [IP-API](http://ip-api.com/docs/api:json) service 25 | to obtain the users IP. 26 | - Developers should use the 27 | [Fourtonfish](https://www.fourtonfish.com/hellosalut/hello/) service to 28 | obtain the greeting in the users native language by passing the users IP. 29 | - Developers must use a HTML entities decoding to decode the hello message. 30 | 31 | ## User Stories 32 | 33 | - [ ] User can see a mock login panel containing a user name text input field, 34 | a password text input field, and 'Login' and 'Logout' buttons. 35 | - [ ] User can enter a mock login name into the User Name field. 36 | - [ ] User can enter a mock password into the Password field. Input should 37 | be masked so the user see's asterisks (`*`) for each character that is entered 38 | rather than the plaintext password. 39 | - [ ] User can click the 'Login' button to perform a mock login. 40 | - [ ] User can see a message if either or both of the input fields are empty 41 | and the border color of the field(s) in error should be changed to red. 42 | - [ ] User can see a login acknowledgement message in the format: 43 | ` you have successfully logged in!` 44 | - [ ] User can click the 'Logout' button to clear the text input fields and 45 | any previous messages. 46 | - [ ] User can see a new message when successfully logged out in the format: 47 | `Have a great day !` 48 | 49 | ## Bonus features 50 | 51 | - [ ] User can see an additional text input field for a language code which 52 | will be used to override the IP obtained through geolocation. Hint: 53 | this is a great feature for testing your app. 54 | - [ ] User can see additional geolocation information after logging on that 55 | includes at least the local IP address, city, region, country name, zip code, 56 | longitude, latitude, and timezone. 57 | 58 | ## Useful links and resources 59 | 60 | - [Form Follows Function (Wikipedia)](https://en.wikipedia.org/wiki/Form_follows_function) 61 | - [Personalization (Wikipedia)](https://en.wikipedia.org/wiki/Personalization) 62 | - [Fourtonfish](https://www.fourtonfish.com/hellosalut/hello/) 63 | - [IP-API](http://ip-api.com/docs/api:json) 64 | 65 | ## Example projects 66 | 67 | [Fourtonfish Hello World](https://fourtonfish.com/hellosalut/helloworld/) 68 | -------------------------------------------------------------------------------- /Projects/1-Beginner/IOT-Mailbox-App.md: -------------------------------------------------------------------------------- 1 | # IOT Mailbox Simulator 2 | 3 | **Tier:** 1-Beginner 4 | 5 | The objective of the IOT Mailbox Simulator is to mimic how an Internet of Things 6 | (IOT) enabled physical mailbox might be used to notify you when "snail" mail 7 | has arrived. In doing so it will provide you with experience using callbacks 8 | to communicate state between different components of an app that are dependent 9 | on one another. 10 | 11 | ### Requirements & Constraints 12 | 13 | - Even though this app is specified using Javascript concepts and terminology 14 | you are free to implement it in the language of your choice. 15 | 16 | - The following Javascript class is provided to start and stop the monitoring 17 | process, and to signal the app web page with the state of the mailbox door 18 | (open or closed) at preset intervals. Keep in mind that the interval you specify 19 | shouldn't exceed the time it normally takes to open or close the door or you 20 | might miss a delivery! 21 | ``` 22 | /** 23 | * Monitor the light levels inside an IOT enabled snail mailbox to detect 24 | * when the mailbox door has been opened and closed. 25 | * @class IOTMailbox 26 | */ 27 | class IOTMailbox { 28 | /** 29 | * Creates an instance of IOTMailbox. 30 | * @param {number} [signalInterval=500] Timer interval for checking mailbox status. 31 | * @param {function} signalCallback Function to invoke when the timer interval expires. 32 | * @memberof IOTMailbox 33 | */ 34 | constructor(signalInterval = 500, signalCallback) { 35 | this.signalInterval = signalInterval; 36 | this.signalCallback = signalCallback; 37 | this.intervalID = null; 38 | this.lastLightLevel = 0; 39 | } 40 | 41 | /** 42 | * Start monitoring of the mailbox and invoke the caller specified callback 43 | * function when the interval expires. 44 | * @memberof IOTMailbox 45 | */ 46 | startMonitoring = () => { 47 | console.log(`Starting monitoring of mailbox...`); 48 | this.intervalID = window.setInterval(this.signalStateChange, this.signalInterval); 49 | } 50 | 51 | /** 52 | * Stop monitoring the mailbox status 53 | * @memberof IOTMailbox 54 | */ 55 | stopMonitoring = () => { 56 | if (this.intervalID === null) return; 57 | window.clearInterval(this.intervalID); 58 | this.intervalID = null; 59 | console.log(`Mailbox monitoring stopped...`); 60 | } 61 | 62 | /** 63 | * Pass the current light level inside the mailbox to the users callback 64 | * function. The positive light levels indicate the door is open while 65 | * negative levels indicate it is closed. Depending on the sampling interval 66 | * the mailbox door could be in any postion from fully closed to fully open. 67 | * This means the light level varies from interval-to-interval. 68 | * @memberof IOTMailbox 69 | */ 70 | signalStateChange = () => { 71 | const lightLevel = this.lastLightLevel >= 0 72 | ? Math.random().toFixed(2) * -1 73 | : Math.random().toFixed(2); 74 | console.log(`Mailbox state changed - lightLevel: ${lightLevel}`); 75 | this.signalCallback(this.lightLevel); 76 | this.lastLightLevel = lightLevel; 77 | } 78 | }; 79 | ``` 80 | 81 | ## User Stories 82 | 83 | - [ ] User can see a web page containing a control panel containing three 84 | buttons - 'Start Monitoring', 'Stop Monitoring', and 'Reset'. 85 | - [ ] User can see a notification panel where the mailbox status will be posted. 86 | - [ ] User can see a scrollable log panel where execution details describing 87 | the apps operation and interface with the IOTMailbox instance will be posted. 88 | - [ ] User can click the 'Start Monitoring' button to begin receiving state 89 | notifications from the mailbox. 90 | - [ ] User can see a message added to the log panel when monitoring starts. 91 | - [ ] User can see a message added to the log panel for light level passed 92 | through the callback function. This should include the numerical light level 93 | and whether the door is open or closed. 94 | - [ ] User can see a message added to the notification panel when the door has 95 | been opened. 96 | - [ ] User can click the 'Stop Monitoring' button to stop receiving state 97 | notifications from the mailbox. 98 | - [ ] User can see a message added to the log panel when monitoring stops. 99 | 100 | ## Bonus features 101 | 102 | - [ ] User can see the 'Start Monitoring' button disabled until monitoring is 103 | stopped. 104 | - [ ] User can see the 'Stop Monitoring' button disabled until monitoring is 105 | started. 106 | - [ ] User can see an field in the control panel allowing the length of the 107 | monitoring interval to be specified. 108 | - [ ] User can see a message added to the notification panel if the door is 109 | left open. 110 | - [ ] User can hear an audible alert when the door is opened. 111 | 112 | ## Useful links and resources 113 | 114 | - [Snail Mail (Wikipedia)](https://en.wikipedia.org/wiki/Snail_mail) 115 | - [Internet of Things (Wikipedia)](https://en.wikipedia.org/wiki/Internet_of_things) 116 | - [IOT Mailbox: An Introduction](https://iotexpert.com/2018/08/13/iot-mailbox-an-introduction/) 117 | - [What the Heck is a Callback?](https://codeburst.io/javascript-what-the-heck-is-a-callback-aba4da2deced) 118 | - [window.setInterval (MDN)](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval) 119 | 120 | ## Example projects 121 | 122 | N/a 123 | -------------------------------------------------------------------------------- /Projects/1-Beginner/JSON2CSV-App.md: -------------------------------------------------------------------------------- 1 | # JSON2CSV 2 | 3 | **Tier:** 1-Beginner 4 | 5 | Developers and end users are both experts in their own domains and as such, 6 | each speaks using a domain-specific language and terminology. This also extends 7 | to the tools used to manipulate data. Developers have found JSON to be a 8 | universally accepted method for transferring data between applications. End 9 | Users, on the other hand, rely on spreadsheets to organize and analyze data. 10 | 11 | The objective of JSON2CSV is to help bridge the gap between JSON and CSV by 12 | converting JSON to CSV to make it easier to review data in a spreadsheet. It 13 | allows the user to paste JSON into a text box to generate its equivalent CSV. 14 | 15 | ### Constraints ### 16 | 17 | - You may not use any libraries or packages designed to perform this type of 18 | conversion. 19 | - If you choose to implement this in JavaScript don't use complicated looping 20 | in your first implementation. Instead, use `Object.keys()` and `Object.values` 21 | to generate CSV for the header and data rows. 22 | - Nested JSON structures are not supported. 23 | 24 | ## User Stories 25 | 26 | - [ ] User can paste JSON syntax into a text box 27 | - [ ] User can click a 'Convert' button to validate the JSON text box and convert it to CSV 28 | - [ ] User can see the converted CSV in another text box 29 | - [ ] User can see an warning message if the JSON text box is empty or if it doesn't contain valid JSON 30 | - [ ] User can click a 'Clear' button to clear the contents of both the JSON and CSV text boxes. 31 | 32 | ## Bonus features 33 | 34 | - [ ] User can enter the path to the JSON file on the local file system in a text box 35 | - [ ] User can click a 'Open' button to load file containing the JSON into the text box 36 | - [ ] User can see a warning message if the JSON file is not found 37 | - [ ] User can enter the path the CSV file is to be saved to in a text box 38 | - [ ] User can click a 'Save' button to save the CSV file to the local file system 39 | - [ ] User can see a warning message if the CSV text box is empty or if the save operation failed. 40 | - [ ] User can convert CSV data to JSON. See [CSV2JSON](./CSV2JSON-App.md) 41 | 42 | ## Useful links and resources 43 | 44 | - [Comma Separated Values (CSV)](https://en.wikipedia.org/wiki/Comma-separated_values) 45 | - [JavaScript Object Notation (JSON)](https://www.json.org/) 46 | - [MDN Javascript Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object) 47 | - [Saving a file with pure JS](https://codepen.io/davidelrizzo/pen/cxsGb) 48 | - [Reading files in Javascript](https://codepen.io/jduprey/details/xbale) 49 | 50 | ## Example projects 51 | 52 | Try to complete your JSON2CSV implementation before reviewing the example 53 | project(s). 54 | 55 | - [JSON to CSV Converter](https://codepen.io/JFarrow/pen/umjGF) 56 | - [JSV Converter](https://gpaiva00.github.io/json-csv) 57 | -------------------------------------------------------------------------------- /Projects/1-Beginner/Javascript-Validation-With-Regex.md: -------------------------------------------------------------------------------- 1 | # Javascript Validation With Regex 2 | 3 | **Tier:** 1-Beginner 4 | 5 | In this challenge, you'd create a javascript validation script to validate the inputs entered by a user using RegEx. 6 | 7 | You could always refer to the [Regular Expression Library](http://regexlib.com/(X(1)A(GijS7qxVy-6Gyc4cweUyFoK4ZvRn2WnlOe8SSKuq9sT7ps-2nbiTmZZMTCn_rFk4-mNoGnYL-DPU8pJhmNNOtkP-syqWE4WO_1aVt4bPa5nTsQPQe6VRAALnm6QW3YIWbYkVS78JFbZN39vmMI1UYiWlHXKwNMB99WjsZOn0qc_8dcN0unp2KMOBw0P__3OH0))/CheatSheet.aspx?AspxAutoDetectCookieSupport=1) for support 8 | 9 | For this project, there'd be three required inputs for validation: 10 | - The first would require the user to enter five (5) capital letters, six (6) symbols and two hyphens (-) in any order. This could be used as a password. 11 | - The second which could be used as username would require the user to enter letters without spaces 12 | - The third which could be used as email address would require the user to enter only email addresses on gmail (...@gmail.com). 13 | 14 | ## User Stories 15 | 16 | - [ ] User should be notified of any invalid inputs by error messages displayed on the form. 17 | - [ ] The submit button on the form would never be executed until all entries are validated. 18 | 19 | ## Useful links and resources 20 | 21 | - [Javascript form validation using regular expressions](http://form.guide/snippets/javascript-form-validation-using-regular-expression.html) 22 | - [JavaScript Form Validation Using Regular Expressions](https://study.com/academy/lesson/javascript-form-validation-using-regular-expressions-definition-example.html) 23 | 24 | ## Example project 25 | 26 | - [Native HTML5 validation with CSS & Regex](https://codepen.io/helgesverre/pen/vWRevp) -------------------------------------------------------------------------------- /Projects/1-Beginner/Key-Value-App.md: -------------------------------------------------------------------------------- 1 | # Key Value 2 | 3 | **Tier:** 1-Beginner 4 | 5 | Have you ever thought about what it means that the computer you are using is 6 | a digital device? Among other things it means that everything its capable of 7 | is achieved by translating a digital signal into a sequence of binary digits - 0's and 1's. These binary digits form codes used to represent data. 8 | 9 | The keyboard you used to retrieve this project description is a great example 10 | of this. Pressing a key generates a digital signal that is translated by the 11 | computer into a code representing the key that was pressed. 12 | 13 | The goal of the Key Value app is to display the encoded value on screen each 14 | time a key is pressed on the keyboard. 15 | 16 | ## User Stories 17 | 18 | - [ ] User can see a display panel containing a text area where the key value 19 | and key code will be displayed along with display areas for four other 20 | indicators related to the keys on the keyboard - alt key, control key, 21 | meta key, and shift key. 22 | - [ ] User can see the key code and key value displayed in the display panel 23 | corresponding to the key when it is pressed. 24 | - [ ] User can see the appropriate indicator change from 'False' to 'True' 25 | when the alt, control, meta, or shift key is pressed. 26 | 27 | ## Bonus features 28 | 29 | - [ ] User can hear a unique tone played when a key is pressed. 30 | - [ ] User can see the background color of the key code and value change when 31 | a key is pressed. 32 | 33 | ## Useful links and resources 34 | 35 | - [Digital Electronics](https://en.wikipedia.org/wiki/Digital_electronics) 36 | - [Keyboard Event](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) 37 | 38 | ## Example projects 39 | 40 | [Javascript Keyevent Test Script](https://unixpapa.com/js/testkey.html) 41 | -------------------------------------------------------------------------------- /Projects/1-Beginner/Lorem-Ipsum-Generator.md: -------------------------------------------------------------------------------- 1 | # Lorem Ipsum Generator 2 | 3 | **Tier:** 1-Beginner 4 | 5 | Lorem Ipsum is simply dummy text of the printing and typesetting industry. 6 | This app should generate passages of lorem ipsum text suitable for use as placeholder copy in web pages, graphics, and more. 7 | 8 | ## User Stories 9 | 10 | - [ ] User can type into an input field the number of paragraphs of lorem ipsum to be generated 11 | - [ ] Use can see the generated paragraphs of lorem ipsum and is able to copy them 12 | 13 | ## Trello Board 14 | 15 | You can track your progress by cloning this [Trello Board](https://trello.com/b/T0xA0Glj/lorem-ipsum-generator) 16 | 17 | ## Useful links and resources 18 | 19 | - [lorem-ipsum npm package](https://www.npmjs.com/package/lorem-ipsum) 20 | - [lorem-ipsum CDN](https://www.jsdelivr.com/package/npm/lorem-ipsum) 21 | 22 | ## Example projects 23 | 24 | - [Lipsum.com](https://www.lipsum.com/) 25 | -------------------------------------------------------------------------------- /Projects/1-Beginner/Notes-App.md: -------------------------------------------------------------------------------- 1 | # Notes App 2 | 3 | **Tier:** 1-Beginner 4 | 5 | Create and store your notes for later purpose! 6 | 7 | ## User Stories 8 | 9 | - [ ] User can create a note 10 | - [ ] User can edit a note 11 | - [ ] User can delete a note 12 | - [ ] When closing the browser window the notes will be stored and when the User returns, the data will be retrieved 13 | 14 | ## Bonus features 15 | 16 | - [ ] User can create and edit a note in Markdown format. On save it will convert Markdown to HTML 17 | - [ ] User can see the date when he created the note 18 | 19 | ## Useful links and resources 20 | 21 | - [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) 22 | - [Markdown Guide](https://www.markdownguide.org/basic-syntax/) 23 | - [Marked - A markdown parser](https://github.com/markedjs/marked) 24 | 25 | ## Example projects 26 | 27 | - [Markdown Notes built with Angular on Codepen](https://codepen.io/nickmoreton/full/gbyygq) 28 | - [Markdown Notes built with React](https://github.com/email2vimalraj/notes-app) 29 | - [Markdown Notes built with Angular 7 and bootstrap 4](https://github.com/omdnaik/angular-ui) 30 | -------------------------------------------------------------------------------- /Projects/1-Beginner/Pearson-Regression-App.md: -------------------------------------------------------------------------------- 1 | # Pearson Regression 2 | 3 | **Tier:** 1-Beginner 4 | 5 | There are few, if any, applications that don't require some form of 6 | cross-disciplinary knowledge in order to implement useful functionality for 7 | a user. In the case of an app for the medical profession it might be domain 8 | expertise in biology or pharmacology. A paint manufacturer or a crop science 9 | business might rely on apps with an intimate knowledge of chemistry. And, a 10 | payroll application will certainly incorporate HR and accounting concepts. 11 | 12 | Regardless of the industry segment an app is developed for one cross domain 13 | expertise in common with them all is mathematics. As an application developer 14 | you don't have to be a mathematician, but it's useful to have an understanding 15 | of how to apply mathematical concepts to the problems you are trying to solve. 16 | 17 | The objective of this app is to apply the Pearson Correlation Coefficient 18 | against two sets of data to provide the user with the degree to which they 19 | may or may not be related. For example, given a set of temperatures and another 20 | set of car prices this would let the user test whether or not they are related 21 | (spoiler alert: they are unrelated!). 22 | 23 | ### Constraints 24 | 25 | - The Developer must program all calculations without relying on a package. 26 | 27 | ## User Stories 28 | 29 | - [ ] User can see an input panel with two input fields allowing entry of `x` 30 | and `y` coordinates, and 'Add' and 'Calculate' buttons. 31 | - [ ] User can enter numbers into these boxes where `x` and `y` are observations 32 | from the two data sets. 33 | - [ ] User can click the 'Add' button to add the `x` and `y` to a tabular 34 | output area listing the pairs of observations. 35 | - [ ] User can see and error message if either of the two input fields are 36 | empty or do not contain valid real numbers. 37 | - [ ] User can see the 'Calculate' button is disabled until errors have been 38 | corrected. 39 | - [ ] User can click the 'Calculate' button to perform the regression analysis 40 | and to display its results. 41 | - [ ] User can see results of the calculation which include: 42 | - Arithmetic means for both the `x` and `y` observations 43 | - Standard deviations for both the `x` and `y` observations 44 | - Pearson correlation coefficient with one of the following interpretations: 45 | - No correlation 46 | - Neutral 47 | - Some correlation 48 | 49 | ## Bonus features 50 | 51 | - [ ] User can see a scatter plot of the observations 52 | - [ ] User can upload observations from a file on the local machine. 53 | - [ ] User can see a regression line overlaying the scatter plot 54 | 55 | ## Useful links and resources 56 | 57 | - [Pearson Correlation Coefficient (Wikipedia)](https://en.wikipedia.org/wiki/Pearson_correlation_coefficient) 58 | - [Linear Regression](https://en.wikipedia.org/wiki/Linear_regression) 59 | - [Pearson's Correlation Coefficient](http://www.code-in-javascript.com/pearsons-correlation-coefficient-in-javascript/) 60 | 61 | ## Example projects 62 | 63 | [Correlation](https://memory.psych.mun.ca/tech/js/correlation.shtml) 64 | -------------------------------------------------------------------------------- /Projects/1-Beginner/Polygon-Api.md: -------------------------------------------------------------------------------- 1 | # Polygon API 2 | 3 | **Tier:** 1-Beginner 4 | 5 | Polygon supplies companies & developers with market data for stocks, currencies, forex, and crypto. We provide easy to use APIs to help you build the future of fintech. Powered by Open Source technology. 6 | 7 | Create any type of web application that consumes the Polygon.io API. 8 | 9 | ## User Stories 10 | 11 | - [ ] Fetch data from the Polygon.io API 12 | 13 | ## Useful links and resources 14 | 15 | [Polygon.io Documentation](https://polygon.io/docs/stocks/getting-started) 16 | 17 | ## Example projects 18 | 19 | None 20 | -------------------------------------------------------------------------------- /Projects/1-Beginner/Pomodoro-Clock.md: -------------------------------------------------------------------------------- 1 | # Pomodoro Clock 2 | 3 | **Tier:** 1-Beginner 4 | 5 | The Pomodoro Technique is a time management method developed by Francesco Cirillo in the late 1980s. The technique uses a timer to break down work into intervals, traditionally 25 minutes in length, separated by short breaks - 5 minutes. 6 | 7 | ## User Stories 8 | 9 | - [ ] User can see a timer for 25 minutes - the **working** session 10 | - [ ] After the **working** session is over, the User can see a timer for 5 minutes - the **break** session 11 | - [ ] User can _start_ / _pause_, _stop_ and _reset_ the timers 12 | 13 | ## Bonus features 14 | 15 | - [ ] User can hear a sound playing when the timer hits `00:00` - denoting that the session has ended 16 | - [ ] User can change / customize the minutes in both sessions before starting 17 | - [ ] User can set a **long break** session of 10 minutes. This will be activated every 4th **break** session 18 | 19 | ## Useful links and resources 20 | 21 | - More about the [Pomodoro Technique](https://en.m.wikipedia.org/wiki/Pomodoro_Technique) 22 | 23 | ## Example projects 24 | 25 | - [Joe Weaver's example](https://codepen.io/JoeWeaver/pen/bLbbxK) 26 | - [FreeCodeCamp Pomodoro Clock example](https://codepen.io/freeCodeCamp/full/XpKrrW) 27 | - [A desktop pomodoro app for menubar/tray.](https://github.com/amitmerchant1990/pomolectron) 28 | - [Sheri Richardson's example](https://srd-pomodoro-timer.netlify.com/) 29 | -------------------------------------------------------------------------------- /Projects/1-Beginner/Product-Landing-Page.md: -------------------------------------------------------------------------------- 1 | # Product Landing Page 2 | 3 | **Tier:** 1-Beginner 4 | 5 | Whenever you have a product (or a service) that you want to sell, you'll want to have a website that will promote that product in the best way possible. You need to make sure that the information on the page is relevant, simple to understand and highlights all the awesome features of the product in order to higher the conversion rate. 6 | 7 | Conversion rate - the % of the visitors which purchase the product or service. 8 | 9 | When you have completed this app and the bonus features try leveling up your 10 | skills by expanding it to incorporate the features specified in the 11 | [Simple Online Store](../2-Intermediate/Simple-Online-Store.md). 12 | 13 | ## User Stories 14 | 15 | These will cover the visual part of the project. 16 | 17 | - [ ] User can see on the page one or more images with the product 18 | - [ ] User can see a list with all the features of the product 19 | - [ ] User can see how this product will improve the buyers life. Why should he buy it? 20 | - [ ] User can see a contact section (a text with the email) 21 | 22 | ## Bonus features 23 | 24 | These will cover the functional part of the project. 25 | 26 | - [ ] User can see a FAQ section 27 | - [ ] User can contact the staff members via a contact form 28 | - [ ] User can sign up to receive notifications about the product 29 | - [ ] User can purchase the product 30 | 31 | ## Useful links and resources 32 | 33 | There are plenty of Product Landing Pages out there. You can use [Dribbble](www.dribbble.com) and [Behance](www.behance.net) for inspiration. 34 | 35 | ## Example projects 36 | 37 | - [Netlify](https://www.netlify.com/) 38 | - [Product Landing Page - Codepen](https://codepen.io/l4ci/pen/LoGjk) 39 | -------------------------------------------------------------------------------- /Projects/1-Beginner/Quiz-App.md: -------------------------------------------------------------------------------- 1 | # Quiz App 2 | 3 | **Tier:** 1-Beginner 4 | 5 | Practice and test your knowledge by answering questions in a quiz application. 6 | 7 | As a developer you can create a quiz application for testing coding skills of other developers. (HTML, CSS, JavaScript, Python, PHP, etc...) 8 | 9 | ## User Stories 10 | 11 | - [ ] User can start the quiz by pressing a `button` 12 | - [ ] User can see a question with 4 possible answers 13 | - [ ] After selecting an answer, display the next question to the User. Do this until the quiz is finished 14 | - [ ] At the end, the User can see the following statistics 15 | - Time it took to finish the quiz 16 | - How many correct answers did he get 17 | - A message showing if he `passed` or `failed` the quiz 18 | 19 | ## Bonus features 20 | 21 | - [ ] User can share the result of a quiz on social media 22 | - [ ] Add multiple quizzes to the application. User can select which one to take 23 | - [ ] User can create an account and have all the scores saved in his dashboard. User can complete a quiz multiple times 24 | 25 | ## Useful links and resources 26 | 27 | - [Open Trivia Database](https://opentdb.com/api_config.php) 28 | 29 | ## Example projects 30 | 31 | - [Quiz app built with React](http://tranquil-beyond-43849.herokuapp.com/) (wait for it to load as it is hosted on Heroku) 32 | - [Quiz app interface](https://codepen.io/FlorinPop17/full/qqYNgW) 33 | - [Quiz Progressive Web App built with React](https://github.com/SafdarJamal/quiz-app) 34 | -------------------------------------------------------------------------------- /Projects/1-Beginner/Random-Meal-Generator.md: -------------------------------------------------------------------------------- 1 | # Random Meal Generator 2 | 3 | **Tier:** 1-Beginner 4 | 5 | Generate a random meal from an API. 6 | 7 | ## User Stories 8 | 9 | - [ ] User can click a button that will get a random meal from an external API (see below) 10 | - [ ] The app should display: **Recipe name**, **Ingredients**, **Instructions** and a **Picture** of the meal 11 | - [ ] By clicking the button again, another meal will be generated 12 | 13 | ## Bonus features 14 | 15 | - [ ] The app should display a **YouTube Video** 16 | 17 | ## Useful links and resources 18 | 19 | - [TheMealDB API](https://www.themealdb.com) 20 | 21 | ## Example projects 22 | 23 | - [Random Meal Generator by Florin Pop on Codepen](https://codepen.io/FlorinPop17/full/WNeggor) 24 | - [Random Meal Generator by ShinSpiegel on github](https://github.com/shinspiegel/random-meal-generator) 25 | -------------------------------------------------------------------------------- /Projects/1-Beginner/Random-Number-Generator.md: -------------------------------------------------------------------------------- 1 | # Random-Number-Generator 2 | 3 | **Tier:** 1-Beginner 4 | 5 | Generate a random number between a range of defined minimun and maximun. 6 | 7 | The generator allows the user to use the random property for purposes like games that contains some kind of lottary or for statistics. 8 | 9 | ## User Stories 10 | 11 | - [ ] User can define maximun and minimun values for the random number. 12 | - [ ] User can press the generate button to generate random number. 13 | 14 | ## Bonus features 15 | 16 | - [ ] User can add option for negative values 17 | - [ ] User can add option for decimal numbers 18 | 19 | ## Useful links and resources 20 | 21 | [What's this fuss about true randomness?](https://www.random.org/) 22 | 23 | ## Example projects 24 | 25 | Try not to view this until you've developed your own solution: 26 | 27 | - [Example](https://alonjoshua.github.io/random-number-generator/) 28 | - [Project](https://github.com/AlonJoshua/random-number-generator/) 29 | -------------------------------------------------------------------------------- /Projects/1-Beginner/Recipe-App.md: -------------------------------------------------------------------------------- 1 | # Recipe 2 | 3 | **Tier:** 1-Beginner 4 | 5 | You might not have realized this, but recipe's are nothing more than culinary 6 | algorithms. Like programs, recipes are a series of imperative steps which, 7 | if followed correctly, result in a tasty dish. 8 | 9 | The objective of the Recipe app is to help the user manage recipes in a way 10 | that will make them easy to follow. 11 | 12 | ### Constraints 13 | 14 | - For the initial version of this app the recipe data may be encoded as a 15 | JSON file. After implementing the initial version of this app you may 16 | expand on this to maintain recipes in a file or database. 17 | 18 | ## User Stories 19 | 20 | - [ ] User can see a list of recipe titles 21 | - [ ] User can click a recipe title to display a recipe card containing the 22 | recipe title, meal type (breakfast, lunch, supper, or snack), number of people 23 | it serves, its difficulty level (beginner, intermediate, advanced), the list 24 | of ingredients (including their amounts), and the preparation steps. 25 | - [ ] User click a new recipe title to replace the current card with a new 26 | recipe. 27 | 28 | ## Bonus features 29 | 30 | - [ ] User can see a photo showing what the item looks like after it has 31 | been prepared. 32 | - [ ] User can search for a recipe not in the list of recipe titles by 33 | entering the meal name into a search box and clicking a 'Search' button. Any 34 | open source recipe API may be used as the source for recipes (see The MealDB 35 | below). 36 | - [ ] User can see a list of recipes matching the search terms 37 | - [ ] User can click the name of the recipe to display its recipe card. 38 | - [ ] User can see a warning message if no matching recipe was found. 39 | - [ ] User can click a 'Save' button on the cards for recipes located through 40 | the API to save a copy to this apps recipe file or database. 41 | 42 | ## Useful links and resources 43 | 44 | - [Using Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) 45 | - [Axios](https://www.npmjs.com/package/axios) 46 | - [The MealDB API](https://www.themealdb.com/api.php) 47 | 48 | ## Example projects 49 | 50 | - [Recipe Box - a Free Code Camp Project (FCC)](https://codepen.io/eddyerburgh/pen/xVeJvB) 51 | - [React Recipe Box](https://codepen.io/inkblotty/pen/oxWRme) 52 | -------------------------------------------------------------------------------- /Projects/1-Beginner/Roman-to-Decimal-Converter.md: -------------------------------------------------------------------------------- 1 | # Roman to Decimal numbers Converter 2 | 3 | **Tier:** 1-Beginner 4 | 5 | The numeric system represented by Roman numerals originated in ancient Rome and remained the 6 | usual way of writing numbers throughout Europe well into the Late Middle Ages. 7 | Roman numerals, as used today, employ seven symbols, each with a fixed integer value. 8 | 9 | See the below table the _Symbol - Value_ pairs: 10 | 11 | - I - 1 12 | - V - 5 13 | - X - 10 14 | - L - 50 15 | - C - 100 16 | - D - 500 17 | - M - 1000 18 | 19 | ## User Stories 20 | 21 | - [ ] User should be able to enter one Roman number in an input field 22 | - [ ] User could see the results in a single output field containing the decimal (base 10) equivalent of the roman number that was entered by pressing a button 23 | - [ ] If a wrong symbol is entered, the User should see an error 24 | 25 | ## Bonus features 26 | 27 | - [ ] User could see the conversion to be made automatically as I type 28 | - [ ] User should be able to convert from decimal to Roman (vice-versa) 29 | 30 | ## Useful links and resources 31 | 32 | - [An explanation of Roman Numbers](https://en.wikipedia.org/wiki/Roman_numerals) 33 | 34 | ## Example projects 35 | 36 | Try not to view this until you've developed your own solution: 37 | 38 | - [Roman Number Converter](https://www.calculatorsoup.com/calculators/conversions/roman-numeral-converter.php) 39 | -------------------------------------------------------------------------------- /Projects/1-Beginner/Slider-Design.md: -------------------------------------------------------------------------------- 1 | # Slider Design 2 | 3 | **Tier:** 1-Beginner 4 | 5 | Display multiple images using a slider / carousel. 6 | 7 | ## User Stories 8 | 9 | - [ ] User can see a slider displaying multiple images every `x` seconds 10 | - [ ] User can click on `previous` and `next` buttons and the slider will display the corresponding image 11 | 12 | ## Bonus features 13 | 14 | - [ ] Add animation to the slides 15 | - [ ] Add text over the slides 16 | - [ ] Create a 3D effect 17 | 18 | ## Useful links and resources 19 | 20 | - [Unsplash](https://unsplash.com/) for free images 21 | 22 | ## Example projects 23 | 24 | - [Full Page Slider](https://codepen.io/FlorinPop17/full/LvOroe) 25 | - [WOWSlider](http://wowslider.com/3d-slider-jquery-fresh-cube-demo.html) 26 | -------------------------------------------------------------------------------- /Projects/1-Beginner/Spotify-Api.md: -------------------------------------------------------------------------------- 1 | # Spotify API 2 | 3 | **Tier:** 1-Beginner 4 | 5 | Spotify is a digital music service that gives you access to millions of songs. 6 | 7 | Create any type of web application that consumes the Spotify API. 8 | 9 | ## User Stories 10 | 11 | - [ ] Fetch data from the Spotify API 12 | 13 | ## Useful links and resources 14 | 15 | [Spotify API](https://developer.spotify.com/documentation/web-api/) 16 | 17 | ## Example projects 18 | 19 | None 20 | -------------------------------------------------------------------------------- /Projects/1-Beginner/Stopwatch-App.md: -------------------------------------------------------------------------------- 1 | # Stopwatch App 2 | 3 | **Tier:** 1-Beginner 4 | 5 | A stopwatch helps you track the time you spent on activities. 6 | 7 | ## User Stories 8 | 9 | - [ ] User can `start` a clock 10 | - [ ] User can `stop` the clock 11 | - [ ] When the clock is `stopped` the user can click `start` again and the clock will continue counting up 12 | - [ ] User can `restart` the clock 13 | 14 | ## Bonus features 15 | 16 | - [ ] User can create `laps` - these will be displayed on the screen 17 | - [ ] User can clear all the laps 18 | 19 | ## Useful links and resources 20 | 21 | - [setInterval](https://www.w3schools.com/jsref/met_win_setinterval.asp) 22 | 23 | ## Example projects 24 | 25 | - [Stopwatch by Hilo](https://codepen.io/hilotacker/pen/ONZWoX) 26 | - [Stopwatch by Billy Brown](https://codepen.io/_Billy_Brown/pen/dbJeh) 27 | - [Svelte Stopwatch by Gabriele Corti](https://codepen.io/borntofrappe/pen/KKKPZZg) 28 | -------------------------------------------------------------------------------- /Projects/1-Beginner/True-or-False-App.md: -------------------------------------------------------------------------------- 1 | # TrueOrFalse 2 | 3 | **Tier:** 1-Beginner 4 | 5 | Something every developer needs to clearly understand is the result of 6 | conditional expressions like `x === y`. This is a bit more involved for 7 | Javascript developers who must also understand the concept of _truthiness_. 8 | 9 | TrueOrFalse helps by displaying the result when a conditional operator is 10 | applied to two values. Users can use this to test their knowledge and 11 | explore edge cases. 12 | 13 | The two values and the conditional operator are entered by the user and the 14 | result to be displayed will be TRUE or FALSE. The implementation must not use 15 | the `eval()` function to generate the result of the conditional. 16 | 17 | ## User Stories 18 | 19 | - [ ] User can enter two strings to be compared 20 | - [ ] User can enter a valid Javascript conditional operator to be used to compare the two strings 21 | - [ ] User can see the result of the conditional as TRUE or FALSE 22 | - [ ] User can see a warning if the input strings or conditional operator that has been entered is not valid 23 | 24 | ## Bonus features 25 | 26 | - [ ] User can specify the type of each of the two strings so numbers can be compared to strings, strings to booleans, etc 27 | 28 | ## Useful links and resources 29 | 30 | - [Comparison Operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators) 31 | - [Conditional Javascript for Experts](https://hackernoon.com/conditional-javascript-for-experts-d2aa456ef67c) 32 | - [Truthy and Falsy: When all is not equal in Javascript](https://www.sitepoint.com/javascript-truthy-falsy/) 33 | 34 | ## Example projects 35 | 36 | N/A 37 | -------------------------------------------------------------------------------- /Projects/1-Beginner/Vigenere-Cipher.md: -------------------------------------------------------------------------------- 1 | # Vigenere Cipher 2 | 3 | **Tier:** 1-Beginner 4 | 5 | The rate and impact of security breaches in recent years makes it imperative 6 | that developers understand the methods bad actors use to compromise apps. 7 | Understanding how an app can be compromised is the first step in coming up 8 | with effective protection measures. 9 | 10 | One of the easiest ways bad actors can compromise an app is to access 11 | data that's left unencrypted by the developer. There are a number of strong 12 | encryption algorithms available to ensure that data is not readable even if 13 | access is compromised. These include AES, Blowfish, and TripleDES to name a 14 | few. 15 | 16 | However, these algorithms can be quite complex to implement so the objective 17 | of this app is to implement a classical encryption algorithm, the Vigenere 18 | Cipher to learn the basics of how ciphers work. 19 | 20 | ### Requirements & Constraints 21 | 22 | - Developers should use only native language features to implement the Vigenere 23 | Cipher. Libraries are not allowed. 24 | - Developers should design and implement their own solution using only the 25 | description of the steps in the Vigenere Cipher algorithm. 26 | - After successfully implementing this algorithm Developer should ask 27 | themselves these questions: 28 | - Would you feel confident encrypting your financial information using the 29 | Vigenere Cipher? Why? 30 | - How would you detect that a message had been encrypted using the 31 | Vigenere Cipher? 32 | - How would you go about trying to crack this encryption? 33 | 34 | ## User Stories 35 | 36 | - [ ] User can see the app window with these components: 37 | - Plain text message input field 38 | - Encryption key input field 39 | - Action buttons - 'Encrypt' and 'Decrypt' 40 | - Resulting encrypted or decrypted message 41 | - [ ] User can enter the text to be encrypted in the plain text message input 42 | field 43 | - [ ] User can enter the Encryption key the Vigenere algorithm will use to 44 | encrypt the plain text message. 45 | - [ ] User can click see see the 'Decrypt' button disabled until the plain 46 | text has been encrypted. 47 | - [ ] User can click the 'Encrypt' button to encrypt the plain text message 48 | - [ ] User can see the encrypted message displayed in the result field. 49 | - [ ] User can see the 'Decrypt' button enabled after the encrypted message 50 | has been displayed. 51 | - [ ] User can click the 'Decrypt' button to decrypt the encrypted message 52 | and to display its contents in the result field. 53 | 54 | ## Bonus features 55 | 56 | - [ ] User can see a 'Compare' button after decryption that compares the 57 | original plain text message with the decrypted message 58 | - [ ] User can see an error message if the 'Compare' detects differences 59 | in the contents of these two fields. 60 | 61 | ## Useful links and resources 62 | 63 | - [Bad Actors](http://solutionsreservoir.com/resources/introduction-to-cybersecurity/part-1-cybersecurity-overview) 64 | - [Vigenere Cypher](https://www.geeksforgeeks.org/vigenere-cipher/) 65 | 66 | ## Example projects 67 | 68 | [Vigenere Encryption](https://codepen.io/max1128/pen/VdyJmd) 69 | -------------------------------------------------------------------------------- /Projects/1-Beginner/Weather-App.md: -------------------------------------------------------------------------------- 1 | # Weather App 2 | 3 | **Tier:** 1-Beginner 4 | 5 | A weather application to get the temperature, weather condition and whether it is day or night of a particular city using `accuweather`. A free weather api. 6 | 7 | ## User Stories 8 | 9 | - [ ] Enter the name of a city into the `input` field. 10 | - [ ] By pressing enter, the user submits the name of the city which updates the `DOM` with the temperature, weather condition, image of day or night and weather condition icon. 11 | 12 | ## Bonus features 13 | 14 | - [ ] By closing the browser window the city name will be stored in localStorage and when the user returns, the name will be retrieved to make an api call to update the `DOM`. 15 | 16 | ## Useful links and resources 17 | 18 | - [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) 19 | - [accuweather](https://developer.accuweather.com/) 20 | - [axios](https://github.com/axios/axios) 21 | - [bootstrap](https://getbootstrap.com/) 22 | 23 | ## Example projects 24 | 25 | - [Weather App on Codepen](https://codepen.io/tutsplus/pen/gObLaEP) by [George Martsoukos] 26 | - [Coding A Weather App In Pure JavaScipt](https://www.youtube.com/watch?v=ZPG2wGNj6J4) 27 | -------------------------------------------------------------------------------- /Projects/1-Beginner/Windchill-App.md: -------------------------------------------------------------------------------- 1 | # Windchill 2 | 3 | **Tier:** 1-Beginner 4 | 5 | Windchill combines the actual temperature with the wind speed to calculate 6 | the windchill factor, or what the perceived temperature is versus the actual 7 | temperature. 8 | 9 | ## User Stories 10 | 11 | - [ ] User can select the measurement system calculations will be performed in - Metric or English 12 | - [ ] User can enter the actual temperature and the wind speed 13 | - [ ] User can press the `Calculate` button to display the wind chill 14 | - [ ] User will receive an error message when `Calculate` is clicked if data values are not entered 15 | 16 | ## Bonus features 17 | 18 | - [ ] User will receive an error message when `Calculate` is clicked if the resulting wind chill factor is greater than or equal to the actual temperature. Since this signifies an internal error in the calculation you may also satisfy this requirement using an assertion 19 | - [ ] User will be prompted to enter new data values if `Calculate` is pressed without first changing at least one of the input fields 20 | - [ ] User will see an updated wind chill factor whenever new actual temperature or wind speed values are entered, without being required to click the `Calculate` button 21 | 22 | ## Useful links and resources 23 | 24 | - [Wikipedia Wind Chill](https://en.wikipedia.org/wiki/Wind_chill) 25 | - [JavaScript Assert](https://developer.mozilla.org/en-US/docs/Web/API/console/assert) 26 | 27 | ## Example projects 28 | 29 | [Wind Chill Calculator](http://www.jsmadeeasy.com/javascripts/Calculators/Wind%20Chill%20Calculator/index.htm) 30 | [Svelte Wind Chill Index by Gabriele Corti](https://codepen.io/borntofrappe/pen/WNNrrJg) 31 | -------------------------------------------------------------------------------- /Projects/1-Beginner/Word-Frequency-App.md: -------------------------------------------------------------------------------- 1 | # Word Frequency 2 | 3 | **Tier:** 1-Beginner 4 | 5 | Calculating the frequency of words in a block of text is a technique which has 6 | various uses in algorithms such as searching, sorting, and semantic analysis. 7 | The objective of the Word Frequency app is count the frequency of words in a 8 | block of text and create a tabular display of each unique word in the text 9 | along with its frequency, in descending order by frequency. 10 | 11 | ## User Stories 12 | 13 | - [ ] User can see a text input box, a 'Translate' button, and a word 14 | frequency table. 15 | - [ ] User can enter text (or cut and paste) into the input box. This input 16 | box must allow the entry of large blocks of text (maximum of 2048 characters). 17 | - [ ] User can click the 'Translate' button to analyze the word frequency in 18 | the text that has been input. 19 | - [ ] User can see an error message if the text input box is empty. 20 | - [ ] User can see the word frequency table populated when the 'Translate' 21 | button is clicked. Each row in the table contains a word and the number of times 22 | it occurs in the input text. 23 | - [ ] User can see the word frequency table ordered in descending sequence 24 | by word frequency. 25 | 26 | ## Bonus features 27 | 28 | - [ ] User can see a graphical representation of the word frequency in a 29 | bubble chart, column chart, or any other form of graphical representation the 30 | developer chooses. 31 | - [ ] User may choose to enter the URL of a web page whose content is to be 32 | analyzed instead of manually entering text. (Hint: See the 33 | [Podcast Directory](../2-Intermediate/Podcast-Directory-App.md) application for ideas). 34 | 35 | ## Useful links and resources 36 | 37 | - [Bag of Words Model (Wikipedia)](https://en.wikipedia.org/wiki/Bag-of-words_model) 38 | - [Semantic Analysis (Wikipedia)](https://en.wikipedia.org/wiki/Sentiment_analysis) 39 | 40 | ## Example projects 41 | 42 | - [Word Frequency Counter](https://codepen.io/maxotar/pen/aLrwJM) 43 | - [Bubble Chart](https://codepen.io/Quendoline/pen/pjELpM) 44 | - [Svelte Word Frequency by Gabriele Corti](https://codepen.io/borntofrappe/pen/QWWWqQM) 45 | -------------------------------------------------------------------------------- /Projects/2-Intermediate/Bit-Masks-App.md: -------------------------------------------------------------------------------- 1 | # Bit Masks 2 | 3 | **Tier:** 2-Intermediate 4 | 5 | It's difficult to find an app that doesn't rely on some form of conditional 6 | logic to implement its functionality. This is almost always performed using 7 | statements like: 8 | ``` 9 | if (processAccount === true) { 10 | /* do something */ 11 | } 12 | ``` 13 | If and switch statements work well for a limited number of conditionals, but 14 | what if your app had 10's or 100's of conditionals to evaluate? Luckily, there's 15 | another way. 16 | 17 | The goal of the Bit Masks app is demonstrate how to use bit masks to evaluate 18 | longer sequences of switches without having to rely on long strings of 19 | conditional statements. 20 | 21 | ## User Stories 22 | 23 | - [ ] User can see a vertical list of checkboxes with the following cities 24 | and their timezones: 25 | - Moscow: GMT +3 26 | - Paris: GMT +2 27 | - Berlin: GMT +2 28 | - Brussels: GMT +2 29 | - Amsterdam: GMT +2 30 | - Rome: GMT +2 31 | - London: GMT +1 32 | - Dublin: GMT +1 33 | - New York: GMT -4 34 | - Washington, DC: GMT -4 35 | - St. Louis: GMT -5 36 | - Los Angeles: GMT -7 37 | - Tokyo: GMT +9 38 | - Beijing: GMT +8 39 | - Ho Chi Mihn City: GMT +7 40 | - Mumbai: GMT +5 41 | - [ ] User can see a GMT search box where an integer representing a GMT offset 42 | can be entered into and a 'Find Cities' button. 43 | - [ ] User can click the 'Find Cities' button to display the names of the 44 | cities in that GMT offset in an output area. 45 | 46 | ### Developer Notes 47 | 48 | For this exercise the developer should use sequences of 24 49 | binary bits, each corresponding a GMT time zone from +12 to -12 to map cities 50 | to their timezones. 51 | 52 | Searches should be conducted by combining a bit mask for the desired time zone 53 | against the city-specific bit sequences to identify matches. Determining if a 54 | city meets the search criteria shouldn't rely on a statement such as 55 | ``` 56 | if (city[i].gmtOffset === searchOffset ) { 57 | /* Found it! */ 58 | } 59 | ``` 60 | It should instead rely on a bitwise operation. 61 | 62 | ## Bonus features 63 | 64 | - [ ] User can search for cities NOT in the GMT offset entered in the 65 | search box. 66 | - [ ] User can see a summary count of the number of cities that met the 67 | search criteria. 68 | 69 | ## Useful links and resources 70 | 71 | - [World Time Zones](https://greenwichmeantime.com/time-zone/definition/) 72 | - [Bitwise Operators (MDN)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators) 73 | 74 | ## Example projects 75 | 76 | [Bitwise Operation](https://codepen.io/Lunoware/pen/VBZgQd) 77 | -------------------------------------------------------------------------------- /Projects/2-Intermediate/Book-Finder-App.md: -------------------------------------------------------------------------------- 1 | # Book Finder App 2 | 3 | **Tier:** 2-Intermediate 4 | 5 | Create an application that will allow users to search for books by entering a query (Title, Author, etc). Display the resulting books in a list on the page with all the corresponding data. 6 | 7 | ## User Stories 8 | 9 | - [ ] User can enter a search query into an `input` field 10 | - [ ] User can submit the query. This will call an API that will return an array of books with the corresponding data (**Title**, **Author**, **Published Date**, **Picture**, etc) 11 | - [ ] User can see the list of books appearing on the page 12 | 13 | ## Bonus features 14 | 15 | - [ ] For each item in the list add a link that will send the User to an external site which has more information about the book 16 | - [ ] Implement a Responsive Design 17 | - [ ] Add loading animations 18 | 19 | ## Useful links and resources 20 | 21 | You can use the [Google Books API](https://developers.google.com/books/docs/overview) 22 | 23 | ## Example projects 24 | 25 | [Book Finder](https://book-finder-by-deyl.netlify.com/) 26 | [Search Books](https://booksure.netlify.app/) 27 | -------------------------------------------------------------------------------- /Projects/2-Intermediate/Calculator-CLI.md: -------------------------------------------------------------------------------- 1 | # Calculator CLI 2 | 3 | **Tier:** 2-Intermediate 4 | 5 | Create a basic calculator with addition feature. 6 | 7 | ## User Stories 8 | 9 | - [ ] User can add multiple numbers using `add` command. 10 | - [ ] User can add floating numbers using the `-f` flag. 11 | - [ ] User can add only even/odd numbers using `even`/`odd` sub-command. 12 | - [ ] User can use `--help` or `-h` flag to get all the available commands and flags. 13 | 14 | > Note: The stories 1 and 2 are basically for static typed language, where passed arguments must be of same type. 15 | 16 | ## Bonus Features 17 | 18 | - [ ] User can use all the basic arithmetic operations like (addition, subtraction, multiplication and divison). 19 | - [ ] User can use `--help` or `-h` flag to get the sub-commands of command. 20 | - [ ] **Power of** and **Square Root of** operation. 21 | 22 | ## Useful links and resources 23 | 24 | - [5 keys to create a killer CLI in Go](https://blog.alexellis.io/5-keys-to-a-killer-go-cli/) 25 | - [How to build a CLI tool in NodeJS ?](https://www.freecodecamp.org/news/how-to-build-a-cli-tool-in-nodejs-bc4f67d898ec/) 26 | - [Build a Command Line Interface (CLI) Application with Node.js](https://codeburst.io/build-a-command-line-interface-cli-application-with-node-js-59becec90e28) 27 | - [Building Beautiful Command Line Interfaces with Python](https://codeburst.io/building-beautiful-command-line-interfaces-with-python-26c7e1bb54df) 28 | - [How to create a CLI in golang with cobra](https://schadokar.dev/posts/how-to-create-a-cli-in-golang-with-cobra/) 29 | - [Building a Network Command Line Interface in Go](https://tutorialedge.net/golang/building-a-cli-in-go/) 30 | 31 | ## Example projects 32 | 33 | - [my-calc](https://github.com/schadokar/my-calc) 34 | -------------------------------------------------------------------------------- /Projects/2-Intermediate/Card-Memory-Game.md: -------------------------------------------------------------------------------- 1 | # Card-Memory-Game 2 | 3 | **Tier:** 2-Intermediate 4 | 5 | Card memory is a game where you have to click on a card to see what image is underneath it and try to find the matching image underneath the other cards. 6 | 7 | ## User Stories 8 | 9 | - [ ] User can see a grid with n x n cards (`n` is an integer). All the cards are faced down initially (`hidden` state) 10 | - [ ] User can click a button to start the game. When this button is clicked, a timer will start 11 | - [ ] User can click on any card to unveil the image that is underneath it (change it to `visible` state). The image will be displayed until the user clicks on a 2nd card 12 | 13 | When the User clicks on the 2nd card: 14 | 15 | - [ ] If there is a match, the 2 cards will be eliminated from the game (either hide/remove them or leave them in the `visible` state) 16 | - [ ] If there isn't a match, the 2 cards will flip back to their original state (`hidden` state) 17 | - [ ] When all the matches have been found, the User can see a dialog box showing a Congratulations message with a counter displaying the time it took to finish the game 18 | 19 | ## Bonus features 20 | 21 | - [ ] Use can choose between multiple levels of difficulty (Easy, Medium, Hard). Increased difficulty means: decreasing the time available to complete and/or increasing the number of cards 22 | - [ ] User can see the game statistics (nr. of times he won / he lost, best time for each level) 23 | 24 | ## Useful links and resources 25 | 26 | - [Wikipedia]() 27 | 28 | ## Example projects 29 | 30 | - [Flip - card memory game](https://codepen.io/zerospree/full/bNWbvW) 31 | - [Memory Game](https://jdmedlock.github.io/memorygame/) 32 | - [SMB3 Memory Card Game](https://codepen.io/hexagoncircle/full/OXBJxV) 33 | - [BHMBS - Memory Game](https://barhouum7.github.io/JS-MemoryGame.github.io/) -------------------------------------------------------------------------------- /Projects/2-Intermediate/Chrome-Theme-Extension.md: -------------------------------------------------------------------------------- 1 | # Chrome Theme Extension 2 | 3 | **Tier:** 2-Intermediate 4 | 5 | Build your own customized chrome theme extension. You can also add night light (also known as blue light filter) feature that will automatically turn on during the night time so that user's eye won't get stressed while coding whole night or binge watching netflix 😛 6 | 7 | - How chrome extension work(behind the scenes). 8 | - Basic understanding of HTML/CSS, JS, JSON is required. 9 | 10 | ## User Stories 11 | 12 | - [ ] User can make a theme according to their own personal color preference 13 | - [ ] This will extremely benefit the people suffering from color blindness. 14 | - [ ] User can install and set it as the default theme. 15 | 16 | ## Bonus features 17 | 18 | - [ ] Deploy extension to chrome store 19 | - [ ] Add a toggle button to control the night sight feature manually 20 | - [ ] Create same extension for multiple browsers like firefox, etc. 21 | 22 | ## Useful links and resources 23 | 24 | - [Getting Started](https://developer.chrome.com/extensions/getstarted) 25 | 26 | ## Example projects 27 | 28 | - [chrome-developer-edition-dark](https://github.com/KeenRivals/chrome-developer-edition-dark) 29 | - [Night Shift(BlueLight Filter)](https://chrome.google.com/webstore/detail/night-shiftbluelight-filt/hkjikimiiojjiiffmgngnkefacpbgajl?hl=en) 30 | -------------------------------------------------------------------------------- /Projects/2-Intermediate/Currency-Converter.md: -------------------------------------------------------------------------------- 1 | # Currency Converter 2 | 3 | **Tier:** 2-Intermediate 4 | 5 | A currency converter is used to convert an amount in one currency to its corresponding value in another currency using their current exchange rate, for example it can be used to calculate the value of 100 US Dollars in Euros. Current exchange rates are usually provided by banks and other financial service providers, they also (in some cases) offer free and paid APIs for developers to get current and historical exchange rates between two or more currencies. 6 | 7 | ## User Stories 8 | 9 | - [ ] User can enter up to 9 digits to represent the amount to convert in a source input field 10 | - [ ] User can view a sorted list of available currencies and select the currency to convert from in a source drop-down list 11 | - [ ] User can view a sorted list of available currencies and select the currency to convert to in a destination drop-down list 12 | - [ ] User views the value (rounded to two decimal places) of the source amount converted to the destination currency in a single output field as soon as either the input value, the source currency, or the destination currency is changed. 13 | - [ ] User must be alerted if the input is not a number 14 | 15 | ## Bonus features 16 | 17 | - [ ] User should be able to swap the values of the source and destination drop-down lists on the click of a button 18 | 19 | ## Useful links and resources 20 | 21 | - [Free currency converter API](https://free.currencyconverterapi.com/) 22 | - [XE currency converter](https://www.xe.com/) 23 | - [How to use fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) to fetch data 24 | 25 | ## Example projects 26 | - [Currency Converter](https://acodedoer.github.io/currency-converter/) 27 | - [Currency converter code](https://github.com/acodedoer/currency-converter) 28 | -------------------------------------------------------------------------------- /Projects/2-Intermediate/Drawing-App.md: -------------------------------------------------------------------------------- 1 | # Drawing App 2 | 3 | **Tier:** 2-Intermediate 4 | 5 | Create digital artwork on a canvas on the web to share online and also export as images. 6 | 7 | ## User Stories 8 | 9 | - [ ] User can draw in a `canvas` using the mouse 10 | - [ ] User can change the color 11 | - [ ] User can change the size of the tool 12 | - [ ] User can press a button to clear the `canvas` 13 | 14 | ## Bonus features 15 | 16 | - [ ] User can save the artwork as an image (`.png`, `.jpg`, etc format) 17 | - [ ] User can draw different shapes (`rectangle`, `circle`, `star`, etc) 18 | - [ ] User can share the artwork on social media 19 | 20 | ## Useful links and resources 21 | 22 | - [Learn how to create a Drawing Application using p5js](https://www.florin-pop.com/blog/2019/04/drawing-app-built-with-p5js/) 23 | 24 | ## Example projects 25 | 26 | - [Drawing App by Florin Pop](https://codepen.io/FlorinPop17/full/VNYyZQ) 27 | - [Drawing App by t0mm4rx](https://codepen.io/t0mm4rx/full/dLowvZ) 28 | -------------------------------------------------------------------------------- /Projects/2-Intermediate/Emoji-Translator-App.md: -------------------------------------------------------------------------------- 1 | # Emoji Translator 2 | 3 | **Tier:** 2-Intermediate 4 | 5 | Emojis have become the _lingua franca_ of modern society. They are a fun and 6 | fast way to communicate, but an also extremely expressive mechanism for 7 | communicating emotions and reactions. 8 | 9 | The objective of the Emoji Translator app is to translate text entered by the 10 | user into an equivalent string of emojis, translated from one or more words in 11 | the original text, and words for which there is no corresponding emoji. 12 | 13 | ## User Stories 14 | 15 | - [ ] User can enter a string of words, numbers, and punctuation into a text 16 | box 17 | - [ ] User can click a 'Translate' button to translate words in the entered 18 | text into their corresponding emojis. 19 | - [ ] User can see a warning message if 'Translate' was clicked, but the 20 | input text box was empty or unchanged from the last translation. 21 | - [ ] User can see text elements in the entered text translated to their 22 | equivalent emojis in an output text box. Text elements for which there is no 23 | emoji will be left unchanged. 24 | - [ ] User can click a 'Clear' button to clear the input and output text boxes. 25 | 26 | ## Bonus features 27 | 28 | - [ ] Developer will implement an emoji synonym feature to allow the app to 29 | translate a wider variety of words to emoji. 30 | - [ ] User can select the language the input text is entered from a dropdown 31 | list of languages. 32 | 33 | ## Useful links and resources 34 | 35 | [Full Emoji List v12.0](https://unicode.org/emoji/charts/full-emoji-list.html) 36 | 37 | ## Example projects 38 | 39 | [Emoji Translate](https://emojitranslate.com/) 40 | -------------------------------------------------------------------------------- /Projects/2-Intermediate/FlashCards-App.md: -------------------------------------------------------------------------------- 1 | # FlashCards 2 | 3 | **Tier:** 2-Intermediate 4 | 5 | FlashCards are a time tested technique used by students to review and test 6 | their knowledge on a particular subject. 7 | 8 | This app is based on a knowledge base of questions and answers about a 9 | particular subject and randomly displays a card with the question and multiple 10 | answers. The objective is for the user to select the correct answer(s). 11 | 12 | ## User Stories 13 | 14 | - [ ] User can see a single card, randomly picked from the "deck" displayed 15 | at any point in time 16 | - [ ] User can see a question on the card and a list of four possible answers, 17 | each of which is identified by a letter. 18 | - [ ] User can select an answer by clicking on it 19 | - [ ] User can see an error displayed when the wrong answer is selected 20 | - [ ] User can see a congratulations message when the correct answer is 21 | selected. 22 | - [ ] User can click a 'Next Question' button to display the next flash card. 23 | 24 | ### Additional Info for the Developer 25 | 26 | - For this app the knowledge base of questions and answers should be encoded in 27 | a JavaScript object. 28 | - The possible answers display on each card should be randomly chosen from 29 | other flashcards. 30 | 31 | ## Bonus features 32 | 33 | - [ ] When a User answers a card incorrectly, add the card to an "incorrect" pile. Once the user has gone through the entire deck, go through the incorrect pile until all questions are correct. 34 | - [ ] After the User goes through all the cards, a 'Results' page displays the tallies of 35 | correct and incorrect answers. 36 | - [ ] User can click a 'Shuffle' button to re-randomize the "deck" 37 | 38 | ## Useful links and resources 39 | 40 | The definitive source for HTML/CSS/Javascript is [MDN](https://developer.mozilla.org/en-US/) 41 | 42 | Example Javascript questions and answers can be found at 43 | [Brainscape](https://www.brainscape.com/subjects/javascript). 44 | 45 | ## Example projects 46 | 47 | [Vintage Multiplication Flash Cards](https://codepen.io/NinoLopezTech/pen/vJBMpZ) 48 | -------------------------------------------------------------------------------- /Projects/2-Intermediate/Flip-Art-App.md: -------------------------------------------------------------------------------- 1 | # Flip Art 2 | 3 | **Tier:** 2-Intermediate 4 | 5 | Many developers have found that adding animation to an application is a 6 | useful technique that adds impact to the UI, to make it more appealing to its users, 7 | and to explain complex subject matter. But, as a developer how do you create 8 | these and how do you know what images make effective animations? 9 | 10 | The objective of the Flip Art app is to address both of these needs by 11 | providing a simple way to collect and arrange a set of images into an 12 | animated sequence that can be replayed and adjusted to achieve the desired 13 | impact and effect. 14 | 15 | ### Requirements & Constraints 16 | 17 | Developers should not rely on animation or graphics libraries to implement 18 | this app. Instead, try using vanilla Javascript, CSS, and HTML. 19 | 20 | ## User Stories 21 | 22 | - [ ] User can see the following primary components in the app window: 23 | - Configuration panel containing elements used to tailor the animation 24 | process. 25 | - Operation buttons 26 | - Animation display panel animations will be presented in 27 | 28 | ### Configuration Panel 29 | - [ ] User can see eight thumbnails that will contain individual animation 30 | frames 31 | - [ ] User can see a button under each thumbnail - '+' 32 | - [ ] User can click the '+' button to add a new image to an empty thumbnail 33 | - [ ] User can see a file open dialog when the '+' button is clicked to 34 | allow an `.jpg` image to be loaded into the thumbnail. 35 | - [ ] User can see the '+' button label change to '-' after a thumbnail is 36 | loaded. 37 | - [ ] User can click the '-' button to remove or replace a thumbnail. 38 | - [ ] User can see an 'Transition Speed' slider control. 39 | - [ ] User can adjust the 'Transition Speed' slider from slow to fast to 40 | adjust the transition time between thumbnails in the Animation Display. 41 | 42 | ### Operation Buttons 43 | - [ ] User can see two buttons - 'Clear Configuration' and 'Start Animation' 44 | - [ ] User can see the 'Start Animation' button disabled until at least one 45 | thumbnail has been added via the Configuration Panel. 46 | - [ ] User can click the 'Clear Configuration' button to clear all thumbnails 47 | from the configuration panel. 48 | - [ ] User can click the 'Start Animation' button to begin the Animation 49 | Display panel 50 | - [ ] User can see the 'Start Animation' button label change to 'Stop 51 | Animation' once an animation has been started. 52 | - [ ] User can click the 'Stop Animation' button to halt the animation in 53 | the animation display 54 | - [ ] User can see the 'Stop Animation' button label change to 'Start 55 | Animation' when an animation has been stopped. 56 | 57 | ### Animation Display Panel 58 | - [ ] User can see thumbnails added in the Configuration panel displayed 59 | when theh 'Start Animation' button is clicked. 60 | - [ ] User can see thumbnails transtion from one to the next at the rate 61 | defined by the 'Transition Speed' slider. 62 | 63 | ## Bonus features 64 | 65 | - [ ] User can see the border around the thumbnail in the Configuration Panel 66 | highlighted when that thumbnail is displayed in the Animation Display panel. 67 | - [ ] User can dynamically add any number of thumbnails rather than being 68 | restricted to just eight. 69 | - [ ] User can hear unique sounds associated with modifying thumbnails in the 70 | Configuration Panel. 71 | - [ ] User can see a transition type dropdown in the Configuration Panel to 72 | define the transition effect between thumbnails in the Animation Display - 73 | ease, ease-in, ease-out, ease-in-out 74 | - [ ] User can drag and drop thumbnails to reorder them 75 | - [ ] User can save the animation as a `.gif` file. 76 | 77 | ## Useful links and resources 78 | 79 | - [How to Make Flip Book Animation](https://www.youtube.com/watch?v=Njl-uqnmBGA) 80 | - [CSS Animation (MDN)](https://developer.mozilla.org/en-US/docs/Web/CSS/animation) 81 | - [Using CSS Transitions (MDN)](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions) 82 | - [CSS Transition (MDN)](https://developer.mozilla.org/en-US/docs/Web/CSS/transition) 83 | 84 | ## Example projects 85 | 86 | [FlipAnim](http://flipanim.com/) 87 | -------------------------------------------------------------------------------- /Projects/2-Intermediate/Game-Suggestion-App.md: -------------------------------------------------------------------------------- 1 | 2 | # Game suggestion app 3 | 4 | **Tier:** 2-Intermediate 5 | 6 | An app where users can create polls where voters can suggest any games available on [IGDB](https://www.igdb.com/) to play on a stream or a gaming get-together. IGDB (Internet Game Data Base) has a handy [API](https://www.igdb.com/api) for getting games and implementing some kind of AJAX search for it would be necessary. 7 | 8 | ## User Stories 9 | 10 | - [ ] User can create polls 11 | - [ ] User can vote on polls (add games) 12 | - [ ] User can see the poll results as a top 10 or 5 list of the most voted games 13 | 14 | ## Bonus features 15 | 16 | - [ ] Poll admin can restrict the voting to a certain tag or genre 17 | - [ ] User can login and see their old polls 18 | 19 | ## Useful links and resources 20 | 21 | - [IGDB API documentation](https://api-docs.igdb.com/) 22 | 23 | ## Example projects 24 | 25 | - [Strawpoll, one of the most popular polling apps](https://www.strawpoll.me/) -------------------------------------------------------------------------------- /Projects/2-Intermediate/GitHub-Profiles.md: -------------------------------------------------------------------------------- 1 | # GitHub Profiles 2 | **Tier:** 2-Intermediate 3 | 4 | APIs allow you to use the real world data that drives platforms like GitHub. You can communicate with the remote servers and get data that you can use to build an app. 5 | 6 | In this project you create a search app that uses GitHub API to retrieve user information when a valid username is input. It should display avatar, username, followers count, repository count, top 4 repositories based on forks and stars. 7 | 8 | ## User Stories 9 | 10 | - [ ] User can enter a username 11 | - [ ] User can click on search button to retrieve information 12 | - [ ] User can see the avatar, username, followers and repository count of searched user 13 | - [ ] User can see the top 4 repositories of searched user 14 | - [ ] User should get an alert if the username is not valid 15 | 16 | ## Bonus features 17 | - [ ] User can toggle dark/light mode 18 | - [ ] Selected mode should persist when user comes back to the app again 19 | 20 | ## Useful links and resources 21 | To get the data you need to communicate with GitHub API. you can either 22 | 23 | - [Read Docs](https://developer.github.com/v3/) 24 | - [Check API directly](https://api.github.com/users/chaharshivam) 25 | 26 | To get data from API you can check [fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) in javascript 27 | 28 | ## Example projects 29 | 30 | - [GitHub profiles](https://github-profiles.netlify.app/) ([repo](https://github.com/GabrielNBDS/GitHub-Profiles)) 31 | 32 | - [github-profile-search](https://github-profile-search-272901.web.app/) ([repo](https://github.com/guerra08/github-profile-search)) 33 | -------------------------------------------------------------------------------- /Projects/2-Intermediate/HighStriker-Game.md: -------------------------------------------------------------------------------- 1 | # HighStriker 2 | 3 | **Tier:** 2-Intermediate 4 | 5 | Carnivals and circuses have featured the HighStriker sideshow game since at 6 | least the 1930's. This game consists of a tower with a bell mounted at the top 7 | and a levered platform at the bottom. When the levered platform is struck with 8 | a mallet it causes a puck to travel up a track attached to the tower. 9 | 10 | When the platform is struck the puck travels vertically up the track. If hit 11 | hard enough the puck will ring the bell, signifying a winner. 12 | 13 | The objective of the Highstriker app is to simulate this carnival 14 | game. Instead of physical force to move the puck up the track use an algorithm 15 | of your own design and a random number generator to determine the puck's 16 | speed and the distance it travels. 17 | 18 | ## User Stories 19 | 20 | - [ ] User can see an image of the High Striker tower with the bell at the 21 | top, the levered platform at the bottom and the track connecting the two. 22 | - [ ] User can click the 'Strike!' button under the levered platform to play 23 | the game. 24 | - [ ] User can see the puck travel up the rail. 25 | - [ ] User can hear the bell ring if the puck travels far enough to strike it. 26 | - [ ] User can see a score updated for each click of the 'Strike!' button - 27 | the number of times the bell was struck and the number of attempts. 28 | - [ ] User can click a 'Clear' button to clear the score. 29 | - [ ] User can see a congratulations message when a total of 10 points are 30 | reached. 31 | 32 | ## Bonus features 33 | 34 | - [ ] User can see the bell vibrate when it is struck. 35 | - [ ] User can be awarded points on a scale based on the distance the puck 36 | travels up the track. For example, 1 point for 1/8 to 1/4 distance, 2 points 37 | for 1/4 to 1/2 distance, 3 points for 1/2 to 3/4 distance, 4 points for 3/4 to 38 | the bottom of the bell, and 5 points if the bell is struck. 39 | - [ ] User can hear a sound as the puck travels up the rail. 40 | - [ ] User can hear unique sounds when different points are awarded. 41 | 42 | ## Useful links and resources 43 | 44 | - [HighStriker Game (Wikipedia)](https://en.wikipedia.org/wiki/High_striker) 45 | - [HighStriker Video (YouTube)](https://www.youtube.com/watch?v=1W5jGH4xh1E) 46 | - [Implementing Velocity, Acceleration, and Friction on a Canvas](https://codepen.io/Tobsta/post/implementing-velocity-acceleration-and-friction-on-a-canvas) 47 | 48 | ## Example projects 49 | 50 | N/a 51 | -------------------------------------------------------------------------------- /Projects/2-Intermediate/Image-Scaner.md: -------------------------------------------------------------------------------- 1 | # Image Scanner 2 | 3 | **Tier:** 2-Intermediate 4 | 5 | Create an android and ios app to find phone numbers, email and website links available in a photo and then organise it in the app. 6 | 7 | ## User Stories 8 | 9 | - [ ] User can either click a photo or upload a photo from the gallery 10 | - [ ] Processing is done on the image. 11 | - [ ] If there are any phone numbers, email or web links present in the image then they are listed in the cards properly organized. 12 | - [ ] On tap on the details, an option is provided to save as contact. 13 | - [ ] History of search results are provided in the list view 14 | 15 | ## Bonus features 16 | 17 | - [ ] Provide an option to add tags for each search results. 18 | - [ ] Add search funtionality based on tags 19 | - [ ] Add login and sync the results across multiple devices. 20 | 21 | ## Useful links and resources 22 | 23 | - Use google OCR to read text from the image uploaded. https://cloud.google.com/vision/docs/ocr 24 | - Apply regex to identify the phone number , emails and website links on the text identified from the OCR. 25 | 26 | ## Example projects 27 | 28 | - Android App for text detection - https://github.com/alexzaitsev/ocr-google-vision 29 | -------------------------------------------------------------------------------- /Projects/2-Intermediate/Markdown-Previewer.md: -------------------------------------------------------------------------------- 1 | # Markdown Previewer 2 | 3 | **Tier:** 2-Intermediate 4 | 5 | Convert Github flavored markdown into HTML code. 6 | 7 | ## User Stories 8 | 9 | - [ ] User can enter Github flavored markdown into a `textarea` 10 | - [ ] User can see the resulting `HTML` in another container/box by pressing on a button 11 | 12 | ## Bonus features 13 | 14 | - [ ] User can see the resulting `HTML` updated automatically when the markdown `textarea` is changed 15 | - [ ] When closing the browser window the markdown formatted text will be stored in `localStorage` and when the User returns, the data will be retrieved and displayed 16 | - [ ] User can click a button and the content of the box is saved to the `clipboard` 17 | 18 | ## Useful links and resources 19 | 20 | - [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) 21 | - [Markdown Guide](https://www.markdownguide.org/basic-syntax/) 22 | - [Marked - A markdown parser](https://github.com/markedjs/marked) 23 | - [How to Copy to Clipboard](https://www.w3schools.com/howto/howto_js_copy_clipboard.asp) 24 | 25 | ## Example projects 26 | 27 | - [Markdown Live Preview](https://markdownlivepreview.com/) 28 | -------------------------------------------------------------------------------- /Projects/2-Intermediate/Markdown-Table-Generator.md: -------------------------------------------------------------------------------- 1 | # Markdown Table Generator 2 | 3 | **Tier:** 2-Intermediate 4 | 5 | Create an application that will convert a regular table with data provided by the User (optionally) into a Markdown formatted table. 6 | 7 | ## User Stories 8 | 9 | - [ ] User can create an `HTML table` with a given number of **Rows** and **Columns** 10 | - [ ] User can insert text in each cell of the `HTML table` 11 | - [ ] User can generate a `Markdown formatted table` that will contain the data from the `HTML table` 12 | - [ ] User can preview the `Markdown formatted table` 13 | 14 | ## Bonus features 15 | 16 | - [ ] User can copy the `Markdown formatter table` to the clipboard by pressing a button 17 | - [ ] User can insert a new **Row** or **Column** to a specified location 18 | - [ ] User can delete a **Row** or a **Column** entirely 19 | - [ ] User can align (to the _left_, _right_ or _center_) a **cell**, a **column**, a **row**, or the entire **table** 20 | 21 | ## Useful links and resources 22 | 23 | - [Markdown Guide](https://www.markdownguide.org/) 24 | - [Marked - A markdown parser](https://github.com/markedjs/marked) 25 | - [How to Copy to Clipboard](https://www.w3schools.com/howto/howto_js_copy_clipboard.asp) 26 | 27 | ## Example project 28 | 29 | - [Tables Generator / Markdown Tables](https://www.tablesgenerator.com/markdown_tables) 30 | -------------------------------------------------------------------------------- /Projects/2-Intermediate/Meme-Generator-App.md: -------------------------------------------------------------------------------- 1 | # Meme Generator App 2 | 3 | **Tier:** 2-Intermediate 4 | 5 | Allow users to generate custom memes by adding text over an image. 6 | 7 | ## User Stories 8 | 9 | - [ ] User can upload an image that will appear in a canvas 10 | - [ ] User can add text in the top part of the image 11 | - [ ] User can add text in the bottom part of the image 12 | - [ ] User can select the color of the text 13 | - [ ] User can select the size of the text 14 | - [ ] User can save the resulting meme 15 | 16 | ## Bonus features 17 | 18 | - [ ] User can select the font-family for the text 19 | - [ ] User can share the meme on social media (twitter, reddit, facebook, etc) 20 | - [ ] User can drag the text around and place it wherever he wants on top of the image 21 | - [ ] User can draw shapes on top of the image (circles, rectangles, or free drawing with the mouse) 22 | 23 | ## Useful links and resources 24 | 25 | Working with canvas is made very easy by the [p5js](http://p5js.org/) library. 26 | 27 | ## Example projects 28 | 29 | - [Meme Generator by imgflip](https://imgflip.com/memegenerator) 30 | - [Meme Generator by Niels Vadot](https://codepen.io/ninivert/pen/BpLKRx) 31 | -------------------------------------------------------------------------------- /Projects/2-Intermediate/Name-Generator.md: -------------------------------------------------------------------------------- 1 | # Name generation using Recurrent Neural Networks 2 | 3 | **Tier:** 2-Intermediate 4 | 5 | Name Generation is nothing more than a sequence of letters that follow certain patterns to create a certain probability density for choosing the next letter in a name. 6 | This App should utilize a RNN model with LSTM/GRUs to ensure highly likeable naming patterns 7 | 8 | ## User Stories 9 | 10 | - [ ] User can specify the first 2 to 3 letters to be used for the initial name 11 | - [ ] Use can see the generated name and use it accordingly 12 | 13 | 14 | ## Useful links and resources 15 | 16 | - [RNN for Pokemon names](https://towardsdatascience.com/generating-pok%C3%A9mon-names-using-rnns-f41003143333) 17 | - [RNN for Dinosaur names](https://datascience-enthusiast.com/DL/Dinosaurus_Island_Character_level_language_model.html) 18 | -------------------------------------------------------------------------------- /Projects/2-Intermediate/Password-Generator.md: -------------------------------------------------------------------------------- 1 | # Password Generator 2 | 3 | **Tier:** 2-Intermediate 4 | 5 | Generate passwords based on certain characteristics selected by the user. 6 | 7 | ## User Stories 8 | 9 | - [ ] User can select the length of the generated password 10 | - [ ] User can select one or multiple of the following: `Include uppercase letters`, `Include lowercase letters`, `Include numbers`, `Include symbols` 11 | - [ ] By clicking the `Generate password` button, the user can see a password being generated 12 | - [ ] User can click a `Copy to clipboard` button which will save the password to the clipboard 13 | 14 | ## Bonus features 15 | 16 | - [ ] User can see the password strength 17 | 18 | ## Useful links and resources 19 | 20 | - [Password strength checked - zxcvbn](https://github.com/dropbox/zxcvbn) 21 | 22 | ## Example projects 23 | 24 | - [Password Generator by Florin Pop on Codepen](https://codepen.io/FlorinPop17/full/BaBePej) 25 | - [PasswordGenerator](https://passwordsgenerator.net) 26 | -------------------------------------------------------------------------------- /Projects/2-Intermediate/Podcast-Directory-App.md: -------------------------------------------------------------------------------- 1 | # Podcast Directory 2 | 3 | **Tier:** 2-Intermediate 4 | 5 | A podcast directory is a web application where users' can search and discover podcast shows. Users can easily find podcast episodes and information. 6 | 7 | ## User Stories 8 | 9 | - [ ] User can search for a podcast show. 10 | - [ ] User can view a list of search results of podcast shows that matches their searched keyword. 11 | - [ ] User can select and view a podcast show from the list of search results. 12 | - [ ] User can see the podcast information including podcast name, description, thumbnail, publisher name, genre. 13 | - [ ] User can click on a link that will redirect them to the podcast hosting site where they can view and listen to the podcast episodes. 14 | 15 | ## Bonus features 16 | 17 | - [ ] User can add/remove podcasts from their favourites list. 18 | - [ ] User can filter search results by genre and explicit content 19 | - [ ] Users can sort search results by publishing date 20 | 21 | 22 | ## Useful links and resources 23 | 24 | - [Listen Notes API](https://www.listennotes.com/api/) 25 | - [Podcast Index API](https://podcastindex.org/) 26 | 27 | ## Example projects/websites 28 | 29 | - [Stitcher](https://www.stitcher.com/) 30 | - [Google Podcasts](https://podcasts.google.com/) 31 | - [TuneIn](https://tunein.com/podcasts/) 32 | -------------------------------------------------------------------------------- /Projects/2-Intermediate/QRCode-Badge-App.md: -------------------------------------------------------------------------------- 1 | # QRCode Badge Generator 2 | 3 | **Tier:** 2-Intermediate 4 | 5 | At some point in your career you will probably find yourself involved helping 6 | to coordinate a company-sponsored event or a local technical Meetup. It's not 7 | uncommon in these types of gatherings for attendees to want to exchange contact 8 | information between themselves. 9 | 10 | But how to do that? Attendees could always exchange business cards or write 11 | down each others email or social media account names, but that can be slow and 12 | error prone. Wouldn't it be nice to be able to scan a each others badges to 13 | capture this type of information quickly and more dependably? 14 | 15 | If you answered 'Yes!" to this question then QRCode Badge Generator is an 16 | app you will be interested in creating. The objective of this application is 17 | to collect a meeting attendee's name, email address, Twitter, and GitHub 18 | account names and print a name badge with a QRcode that can be scanned using 19 | a smartphone. 20 | 21 | ### Requirements & Constraints 22 | 23 | - For this app you'll want to use the NPM package 24 | [QRCode Generator](https://www.npmjs.com/package/qrcode-generator) to encode 25 | the information you collect from the attendee in a QR code. 26 | 27 | - To test your implementation you'll need to download a QR code reader onto 28 | your smartphone or tablet. There are many such readers that are free of charge. 29 | Check the app store for your device to find the one that best suites your needs. 30 | 31 | ## User Stories 32 | 33 | - [ ] User can see an input panel containing input fields for the attendee 34 | name, email address, Twitter account name, GitHub account name, and 'Cancel' 35 | and 'Create' buttons. 36 | - [ ] User can enter data into these input fields. Note that attendee name 37 | and email address are required, but the Twitter and GitHub account names are 38 | optional fields. 39 | - [ ] User can click the 'Cancel' button to clear all input fields as well as 40 | the badge panel (see below) if it has been created. 41 | - [ ] User can click the 'Create' button to generated an image of the 42 | attendees name badge. 43 | - [ ] User can see an error message if any of the following are true: 44 | - Required fields are empty 45 | - A first name and last name have not been entered 46 | - Email input field isn't a properly formatted email address 47 | - Twitter account name doesn't start with '@' 48 | - [ ] User can see an badge panel displayed on screen containing this 49 | information, plus a QR code encoded with this information. 50 | 51 | ## Bonus features 52 | 53 | - [ ] User can see a 'Print' button below the badge panel. 54 | - [ ] User can see the 'Print' button enabled only after the input fields 55 | have been validated and the badge is displayed in the badge panel. 56 | - [ ] User can make corrections to the input fields and click 'Create' to 57 | update the contents of the badge panel. 58 | - [ ] User can click the 'Print' button to reproduce the badge panel on a 59 | label or hardcopy. 60 | - [ ] User can see the '@' symbol automatically prepended to the Twitter 61 | account name so it doesn't have to be manually entered. 62 | 63 | ## Useful links and resources 64 | 65 | - [QR code (Wikipedia)](https://en.wikipedia.org/wiki/QR_code) 66 | - [QRCode Generator](https://www.npmjs.com/package/qrcode-generator) 67 | 68 | ## Example projects 69 | 70 | [QRCode Generator](https://kazuhikoarase.github.io/qrcode-generator/js/demo/) 71 | -------------------------------------------------------------------------------- /Projects/2-Intermediate/RegExp-Helper-App.md: -------------------------------------------------------------------------------- 1 | # Regular Expression Helper 2 | 3 | **Tier:** 2-Intermediate 4 | 5 | Regular Expressions should be a valuable part of any developers toolbox. They 6 | provide a concise way to describe a pattern that can be used to test, search, 7 | match, replace, or split the contents of a 8 | string. Regular Expressions provide functionality you might otherwise have to 9 | implement using loops and more lines of code. 10 | 11 | The Regular Expression Helper helps you learn more about Regular Expressions 12 | by building a useful tool you'll also be able to use to test expressions 13 | you use in your apps. 14 | 15 | ## User Stories 16 | 17 | - [ ] User can enter a regular expression. 18 | - [ ] User can enter a string the regular expression can be run against. 19 | - [ ] User can click a 'Run' button to test 20 | - [ ] User can see a warning message if no regular expression was entered. 21 | - [ ] User can see a warning message if no string was entered. 22 | - [ ] User can see the matching text highlighted indicating if `test()` was able to locate the pattern in the string. 23 | - [ ] User can see a message if none of the text was matched. 24 | 25 | ## Bonus features 26 | 27 | - [ ] User can select the flags (like 'g') to be used in the regular expression from a dropdown - global, case insensitive, multiline, sticky. 28 | - [ ] User can select the RegExp function to be applied from a dropdown - test, search, or match 29 | - [ ] User can see a message indicating the result of the selected RegExp function. 30 | - [ ] Developer can run automated tests using a testing framework such as 31 | [Jest](https://jestjs.io/) 32 | 33 | ## Useful links and resources 34 | 35 | - [Javascript RegExp](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp) 36 | - [Regular Expressions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions) 37 | 38 | ## Example projects 39 | 40 | - [RegExr](https://regexr.com/) 41 | - [Regular Expressions 101](https://regex101.com/) 42 | -------------------------------------------------------------------------------- /Projects/2-Intermediate/Sales-DB-App.md: -------------------------------------------------------------------------------- 1 | # Sales Reciepts 2 | 3 | **Tier:** 2-Intermediate 4 | 5 | In the [First DB App](../1-Beginner/First-DB-App.md) you were able to learn the basics of 6 | how to use the IndexedDB database that's built into the browser. In Sales 7 | Reciepts you'll take this a step further by creating an app that records 8 | point of sales receipts, presumably for subsequent balancing against cash in 9 | the stores cash register. 10 | 11 | The objective of Sales Receipts is to implement point-of-sale functionality for 12 | a merchant and to make a record of all sales in a database. 13 | 14 | ### Requirements & Constraints 15 | 16 | - Developer should implement this app as a frontend application that uses the 17 | IndexedDB database in the browser to record all sales receipts. 18 | 19 | - Developer may implement the inventory of items available for sale as an 20 | array of objects in the application source. Each item should be defined with 21 | the following attributes: 22 | - Item number (unique) 23 | - Description 24 | - Unit price 25 | 26 | - Developer should use her UI/UX skills to create a pleasant and efficient 27 | window layout that makes it easy for the user to purchase items and display 28 | purchase history. 29 | 30 | - The primary use case for a browser based database is to maintain state or 31 | status information that needs to persist across sessions, or as a work area for 32 | temporary data. For example, data retrieved from a server that must be 33 | reformatted or cleansed before it's presented to the user. 34 | 35 | - It is important to keep in mind that since the client-side browser environment 36 | cannot be secured you should not maintain any confidential or personal 37 | identifying information (PII) in a browser based database. 38 | 39 | ## User Stories 40 | 41 | - [ ] User can see an purchase panel containing buttons for each item containing 42 | the item number, description, and unit price, as well as a 'Clear' and a 43 | 'Checkout' button. 44 | - [ ] User can click an item button to make a purchase. 45 | - [ ] User can see an field displaying the total sale amount incremented as 46 | items are purchased. 47 | - [ ] User can see a reciept panel displaying the date and time of the sale, 48 | as well as all items selected for purchase. This includes the item number, 49 | description, and unit price. 50 | - [ ] User can click the 'Clear' button to clear all purchases at any time 51 | before checking out. 52 | - [ ] User can click the 'Checkout' button to complete purchase all selected 53 | items. The final total purchase amount will be added to the end of the reciept 54 | panel and all selected items will be added to the database. 55 | - [ ] User can see the receipt panel cleared after all items have been added 56 | to the database. 57 | - [ ] User can see a 'Daily Sales' and a 'Clear All' button at the bottom of 58 | the app window. 59 | - [ ] User can click the 'Daily Sales' button to display all items purchased 60 | by all customers in the receipt panel along with the total of them all. 61 | - [ ] User can click the 'Clear All' button to clear the receipt panel and 62 | delete the record of all purchases from the database. 63 | 64 | ## Bonus features 65 | 66 | - [ ] User can see an thumbnail image of the items on the item buttons. 67 | - [ ] User can see the 'Clear' button replaced by 'Clear Entry' and 'Cancel 68 | All' buttons under the purchase panel 69 | - [ ] User can click the 'Clear Entry' button to clear the last selected item 70 | from the receipt panel. This has the effect of unselecting that item. 71 | - [ ] User can click the 'Cancel All' button to clear all purchases made 72 | before checking out. 73 | - [ ] User can see an input field in the input panel the user may enter the 74 | name of the customer into when a purchase is made. The customer name will be 75 | added to all items purchased by that customer in the receipt panel and in the 76 | rows added to the database. 77 | 78 | ## Useful links and resources 79 | 80 | - [IndexedDB Concepts (MDN)](http://tinyw.in/7TIr) 81 | - [Using IndexedDB (MDN)](http://tinyw.in/w6k0) 82 | - [IndexedDB API (MDN)](http://tinyw.in/GqnF) 83 | - [IndexedDB Browser Support](https://caniuse.com/#feat=indexeddb) 84 | 85 | ## Example projects 86 | 87 | - N/a 88 | -------------------------------------------------------------------------------- /Projects/2-Intermediate/Simple-Online-Store.md: -------------------------------------------------------------------------------- 1 | # Simple Online Store 2 | 3 | **Tier:** 2-Intermediate 4 | 5 | In the [Product Landing Page](../1-Beginner/Product-Landing-Page.md) project you implemented 6 | a landing page to provide your users with information about a product and to 7 | hopefully increase your sites conversion rate. 8 | 9 | The goal of the Simple Online Store is to give your users the capability of 10 | selecting a product to purchase, viewing purchase information, adding it to 11 | an online shopping cart, and finally, actually purchasing the products in the 12 | shopping cart. 13 | 14 | ### Constraints 15 | 16 | - Starting out you may implement your product inventory as an array of 17 | Javascript objects if you are developing in Javascript. For other languages 18 | feel free to choose the in memory solution of your choice. 19 | 20 | ## User Stories 21 | 22 | - [ ] User can click on a `View Products` button on the Landing Page to 23 | display the Products Page. 24 | - [ ] User can see a card on the Products Page for each 25 | Product showing the product thumbnail, name, price, a short description, 26 | and a `Select` button. 27 | - [ ] User can see a Product Details page displayed when the `Select` button 28 | is clicked showing the same information from the product card, but also a 29 | unique product id, a long description, `Add to Cart` button, and a 30 | `See More Products` button. 31 | - [ ] User can see a confirmation message when the product is added to the 32 | shopping cart. 33 | - [ ] User can click on the `See More Products` page to return to the 34 | Products Page. 35 | - [ ] User can see a `Shopping Cart` button on both the Landing 36 | Page or the Products Page. Hint: a top bar might be a good common location 37 | for this button. 38 | - [ ] User can click on the `Shopping Cart` button to display the Shopping 39 | Cart page containing the product id, name, price, and quantity 40 | ordered input box for each product previously added to the Shopping Cart. 41 | - [ ] User can see a total purchase amount on the Shopping Card that is 42 | calculated as the sum of the quantities multiplied by the unit price for each 43 | product ordered. 44 | - [ ] User can adjust the quantity ordered for any product to adjust the 45 | total purchase amount. 46 | - [ ] User can click a `Place Order` button on the Shopping Cart Page to 47 | complete the order. User will see a confirmation number when the order has been 48 | placed. 49 | - [ ] User can click a `Cancel Order` button on the Shopping Cart Page to 50 | cancel the order. User will see the product quantities and the total purchase 51 | amount reset to zero. 52 | - [ ] User can click a `See More Products` button on the Shopping Cart Page 53 | to return to the Products Page. If the order hasn't been placed yet this will 54 | not clear the products that have already been added to the Products Page. 55 | 56 | ## Bonus features 57 | 58 | - [ ] User can see an error message if the quantity ordered exceeds the 59 | "on hand" quantity of the product. 60 | - [ ] User can specify a bill to and ship to address when the order is 61 | placed from the Shopping Cart Page 62 | - [ ] User can see shipping charges added to the total purchase amount 63 | - [ ] User can see sales taxes added to the total purchase amount 64 | - [ ] Developer will implement the product inventory in an external file or 65 | a database. 66 | 67 | ## Useful links and resources 68 | 69 | There are plenty of eCommerce Site Pages out there. You can use [Dribbble](https://www.dribbble.com) and [Behance](https://www.behance.net) for inspiration. 70 | 71 | ## Example projects 72 | 73 | - [eCommerce Animations](https://codepen.io/RSH87/pen/RagqEv) 74 | 75 | -------------------------------------------------------------------------------- /Projects/2-Intermediate/Sports-Bracket-Generator.md: -------------------------------------------------------------------------------- 1 | # Sports Bracket Generator 2 | 3 | **Tier:** 2-Intermediate 4 | 5 | Whether your main sport is soccer, baseball, cricket, or competitive 6 | Esports following the progress of your favorite team during tournaments is an 7 | activity enjoyed by many. 8 | 9 | Tracking team progress is traditionally done using a horizontal tree diagram 10 | showing all of the initial matches on the lefthand side. At the end of each 11 | match the winner advances to the next round in the tournament along with the 12 | winner of the adjacent match. Columns in the diagram are used to represent 13 | each round and contain one-half of the teams in the adjacent column on the left 14 | and twice as many teams as the adjacent column to the right. The number of 15 | teams in each column decreases from left to right until the last round 16 | (column) contains the final winner in the tournament. 17 | 18 | The SportsBracket Generator automates the process of creating this type of chart by 19 | drawing it in a browser window to relieve the user from having to draw it by 20 | hand. 21 | 22 | ## User Stories 23 | 24 | - [ ] User can enter the name of the tournament 25 | - [ ] User can enter the starting and ending dates of the tournament 26 | - [ ] User can enter the number of teams competing in the tournament 27 | - [ ] User can see a warning if either the starting or ending date is 28 | invalid 29 | - [ ] User can see a warning if an odd number of competing teams is entered 30 | 31 | ## Bonus features 32 | 33 | - [ ] User can enter the competing team names for each match 34 | - [ ] User can enter the date for each match 35 | - [ ] User can enter the final score for each match 36 | - [ ] User can expect that this data will persist across sessions 37 | 38 | ## Useful links and resources 39 | 40 | - [Bracket (tournament)](https://en.wikipedia.org/wiki/Bracket_(tournament)) 41 | 42 | ## Example projects 43 | 44 | - [Pure CSS & DOM Sports Bracket](https://codepen.io/cbleslie/pen/ZOLLXg) 45 | - [Responsive Sports Bracket](https://codepen.io/MrCaseiro/pen/bxJpwV) 46 | -------------------------------------------------------------------------------- /Projects/2-Intermediate/String-Art.md: -------------------------------------------------------------------------------- 1 | # StringArt 2 | 3 | **Tier:** 2-Intermediate 4 | 5 | The purpose of String Art is to provide the developer with practice creating a 6 | simple animated graphic, using geometry in the animation algorithm, and 7 | creating something that's visually pleasant to watch. 8 | 9 | String Art draws a single multicolored line which smoothly moves until one 10 | end touches a side of the enclosing window. At the point it touches a "bounce" 11 | effect is applied to change it's direction. 12 | 13 | A ripple effect is created by only retaining 10-20 images of the line as it 14 | moves. Older images are progressively faded until they disappear. 15 | 16 | Animation libraries are not allowed. Use only Vanilla HTML/CSS/JavaScript. 17 | 18 | ## User Stories 19 | 20 | - [ ] Start by drawing a multicolored line at a random position within the boundary of it's enclosing window 21 | - [ ] Each 20ms draw a new copy of the line at a new position based on a trajectory - the incremental distance from the previous line based on the endpoints 22 | - [ ] When either endpoint of the line touches the boundary of the enclosing window change it's direction and randomly alter its angle 23 | - [ ] Progressively fade the intensity of old lines so that only the most recent 10-20 lines are visible to create the sense of movement or "ripple" 24 | 25 | ## Bonus features 26 | 27 | - [ ] User can specify the length of the line and it's velocity 28 | - [ ] User can specify the multiple lines within the window, all moving along different trajectories and velocities 29 | 30 | ## Useful links and resources 31 | 32 | - [Using Multistep Animations & Transitions](https://css-tricks.com/using-multi-step-animations-transitions/) 33 | - [Animation Basics](https://www.khanacademy.org/computing/computer-programming/programming/animation-basics/a/what-are-animations) 34 | 35 | ## Example projects 36 | 37 | This project is very close, but has a small enclosing window and is monochromatic. 38 | [Daniel Cortes](https://codepen.io/dgca/pen/dpxreO) 39 | -------------------------------------------------------------------------------- /Projects/2-Intermediate/This-or-That-Game.md: -------------------------------------------------------------------------------- 1 | # This or That Game 2 | 3 | **Tier:** 2-Intermediate 4 | 5 | A game in which the user can select their favorite image between two choices. 6 | 7 | **Note**: `image`s - might be dogs (as in the example below), cats, cars, houses, pretty much anything. 8 | 9 | ## User Stories 10 | 11 | - [ ] User can see two images 12 | - [ ] User can select it's favorite from the two images 13 | - [ ] After a selection is made, other 2 images are displayed 14 | 15 | ## Bonus features 16 | 17 | - [ ] Add a smooth animation when switching between images 18 | - [ ] Save the votes in a database 19 | - [ ] Add a leaderboard in which the user can see the top 10 voted images 20 | 21 | ## Useful links and resources 22 | 23 | - [Public APIs](https://github.com/public-apis/public-apis) - access to a lot of Public APIs 24 | 25 | ## Example projects 26 | 27 | - [This or That (w/ dogs) by Florin Pop on Codepen](https://codepen.io/FlorinPop17/full/rNBRYKZ) 28 | -------------------------------------------------------------------------------- /Projects/2-Intermediate/Timezone-Slackbot.md: -------------------------------------------------------------------------------- 1 | # Timezone Slackbot - TZ 2 | 3 | **Tier:** 2-Intermediate 4 | 5 | Team members often need to find out each others timezone as the first step 6 | in finding times for meetings and pair programming sessions. To help with this 7 | the Timezone Slack bot accepts as list of Slack user names and displays the 8 | the timezone for each user in a stacked format as follows: 9 | 10 | ``` 11 | -12 -11 -10 -9 -8 -7 -6 -5 -4 -3 -2 -1 0 +1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 12 | Fred X 13 | Nisha X 14 | Ming X 15 | . 16 | . 17 | . 18 | ``` 19 | 20 | Note that this format is provided for descriptive purposes only. When 21 | implemented a more pleasing and user-friendly format may be used. 22 | 23 | ## User Stories 24 | 25 | - [ ] User can enter `/tz ...` to display tabular representation showing each users timezone 26 | - [ ] User can see information displayed using alternate row colors to increase clarity and readability 27 | 28 | ## Bonus features 29 | 30 | - [ ] User can see the persons timezone displayed next to their name. For example, 'IST' for India Standard Time 31 | 32 | ## Useful links and resources 33 | 34 | More information about timezones can be found [here](https://www.timeanddate.com/time/current-number-time-zones.html) 35 | 36 | ## Example projects 37 | 38 | [Quickly Determine What Country and Time Zone Your Coworkers Are in This Week Using This Tool](https://lifehacker.com/quickly-determine-what-country-and-time-zone-your-cowor-1833011887) 39 | -------------------------------------------------------------------------------- /Projects/2-Intermediate/To-Do-App.md: -------------------------------------------------------------------------------- 1 | # To-Do App 2 | 3 | **Tier:** 2-Intermediate 4 | 5 | The classic To-Do application where a user can write down all the things he wants to accomplish. 6 | 7 | ## User Stories 8 | 9 | - [ ] User can see an `input` field where he can type in a to-do item 10 | - [ ] By pressing enter (or a button), the User can submit the to-do item and can see that being added to a list of to-do's 11 | - [ ] User can mark a to-do as `completed` 12 | - [ ] User can remove a to-do item by pressing on a button (or on the to-do item itself) 13 | 14 | ## Bonus features 15 | 16 | - [ ] User can edit a to-do 17 | - [ ] User can see a list with all the completed to-do's 18 | - [ ] User can see a list with all the active to-do's 19 | - [ ] User can see the date when he created the to-do 20 | - [ ] When closing the browser window the to-do's will be stored and when the User returns, the data will be retrieved 21 | 22 | ## Useful links and resources 23 | 24 | - [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) 25 | 26 | ## Example projects 27 | 28 | - [Todo App built with React](http://todomvc.com/examples/react/#/) 29 | - [To Do List on Codepen](https://codepen.io/yesilfasulye/pen/eJIuF) by [Burak Kaya](https://codepen.io/yesilfasulye/) 30 | - [Todo App in Plain JavaScript](https://safdarjamal.github.io/todo-app/) 31 | - [Todo App in Golang](https://github.com/schadokar/go-to-do-app) 32 | -------------------------------------------------------------------------------- /Projects/2-Intermediate/Typing-Practice-App.md: -------------------------------------------------------------------------------- 1 | # Typing Practice 2 | 3 | **Tier:** 2-Intermediate 4 | 5 | Some things are so obvious they can be easily overlooked. As a developer 6 | your ability to type quickly and accurately is one factor that influences 7 | your development productivity. The objective of the Typing Practice app is 8 | to provide you with typing practice along with metrics to allow you to 9 | measure your progress. 10 | 11 | Typing practice displays a word which you must then type within a specific 12 | interval of time. If the word is incorrectly typed it stays on 13 | screen and the time interval remains the same. But when the word is correctly 14 | typed a new word is displayed and the time interval is slightly reduced. 15 | 16 | Hopefully, this repetitive practice will help you improve both your typing 17 | speed and accuracy. 18 | 19 | ## User Stories 20 | 21 | - [ ] User can see the time interval words must be typed in displayed in 22 | the app window. 23 | - [ ] User can see the number of successful attempts and the number of total 24 | attempts in a score box. 25 | - [ ] User can click a 'Start Practice' button to start the practice session. 26 | - [ ] User can see the prompt word displayed in a text box. 27 | - [ ] User can begin typing the word in a text input box. 28 | - [ ] User can see the letters that have been typed flash if an incorrect 29 | letter is entered and the text input box will be cleared. 30 | - [ ] User can see the a message adjacent to the text input box indicating 31 | the user should try again if an incorrect letter is entered. 32 | - [ ] User can see the number of total attempts incremented in the score box. 33 | - [ ] User can see a congratulations message if the word is correctly typed. 34 | - [ ] User can see the time interval words must be typed decremented by a 35 | small amount if the word is correctly typed. 36 | - [ ] User can see the number of successful attempts incremented in the score 37 | box if the word was correctly typed. 38 | - [ ] User can click a 'Stop Practice' button to stop the practice session. 39 | 40 | ## Bonus features 41 | 42 | - [ ] User can hear a unique audible tone signalling when a new word is 43 | displayed, a word is correctly entered, or an incorrect letter is typed in 44 | the word. 45 | - [ ] User can login to the app 46 | - [ ] User can see cumulative performance statistics across all of his/her 47 | practice sessions. 48 | 49 | ## Useful links and resources 50 | 51 | - [keydown](https://developer.mozilla.org/en-US/docs/Web/Events/keydown) 52 | - [setInterval](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval) 53 | 54 | ## Example projects 55 | 56 | [Twiddler Typing Tutor](http://twiddler.tekgear.com/tutor/twiddler.html) 57 | -------------------------------------------------------------------------------- /Projects/2-Intermediate/Voting-App.md: -------------------------------------------------------------------------------- 1 | # Voting App 2 | 3 | **Tier:** 2-Intermediate 4 | 5 | Allow users to vote give multiple choices 6 | 7 | ## User Stories 8 | 9 | - [ ] User can see a list of items he can vote on 10 | - [ ] These items must have a button that the user can click on to vote 11 | - [ ] After the user clicked a button, the user should see all the votes 12 | 13 | ## Bonus features 14 | 15 | - [ ] Store items and votes in a database 16 | - [ ] Only allow authenticated users to vote 17 | 18 | ## Useful links and resources 19 | 20 | - [Firebase](https://firebase.google.com) for a realtime database 21 | 22 | ## Example projects 23 | 24 | - [Voting App by Florin Pop on Codepen](https://codepen.io/FlorinPop17/full/NWKQWmq) 25 | -------------------------------------------------------------------------------- /Projects/2-Intermediate/math-editor.md: -------------------------------------------------------------------------------- 1 | # Math Formula Editor 2 | 3 | **Tier:** 2-Intermediate 4 | 5 | An app (desktop or web) which you can use to edit different kinds of math formulas. The app will be particularry useful for doing your math homework digitally. 6 | 7 | The app will probably use a math markup system such as LaTeX. 8 | 9 | ## User Stories 10 | 11 | - [ ] User can write to a text document 12 | - [ ] User can add a math formula to that text document 13 | - [ ] User can save the document either to a database or as a file locally 14 | - [ ] User can load the file and all the formulas should be still intact 15 | 16 | ## Bonus features 17 | 18 | - [ ] User can change the font size of text 19 | - [ ] User can change other attributes of text (color, bold, etc.) 20 | - [ ] User can add images to the document 21 | 22 | ## Useful links and resources 23 | 24 | - [Mathquill](http://mathquill.com/) 25 | 26 | ## Example projects 27 | 28 | - [L'math, a math editor for finnish high school students, change the language on the top left corner](https://www.lehtodigital.fi/lmath/?p=download) 29 | - [Online demo of a simple math editor](https://math-demo.abitti.fi) 30 | -------------------------------------------------------------------------------- /Projects/3-Advanced/Battleship-Bot.md: -------------------------------------------------------------------------------- 1 | # Battleship Bot 2 | 3 | **Tier:** 3-Advanced 4 | 5 | Battleship Bot takes the [Battleship Game Engine](./Battleship-Game-Engine.md) 6 | to the next level. This challenge uses your Battleship Game Engine to create a 7 | presentation layer using Discord's bot API to allow you to play the game 8 | via a Discord chat. 9 | 10 | ## User Stories 11 | 12 | - [ ] User can display game rules by entering `bb help` into the chat window. 13 | - [ ] User can start a game by entering `bb start` into the chat 14 | - [ ] User can target a cell by entering `bb shoot r,c` into the chat window, where `r` and `c` are the row and column coordinates of the cell to be targeted. 15 | - [ ] User can see the game board showing hits and misses displayed by the bot after each shot is taken 16 | - [ ] User can see a congratulations message after the shot that sinks the last remaining ship. 17 | 18 | ## Bonus features 19 | 20 | - [ ] User can surrender a game by entering `bb surrender` in the chat window. 21 | - [ ] User can see a card containing a graphical representation of the hits and misses rather than a simple 2D table of characters. 22 | 23 | ## Useful links and resources 24 | 25 | - [Battleship Game Engine](./Battleship-Game-Engine.md) 26 | - [How to Create a Discord Bot Under 15 Minutes](https://medium.freecodecamp.org/how-to-create-a-discord-bot-under-15-minutes-fb2fd0083844) 27 | - [Using Embeds in Messages](https://anidiots.guide/first-bot/using-embeds-in-messages) 28 | - [Discord Developer Portal](https://discordapp.com/developers/docs/intro) 29 | 30 | ## Example projects 31 | 32 | - [Gamebot(Battleship)](https://repl.it/talk/challenge/GameBot-Battleship/8813) 33 | -------------------------------------------------------------------------------- /Projects/3-Advanced/Battleship-Game-Engine.md: -------------------------------------------------------------------------------- 1 | # Battleship Game Engine 2 | 3 | **Tier:** 3-Advanced 4 | 5 | Battleship is a strategy type guessing game for two players. It is played on ruled grids (paper or board) on which each player's fleet of warships are marked. The locations of the fleets are concealed from the other player. Players alternate turns calling "shots" at the other player's ships, and the objective of the game is to destroy the opposing player's fleet. 6 | 7 | Before play begins, each player secretly arranges their ships on their primary grid. Each ship occupies a number of consecutive squares on the grid, arranged either horizontally or vertically. The number of squares for each ship is determined by the type of ship. The ships cannot overlap (i.e., only one ship can occupy any given square in the grid). The types and numbers of ships allowed are the same for each player. These may vary depending on the rules. The ships should be hidden from players sight and it's not allowed to see each other's pieces. The game is a discovery game which players need to discover their opponents ship positions. 8 | 9 | This challenge is for you to create a Battleship game that allows the user to play against a computer. 10 | 11 | ## User Stories 12 | 13 | ### BGE 14 | 15 | - [ ] User can invoke a `startGame()` function to begin a 1-player game. This function will generate an 8x8 game board consisting of 3 ships having a width of one square and a length of: 16 | 17 | - Destroyer: 2 squares 18 | - Cruiser: 3 squares 19 | - Battleship: 4 squares 20 | 21 | `startGame()` will randomly place these ships on the board in any direction and will return an array representing ship placement. 22 | 23 | - [ ] User can invoke a `shoot()` function passing the target row and column coordinates of the targeted cell on the game board. `shoot()` will return indicators representing if the shot resulted in a hit or miss, the number of ships left (i.e. not yet sunk), the ship placement array, and an updated hits and misses array. 24 | 25 | Cells in the hits and misses array will contain a space if they have yet to be targeted, `O` if they were targeted but no part of a ship was at that location, or `X` if the cell was occupied by part of a ship. 26 | 27 | ### Text-based Presentation Layer 28 | 29 | - [ ] User can see the hits and misses array displayed as a 2 dimensional character representation of the game board returned by the `startGame()` function. 30 | - [ ] User can be prompted to enter the coordinates of a target square on the game board. 31 | - [ ] User can see an updated hits and misses array display after taking a shot. 32 | - [ ] User can see a message after each shot indicating whether the shot resulted in a hit or miss. 33 | - [ ] User can see an congratulations message after the shot that sinks the last remaining ship. 34 | - [ ] User can be prompted to play again at the end of each game. Declining to play again stops the game. 35 | 36 | ## Bonus features 37 | 38 | ### BGE 39 | 40 | - [ ] Additional ships: Carrier: 5 squares, Submarine: 3 squares. 41 | - [ ] User can manually place their objects(ships) in desired location. 42 | - [ ] User can specify the number of rows and columns in the game board as a parameter to the `startGame()` function. 43 | - [ ] User can invoke a `gameStats()` function that returns a Javascript object containing metrics for the current game. For example, number of turns played, current number of hits and misses, etc. 44 | - [ ] User can specify the number of players (1 or 2) when calling `startGame()` which will generate one board for each player randomly populated with ships. 45 | 46 | `shoot()` will accept the player number the shot is being made for along with the coordinates of the shot. The data it returns will be for that player. 47 | 48 | ### Text-based Presentation Layer 49 | 50 | - [ ] User can see the current game statics at any point by entering the phrase `stats` in place of target coordinates. (Note that this requires the `gameStats()` function in the BGE) 51 | - [ ] User can specify a two player game is to be played, with each player alternating turns in the same terminal session (Note that this requires corresponding Bonus Features in the BGE) 52 | - [ ] User can see the player number in prompts associated with the inputs in each turn. 53 | - [ ] User can see both players boards at the end of each turn. 54 | 55 | ## Useful links and resources 56 | 57 | - [Battleship Game (Wikipedia)]() 58 | - [Battleship Game Rules (Hasbro)](https://www.hasbro.com/common/instruct/battleship.pdf) 59 | 60 | ## Example projects 61 | 62 | This YouTube video shows how a text-based [Battleship Game](https://www.youtube.com/watch?v=TKksu3JXTTM) is played. 63 | 64 | The following example is provided as a demonstration of the Battleship game if it is unfamiliar to you. Remember you are to implement a text based presentation layer for testing. 65 | 66 | - [Battleship Game by Chris Brody](https://codepen.io/CodifyAcademy/pen/ByBEOz) 67 | -------------------------------------------------------------------------------- /Projects/3-Advanced/Boole-Bot-Game.md: -------------------------------------------------------------------------------- 1 | # Boole Bots Game 2 | 3 | **Tier:** 3-Advanced 4 | 5 | Boole Bots is a game that is not only fun, but also an aid in helping to 6 | understand basic Boolean logic. This game has an arena of 8x8 game tiles in 7 | which your bots move at random speeds and trajectories. The Bots are assigned 8 | boolean values of 0 or 1 and boolean operations - AND, OR, NOR, NOT. 9 | 10 | When a bot collides with another bot its boolean operation is applied to both 11 | it and the other bots' boolean value to determine which one wins or looses, or 12 | if the collision results in a tie. Loosing bots disappear and winning bots 13 | continue moving about the arena until only one remains. 14 | 15 | ### Requirements & Constraints 16 | 17 | - Developers may use graphics and game physics libraries to build the game. 18 | 19 | ## User Stories 20 | 21 | - [ ] User can see the game window with these components 22 | - Game configuration input panel 23 | - Leaderboard showing bots ranked by their scores 24 | - Game controls 25 | - Arena of 8x8 game tiles where the bots battle 26 | 27 | ### Game Configuration Panel 28 | - [ ] User can see a game configuration panel with these subcomponents: 29 | - Four bot panels with controls to allow the user to input a unique bot 30 | name, select its Boolean value and operation, select the bots speed using a 31 | slider, and a dropdown to specify its starting direction - North, South, 32 | East, West 33 | - [ ] User can enter a unique name for each bot into an input text box 34 | - [ ] User can see an error message if the name entered is the same name 35 | assigned to another bot. 36 | - [ ] User can select the bots Boolean value (0 or 1) from a dropdown. 37 | - [ ] User can select a bots Boolean operation from a dropdown - AND, OR, XOR, 38 | or NOT. 39 | - [ ] User can move the speed slider to set a bots speed 40 | - [ ] User can select a bots starting direction from the direction dropdown. 41 | - [ ] User can see the bot randomly assigned to a tile in the arena once its 42 | name has been defined. 43 | 44 | ### Game Controls 45 | - [ ] User can a button in the game control panel to 'Battle!' 46 | - [ ] User can click the 'Battle!' button to start the bot battle in the arena. 47 | - [ ] User can see bots move based on the speed and direction assigned to them. 48 | - [ ] User can see the 'Battle!' button text change to 'Stop!' once a battle 49 | is started. 50 | - [ ] User can click the 'Stop!' button to halt gameplay 51 | - [ ] User can see the 'Stop!' button text change back to 'Battle!' once a 52 | single bot wins the match. 53 | 54 | ### Arena 55 | - [ ] User can see bots bounce off the boundary walls of the arena in a new 56 | direction 57 | - [ ] User can see bots pause for an instant when they collide. 58 | - [ ] User can see a bot disappear after colliding if the result of it's 59 | boolean operation appied to its boolean value and that of the bot is has 60 | collided with result in 0. 61 | - [ ] User can see a bot that wins a collision resume its path at the same 62 | speed and direction. 63 | - [ ] User can see both colliding bots resume their paths at the same speed 64 | and direction in the event of a tie. In other words, when the collision resulted 65 | in the same boolean result (0 or 1) for both. 66 | - [ ] User can see gameplay stop when only one bot remains. 67 | 68 | ### Leaderboard 69 | - [ ] User can see the display of wins and losses for each bot on the 70 | leaderboard 71 | - [ ] User can see the tally of wins incremented for bots winning a collision. 72 | - [ ] User can see the tally of losses decremented for bots loosing a collision. 73 | 74 | ## Bonus features 75 | 76 | - [ ] User can see a log panel displaying the details of game milestones. 77 | Hint: This may be useful to the Developer during development and debugging. 78 | - [ ] User can see a game clock displaying current elapsed game time that is 79 | updated every second. 80 | - [ ] User may choose a bots starting direction as North, Northeast, Southeast, 81 | South, Southwest, West, or Northwest. 82 | - [ ] User may specify the dimensions of the arena. 83 | - [ ] User may select an unique icon for a bot from a palette of icons. Icons 84 | in the palette are disabled once they are assigned. 85 | - [ ] User can see the bot with the most wins highlighted in some way in the 86 | Leaderboard. 87 | 88 | ## Useful links and resources 89 | 90 | - [George Boole (Wikipedia)](https://en.wikipedia.org/wiki/George_Boole) 91 | - [Boolean Algebra (Wikipedia)](https://en.wikipedia.org/wiki/Boolean_algebra) 92 | - [Video Game Physics Tutorial - Part I: An Introduction to Rigid Body Dynamics](https://www.toptal.com/game/video-game-physics-part-i-an-introduction-to-rigid-body-dynamics) 93 | 94 | ## Example projects 95 | 96 | - N/a 97 | -------------------------------------------------------------------------------- /Projects/3-Advanced/Bug-Race-Game.md: -------------------------------------------------------------------------------- 1 | # Bug Race 2 | 3 | **Tier:** 3-Advanced 4 | 5 | In this project you will test your animation skills by creating a game that 6 | lets the user race bugs while trying to guess the winner. As part of this 7 | you'll need to provide the user with various controls that allow the game to 8 | be customized including bug icons, assigning names to the bugs, making a choice 9 | of who the winner might be, and bug speed. 10 | 11 | ### Constraints 12 | - The developer will need to select the bug icons to be used in the game 13 | - The developer should randomly adjust the speed of each bug before a race 14 | starts so they travel at different rates within the speed selected by the 15 | user (slow, normal, or fast). 16 | - It is up to the developer to define the speed ranges associated with the slow, 17 | normal, and fast speed setting. 18 | - You may use an animation library, but you'll get more out of this project 19 | if you try to implement it using native language features. 20 | 21 | ## User Stories 22 | 23 | - [ ] User can see: 24 | - An input panel containing controls to configure the game's UI and 25 | operation. 26 | - A race track consisting of four horizontal lanes the bugs will travel in 27 | - A radio button associated with each lane to allow the user to select a 28 | potential winner 29 | - A 'Start' button. 30 | 31 | ### Game Controls 32 | - [ ] User can see the following controls in the input panel. 33 | - A list of race lane numbers with radio buttons for each showing 34 | thumbnails for three unique bugs, and a text box the user can use to 35 | give the bug a name. 36 | - An Speed selection control with three radio buttons - Slow, Normal, Fast 37 | - [ ] User can click a radio button to select the bug icon to be assigned 38 | to a lane. 39 | - [ ] User can see an warning message if the same icon is selected for more 40 | than one lane. 41 | - [ ] User can enter a name for the bug in each lane. 42 | - [ ] User can see an error message if the same name is repeated for more than 43 | one bug. 44 | - [ ] User can select the bug speed by clicking one of the Speed radio buttons 45 | 46 | ### Racing 47 | 48 | - [ ] User can select a potential winner by clicking on the radio button on 49 | any lane. 50 | - [ ] User can start a race by clicking on the 'Start' button 51 | - [ ] User can see the 'Start' button is disabled until the race is over 52 | - [ ] User can see an error message if no winner was selected. 53 | - [ ] User can see bugs race across their assigned lane to the finish line 54 | - [ ] User can see all bugs stop moving when the first one reaches the finish 55 | line 56 | - [ ] User can see game metrics updated to show the number of races run in 57 | this session. 58 | 59 | ## Bonus features 60 | 61 | - [ ] User can see race metrics for each bug showing the number of races 62 | run, number of wins, and number of losses. 63 | - [ ] User can see the winning bug bounce when it wins a race 64 | - [ ] User can see loosing bugs flip on their backs when they loose a race 65 | - [ ] User can hear unique sounds played when the race starts and ends. 66 | 67 | ## Useful links and resources 68 | 69 | - [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) 70 | - [Basic Animations (MDN)](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations 71 | ) 72 | - [How to build a simple Sprite animation in Javascript](https://medium.com/dailyjs/how-to-build-a-simple-sprite-animation-in-javascript-b764644244aa) 73 | - [Javascript Animations](https://javascript.info/animation) 74 | 75 | ## Example projects 76 | 77 | - [Arcade Game](https://jdmedlock.github.io/arcadegame/) 78 | - [Drag Race Animation](https://codepen.io/Delime/pen/IyuAr) 79 | - [Horse Race](https://codepen.io/nathanielzanzouri/pen/jVgEZY) -------------------------------------------------------------------------------- /Projects/3-Advanced/Calorie-Counter-App.md: -------------------------------------------------------------------------------- 1 | # Calorie Counter 2 | 3 | **Tier:** 3-Advanced 4 | 5 | Getting and staying healthy requires a combination of mental balance, 6 | exercise, and nutrition. The goal of the Calorie Counter app is to help the 7 | user address nutritional needs by counting calories for various foods. 8 | 9 | This app provides the number of calories based on the result of a user search 10 | for a type of food. The U.S. Department of Agriculture MyPyramid Food Raw Data 11 | will be searched to determine the calorie values. 12 | 13 | Calorie Counter also provides you, the developer, with experience in transforming 14 | raw data into a format that will make it easier to search. In this case, the 15 | MyPyramid Food Raw Data file, which is an MS Excel spreadsheet, must be 16 | downloaded and transformed into a JSON file that will be easier to load and 17 | search at runtime (hint: take a look at the CSV file format). 18 | 19 | ## User Stories 20 | 21 | - [ ] Developer will create a JSON file containing the food items to be 22 | searched. This will be loaded when the app is started. 23 | - [ ] User can see an panel containing a food description input text box, 24 | a 'Search' button, and a 'Clear' button. 25 | - [ ] User can enter search terms into the food description input text box. 26 | - [ ] User can click on the 'Search' button to search for the matching food. 27 | - [ ] User can see a warning message if no search terms were entered. 28 | - [ ] User can see a warning message if no matches were found. 29 | - [ ] User can see a list of the matching food items, portion sizes, and 30 | calories in a scrollable results panel that is limited to 25 entries. 31 | - [ ] User can click on the 'Clear' button to clear the search terms and 32 | results list. 33 | 34 | ## Bonus features 35 | 36 | - [ ] User can see the count of the number of matching food items adjacent to 37 | the results list. 38 | - [ ] User can use a wildcard character in search terms. 39 | - [ ] User can see more than 25 entries from a search by clicking a Down 40 | icon button to add more matching food items to the search results list. 41 | - [ ] Developer will implement load the MyPyramid data into a database or a 42 | data structure other than an array for faster searching. 43 | 44 | ## Useful links and resources 45 | 46 | [MyPyramid Food Raw Data](https://catalog.data.gov/dataset/mypyramid-food-raw-data) 47 | 48 | ## Example projects 49 | 50 | [Food Calculator](https://www.webmd.com/diet/healthtool-food-calorie-counter) 51 | -------------------------------------------------------------------------------- /Projects/3-Advanced/Chat-App.md: -------------------------------------------------------------------------------- 1 | # Chat App 2 | 3 | **Tier:** 3-Advanced 4 | 5 | Real-time chat interface where multiple users can interact with each other by sending messages. 6 | 7 | As a MVP(Minimum Viable Product) you can focus on building the Chat interface. Real-time functionality can be added later (the bonus features). 8 | 9 | ## User Stories 10 | 11 | - [ ] User is prompted to enter a username when he visits the chat app. The username will be stored in the application 12 | - [ ] User can see an `input field` where he can type a new message 13 | - [ ] By pressing the `enter` key or by clicking on the `send` button the text will be displayed in the `chat box` alongside his username (e.g. `John Doe: Hello World!`) 14 | 15 | ## Bonus features 16 | 17 | - [ ] The messages will be visible to all the Users that are in the chat app (using WebSockets) 18 | - [ ] When a new User joins the chat, a message is displayed to all the existing Users 19 | - [ ] Messages are saved in a database 20 | - [ ] User can send images, videos and links which will be displayed properly 21 | - [ ] User can select and send an emoji 22 | - [ ] Users can chat in private 23 | - [ ] Users can join `channels` on specific topics 24 | 25 | ## Useful links and resources 26 | 27 | - [Socket.io](https://socket.io) 28 | - [How to build a React.js chat app in 10 minutes - article](https://medium.freecodecamp.org/how-to-build-a-react-js-chat-app-in-10-minutes-c9233794642b) 29 | - [Build a chat application like Slack - React / JavaScript Tutorial - Youtube](https://www.youtube.com/watch?v=a-JKj7m2LIo) 30 | - [Socket.io Chat App Using Websockets - Youtube Tutorial](https://www.youtube.com/watch?v=tHbCkikFfDE) 31 | 32 | ## Example projects 33 | 34 | - [Chatty2](https://web-chatty.herokuapp.com/) 35 | - [Simple TCP Socket based Chat application](https://github.com/dularish/Simple-TCP-Socket-based-Chat-App) 36 | -------------------------------------------------------------------------------- /Projects/3-Advanced/Contribution-Tracker-App.md: -------------------------------------------------------------------------------- 1 | # Contribution Tracker 2 | 3 | **Tier:** 3-Advanced 4 | 5 | In the [Charity Finder](../2-Intermediate/Charity-Finder-App.md) project you created an app to 6 | help you locate a charity worthy of your contributions. Once a contribution 7 | has been made the goal of the Contribution Tracker app is to track it so to 8 | provide users with a record of all contributions for use in monitoring how 9 | funds are being directed and to provide records for financial reporting 10 | purposes. For example, for tax reporting. 11 | 12 | ### Constraints 13 | 14 | - Developers may use Vanilla JS, or a framework of their choice (like React, 15 | VueJS, etc.). 16 | 17 | - Developers should not use libraries for calculating and manipulating monetary 18 | amounts. All calculation and formatting should be done in the language chosen 19 | to develop the application. 20 | 21 | - Developers may use a graphics presentation library or service of their choice, 22 | like [AMCharts](https://www.amcharts.com/). 23 | 24 | - Developers may choose to have transactions persist across sessions using 25 | either files or databases. Sensitive data, like transactions, must not be 26 | maintained in local storage. Remember that although you can implement 27 | protections it is impossible to totally secure browser applications. 28 | 29 | ## User Stories 30 | 31 | - [ ] User can see a Navigation Bar at the top of each page containing the 32 | application name and a "hamburger" menu with these option: 33 | - Dashboard 34 | - Transactions 35 | - [ ] User can see a Footer Bar at the bottom of each page containing an 36 | About link 37 | 38 | ### Dashboard Page 39 | - [ ] User can see the Dashboard page when the app is started containing 40 | graphical summaries of the following key metrics. The graphical representation 41 | for each is left up to the Developer. 42 | - Contributions by month for the current year 43 | - Total contributions by year 44 | - Contribution increase/decrease by year 45 | - Average contribution amount by month and year 46 | - [ ] User can return to the Dashboard page, if currently on another page, by 47 | clicking on the 'Dashboard' option in the hamburger menu in the Navigation Bar. 48 | 49 | ### Transactions Page 50 | - [ ] User can see a transaction input panel containing the following: 51 | - Transaction date 52 | - Payee name 53 | - Amount 54 | - Memo 55 | - Action buttons - 'Clear', 'Add' 56 | - [ ] User can see a tabular transaction ledger containing previously 57 | entered transactions. Each row will also contain a 'Modify' and a 'Delete' 58 | button. 59 | - [ ] User can enter values describing the transaction into the input fields 60 | - [ ] User can click the 'Clear' button to reset all input fields to an 61 | empty state. 62 | - [ ] User can click the 'Add' button to validate the input that has been 63 | entered, add the validated entry to the transaction ledger, and clear the input 64 | fields. 65 | - [ ] User can see a consolidated error message detailing any errors detected 66 | in input fields, including: 67 | - Invalid date 68 | - Blank Payee name 69 | - Non-numeric amount field 70 | - [ ] User can click on the 'Update' button to modify a previously entered 71 | transaction. The transaction details will be copied to the transaction input 72 | panel and the 'Add' button will change to 'Modify'. 73 | - [ ] User can change values in the input fields and click the 'Modify' to 74 | validate the input and update that transactions entry in the ledger. If 75 | successful the 'Modify' button will change back to 'Add' and the input fields 76 | will be cleared. 77 | - [ ] User can click the 'Delete' button to remove a previously entered 78 | transaction. A popup dialog will be displayed containing 'Cancel' and 'Okay' 79 | buttons to cancel or confirm the delete. If the delete is confirmed the 80 | transaction will be removed from the ledger. 81 | - [ ] User can return to the Transactions page, if currently on another page, 82 | by clicking on the 'Transactions' option in the hamburger menu in the Navigation 83 | Bar. 84 | 85 | ### About Page 86 | - [ ] User can click the About link in the Footer Bar to display information 87 | about the Developer. 88 | - [ ] User can see links to the Developers GitHub and social media accounts 89 | including social media icons (like the Twitter icon). 90 | 91 | ## Bonus features 92 | 93 | - [ ] User can click in the transaction date field to display a calendar 94 | the date can be selected from rather than manually entering it. 95 | - [ ] User can see alternating row background colors in the transaction ledger. 96 | - [ ] User can click on a column heading in the transaction ledger to toggle 97 | the sort sequence on the values in that column. 98 | - [ ] User can see a PDF option near the Transaction Ledger to create a PDF 99 | of all transactions (Hint: checkout how this capability can be implemented via 100 | [Puppeteer](https://github.com/GoogleChrome/puppeteer)). 101 | 102 | ## Useful links and resources 103 | 104 | - [How to Handle Monetary Values in Javascript](https://frontstuff.io/how-to-handle-monetary-values-in-javascript) 105 | - [How to Format Number as Currency](https://flaviocopes.com/how-to-format-number-as-currency-javascript/) 106 | - [Mintable (GitHub)](https://github.com/kevinschaich/mintable) 107 | 108 | ## Example projects 109 | 110 | N/a 111 | -------------------------------------------------------------------------------- /Projects/3-Advanced/Elevator-App.md: -------------------------------------------------------------------------------- 1 | # Elevator 2 | 3 | **Tier:** 3-Advanced 4 | 5 | It's tough to think of a world without elevators. Especially if you have to 6 | walk up and down 20 flights of stairs each day. But, if you think about it 7 | elevators were one of the original implementations of events and event handlers 8 | long before web applications came on the scene. 9 | 10 | The objective of the Elevator app is to simulate the operation of an elevator 11 | and more importantly, how to handle the events generated when the buildings 12 | occupants use it. This app simulates occupants calling for an elevator from 13 | any floor and pressing the buttons inside the elevator to indicate the floor 14 | they wish to go to. 15 | 16 | ### Constraints 17 | 18 | - You must implement a single event handler for the up and down buttons on 19 | each floor. For example, if there are 4 floors a single event handler should 20 | be implemented rather than 8 (two buttons per floor). 21 | - Similarly, a single event handler should be implemented for all buttons on 22 | the control panel in the elevator rather than a unique event handler for each 23 | button. 24 | 25 | ## User Stories 26 | 27 | - [ ] User can see a cross section diagram of a building with four floors, 28 | an elevator shaft, the elevator, and an up button on the first floor, up and 29 | down buttons on the second and third floors, and a down button on the fourth 30 | floor. 31 | - [ ] User can see the elevator control panel with a button for each of the 32 | floors to the side of the diagram. 33 | - [ ] User can click the up and down button on any floor to call the 34 | elevator. 35 | - [ ] User can expect that clicking the up and down buttons on any floor 36 | to request the elevator will be queued and serviced in the sequence they were 37 | clicked. 38 | - [ ] User can see the elevator move up and down the shaft to the floor it 39 | was called to. 40 | - [ ] User can click the elevator control panel to select the floor it 41 | should travel to. 42 | - [ ] User can expect the elevator to pause for 5 seconds waiting for a 43 | floor button on the control panel to be clicked. If a floor button isn't 44 | clicked within that time the elevator will process the next call request. 45 | - [ ] User can expect the elevator to return to the first floor when there 46 | are no requests to process. 47 | 48 | ## Bonus features 49 | 50 | - [ ] User can see a warning sound if the number of elevator requests 51 | exceeds the maximum number allowed. This limit is left to the developer. 52 | - [ ] User can hear a sound when the elevator arrives at a floor. 53 | - [ ] User can see an occupant randomly arrive at a floor to indicate when 54 | the user should click the up or down elevator call button on that floor. 55 | - [ ] User can specify the time interval between new occupants arriving to 56 | call an elevator. 57 | 58 | ## Useful links and resources 59 | 60 | [First-in, first out queue (Wikipedia)](https://en.wikipedia.org/wiki/FIFO_(computing_and_electronics)) 61 | 62 | ## Example projects 63 | 64 | [Elevator](https://codepen.io/nibalAn/pen/prWdjq) 65 | -------------------------------------------------------------------------------- /Projects/3-Advanced/FastFood-App.md: -------------------------------------------------------------------------------- 1 | # Fast Food Simulator App 2 | 3 | **Tier:** 3-Advanced 4 | 5 | Fast Food simulates the operation of a simple take-away restaurant and is 6 | designed to help the developer put his or her knowledge of Promises and SOLID 7 | design principles to work. 8 | 9 | This app simulates customers of a take-away restaurant placing orders and 10 | and waiting for them to be prepared and delivered to a pickup counter. After 11 | placing the order the customer waits on the order to be announced before 12 | picking it up and proceeding to the dining area. 13 | 14 | The user stories that make up this app center around four distinct roles: 15 | 16 | - User - the end user using the application 17 | - Customer - the simulated Customer 18 | - Order Taker - the simulated Order Taker 19 | - Cook - the simulated Cook 20 | - Server - the simulated Server 21 | 22 | This app has quite a few User Stories. Don't be overwhelmed though. Take the 23 | time to sketch out not just the UI, but how the different actors (roles) 24 | interact and incrementally build the app following Agile principles. 25 | 26 | ### Constraints 27 | 28 | - Order tickets can be represented as two different types of Promises - one 29 | the Server waits on while the Cook prepares the order and another the Customer 30 | waits on while in the serving line. 31 | - Use the native equivalent of JS Promises in whichever language you choose 32 | to develop in. JS developers should use native Promises and not `async/await`. 33 | - Create this app using native language features. You may NOT use a simulation 34 | package or library. 35 | - New customers arrive in the order line at a fixed interval of time. In other 36 | words, new customers arrive at a constant rate. 37 | - Order tickets are fulfilled at a fixed interval of time as well. They are 38 | completed at a constant rate. 39 | 40 | ## User Stories 41 | 42 | ### Application Operation 43 | - [ ] User can see an input area that allows the entry of the time interval 44 | for customer arrival and a time interval for the fulfilment of an 45 | _order ticket_ by the cook. 46 | - [ ] User can see a customized warning message if the customer arrival 47 | interval or the order fulfilment interval is incorrectly entered. 48 | - [ ] User can start the simulation by clicking on a Start button. 49 | - [ ] User can see an order line area containing a text box showing the 50 | number of customers waiting to place orders. 51 | - [ ] User can see an order area containing text boxes showing the 52 | _order number_ currently being taken. 53 | - [ ] User can see a kitchen area containing a text box showing the 54 | _order number_ that's being prepared and a text box listing the waiting 55 | orders in sequence, along with a count of the number of waiting orders. 56 | - [ ] User can see a Pickup area containing a text box showing the 57 | _order number_ that's currently available for pickup by the Customer and a 58 | text box showing the number of Customers waiting in the serving line. 59 | - [ ] User can stop the simulation at any time by clicking a Stop button. 60 | 61 | ## Bonus features 62 | 63 | - [ ] User can specify how long it takes for an Order Taker to create an 64 | _order ticket_. 65 | - [ ] User can specify how long it takes for the Server to deliver an order 66 | to the customer. 67 | - [ ] User can specify the total amount of time the simulation is to run 68 | once the Start button has been clicked. 69 | - [ ] User can see an animated view of Customers and orders as they move 70 | through the workflow. 71 | 72 | ## Useful links and resources 73 | 74 | - [Fast Food Simulator - Logical Workflow](https://drive.google.com/file/d/1Thfm5cFDm1OjTg_0LsIt2j1uPL5fv-Dh/view?usp=sharing) 75 | - [Agile Manifesto & 12 Principles of Agile Software](http://agilemanifesto.org/) 76 | - [SOLID Principles Every Developer Should Know](https://blog.bitsrc.io/solid-principles-every-developer-should-know-b3bfa96bb688) 77 | - [Using Promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises) 78 | - [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) 79 | 80 | ## Example projects 81 | 82 | - N/a 83 | -------------------------------------------------------------------------------- /Projects/3-Advanced/GitHub-Timeline-App.md: -------------------------------------------------------------------------------- 1 | # GitHub Timeline 2 | 3 | **Tier:** 3-Advanced 4 | 5 | API's and graphical representation of information are hallmarks of modern 6 | web applications. GitHub Timeline combines the two to create a visual history 7 | of a users GitHub activity. 8 | 9 | The goal of GitHup Timeline is accept a GitHub user name and produce a 10 | timeline containing each repo and annotated with the repo names, the date 11 | they were created, and their descriptions. The timeline should be one that 12 | could be shared with a prospective employer. It should be easy to read and 13 | make effective use of color and typography. 14 | 15 | Only public GitHub repos should be displayed. 16 | 17 | ## User Stories 18 | 19 | - [ ] User can enter a GitHub user name 20 | - [ ] User can click a 'Generate' button to create and display the named 21 | users repo timeline 22 | - [ ] User can see a warning message if the GitHub user name is not a valid 23 | GitHub user name. 24 | 25 | ## Bonus features 26 | 27 | - [ ] User can see a summary of the number of repos tallied by the year they 28 | were created 29 | 30 | ## Useful links and resources 31 | 32 | GitHub offers two API's you may use to access repo data. You may also choose 33 | to use an NPM package to access the GitHub API. 34 | 35 | Documentation for the GitHub API can be found at: 36 | 37 | - [GitHub REST API V3](https://developer.github.com/v3/) 38 | - [GitHub GraphQL API V4](https://developer.github.com/v4/) 39 | 40 | Sample code showing how to use the GitHub API's are: 41 | 42 | - [GitHub REST API client for JavaScript ](https://github.com/octokit/rest.js/) 43 | - [GitHub GraphQL API client for browsers and Node](https://github.com/octokit/graphql.js) 44 | 45 | You can use this CURL command to see the JSON returned by the V3 REST API for 46 | your repos: 47 | 48 | ``` 49 | curl -u "user-id" https://api.github.com/users/user-id/repos 50 | ``` 51 | 52 | ## Example projects 53 | 54 | - [CSS Timeline](https://codepen.io/NilsWe/pen/FemfK) 55 | - [Building a Vertical Timeline With CSS and a Touch of JavaScript](https://codepen.io/tutsplus/pen/QNeJgR) 56 | -------------------------------------------------------------------------------- /Projects/3-Advanced/GitTweet-App.md: -------------------------------------------------------------------------------- 1 | # GitTweet 2 | 3 | **Tier:** 3-Advanced 4 | 5 | In the [GitHub Timeline](./GitHub-Timeline-App.md) app you used GitHub's API to 6 | create a timeline of your repos. What could be more powerful that using an API 7 | such as this? Why using two API's, of course. 8 | 9 | The goal of GitTweet is to create a GitHub app to tweet when a pull request 10 | is created for one of your repos. 11 | 12 | ## User Stories 13 | 14 | - [ ] User can see an input area tabular display prepopulated with rows for 15 | each of the GitHub repos she owns and a selection checkbox next to each repo 16 | name, a single input date field, and a 'Scan' button. 17 | - [ ] User can click the checkboxes in the repo list to select or deselect 18 | repos for processing. 19 | - [ ] User can enter a date into the date field. This defines the point after 20 | which any new PR requests will be tweeted. 21 | - [ ] User can click the 'Scan' button to identify repos that have had a new 22 | PR created that has not been previously tweeted. In other words. Consecutively 23 | entering the same date to scan from should only generate tweets for PR's that 24 | have not yet been tweeted. 25 | - [ ] User can see an error message if no date was entered, if it is not a 26 | valid date, or if it is a future date. 27 | - [ ] User can see repos highlighted if a tweet will be generated for them 28 | and the 'Scan' button will change to 'Tweet'. 29 | - [ ] User may deselect a repo by clicking on its checkbox. Doing this will 30 | change the button back to 'Scan' and clicking it will repeat the search for 31 | repos that have had new PR's (not yet tweeted) created since the scan date 32 | entered by the user. 33 | - [ ] User may enter an new scan date at this point which also changes the 34 | button back to 'Scan'. 35 | - [ ] User may click the 'Tweet' button to send a tweet bearing the following 36 | message - `Pull Requst # created for repo - `. 37 | - [ ] User can see this tweet send from her Twitter account. 38 | 39 | ## Bonus features 40 | 41 | - [ ] User does not need to manually enter a scan date. If omitted the scan 42 | will resume from the last scan date which must persist across sessions. 43 | - [ ] User may enter a custom tweet message 44 | - [ ] User repo selections will persist across sessions so they do not have 45 | to be reselected each time. 46 | 47 | ## Useful links and resources 48 | 49 | - [Twitter Developer Docs](https://developer.twitter.com/en.html) 50 | - [GitHub Apps](https://developer.github.com/apps//) 51 | - GitHub offers two API's you may use to access repo data. You may also choose 52 | to use an NPM package to access the GitHub API. Documentation for the GitHub 53 | API can be found at: 54 | 55 | - [GitHub REST API V3](https://developer.github.com/v3/) 56 | - [GitHub GraphQL API V4](https://developer.github.com/v4/) 57 | 58 | Sample code showing how to use the GitHub API's are: 59 | 60 | - [GitHub REST API client for JavaScript ](https://github.com/octokit/rest.js/) 61 | - [GitHub GraphQL API client for browsers and Node](https://github.com/octokit/graphql.js) 62 | 63 | You can use this CURL command to see the JSON returned by the V3 REST API for 64 | your repos: 65 | 66 | ``` 67 | curl -u "user-id" https://api.github.com/users/user-id/repos 68 | ``` 69 | 70 | ## Example projects 71 | 72 | [Zapier GitHub Integration](https://zapier.com/apps/github/integrations/twitter) 73 | -------------------------------------------------------------------------------- /Projects/3-Advanced/Instagram-Clone-App.md: -------------------------------------------------------------------------------- 1 | # Instagram Clone 2 | 3 | **Tier:** 3-Advanced 4 | 5 | A clone of Facebook's Instagram app where you can login/register, create new posts, follow other users and see other people you follows posts 6 | 7 | You should create a MVP (Minimum Viable Product) using a Full stack approach such as the MEAN, MERN or VENM Stack to store images to the server and display them to the client. 8 | 9 | ## User Stories 10 | 11 | - [ ] User can register for an account storing their name, email/username and password then login to the app using their credentials 12 | - [ ] User can create a post and store images to the server (Preferably in a database) 13 | - [ ] User has a profile that displays all the images they have uploaded 14 | - [ ] User can follow other users 15 | - [ ] User can see other users posts (people who the user follows) 16 | 17 | ## Bonus features 18 | 19 | - [ ] User can see a global feed of images 20 | - [ ] The feed auth refreshes when a new post is added (You can use Web Sockets) 21 | - [ ] User can send messages to other users 22 | - [ ] User can create a story for followers 23 | 24 | ## Useful links and resources 25 | 26 | - [How to make an Instagram clone](https://www.youtube.com/watch?v=9dRSNQe7PWw) 27 | - [Node & Mongo Basic CRUD Operations](https://codeburst.io/writing-a-crud-app-with-node-js-and-mongodb-e0827cbbdafb) 28 | - [Socket.io](https://socket.io) 29 | - [MERN Stack](http://mern.io/) 30 | - [MEAN Stack](http://mean.io/) 31 | - [User Authentication with Node](https://medium.com/silibrain/using-passport-bcrypt-for-full-stack-app-user-authentication-fe30a013604e) 32 | - [Express File Uploads with Multer](https://scotch.io/tutorials/express-file-uploads-with-multer) 33 | 34 | ## Example projects 35 | 36 | - [Instagram](https://www.instagram.com/) 37 | -------------------------------------------------------------------------------- /Projects/3-Advanced/Kudos-Slackbot.md: -------------------------------------------------------------------------------- 1 | # Kudo's Slackbot 2 | 3 | **Tier:** 3-Advanced 4 | 5 | Have you ever recognized a team mate's contributions or assistance in a Slack 6 | channel only to find that it's lost after a few days? Let _*Kudo's*_ come to 7 | the rescue. 8 | 9 | Kudo's is a Slackbot that allows you to create a recognition of someone else's 10 | efforts and to make it available through a simple Slack command. 11 | 12 | ## User Stories 13 | 14 | - [ ] User can create a kudu using the Slack command: `/kudo add ` where: 15 | 16 | - `` defines the individual receiving the recognition 17 | - `` is your kudo for that person 18 | 19 | - [ ] User can modify a kudu using the Slack command: `/kudo replace ` where: 20 | 21 | - `` is 'replace' or 'delete' 22 | - `` is the kudo identifier 23 | - `` is your kudo for that person 24 | 25 | - [ ] User can delete a kudu using the Slack command: `/kudo delete ` 26 | 27 | - [ ] User may display the most recent _n_ kudos using the Slack command: `/kudo list ` where `n` is an integer or `*` for all kudos 28 | 29 | - [ ] User may display all kudos for an individual with the Slack command: `/kudo user ` 30 | 31 | ## Bonus features 32 | 33 | - [ ] User may list the individual having the most kudos, in descending order, user the Slack command: `/kudo top ` where `n` is an integer or `*` for all individuals who have received a kudo 34 | 35 | ## Useful links and resources 36 | 37 | - [Slack API](https://api.slack.com/) 38 | 39 | ## Example project 40 | 41 | - [Kudos Slackbot Example](https://cubic-quince.glitch.me/) 42 | - 43 | -------------------------------------------------------------------------------- /Projects/3-Advanced/Movie-App.md: -------------------------------------------------------------------------------- 1 | # Movie Database App 2 | 3 | **Tier:** 3-Advanced 4 | 5 | Find your next movie or create your watchlist with this App. It include reviews, rating, actors and anything you need to know about the movie. 6 | 7 | - This application will help users find their next movie to watch by showing helpful stats 8 | - Resource needed for the project is movie api, examples include Imdb, MovieDB etc. 9 | 10 | ## User Stories 11 | 12 | - [ ] User can see all the latest movie on the front page 13 | - [ ] User scroll down to see all other movies according to release date 14 | - [ ] User can click on any of the movie to go to their own separate page 15 | - [ ] User can then see all about the movie ratings, about, actors present on each separate movie page 16 | 17 | ## Bonus features 18 | 19 | - [ ] User can create an account 20 | - [ ] User can create their own watch list 21 | - [ ] User can review movies 22 | 23 | ## Useful links and resources 24 | 25 | - [MovieDB Api](https://developers.themoviedb.org/3) 26 | 27 | ## Example projects 28 | 29 | [Movie Database App w/ React by Oliver Gomes](http://phobic-heat.surge.sh/) 30 | [Movie Browser App w/ React&Redux&Bootstrap by Nataliia Pylypenko](https://api-cinema-10d15.firebaseapp.com/) 31 | -------------------------------------------------------------------------------- /Projects/3-Advanced/MyPodcast-Library-app.md: -------------------------------------------------------------------------------- 1 | # My Podcast Library 2 | 3 | **Tier:** 3-Advanced 4 | 5 | In the [GitHub Status](../1-Beginner/GitHub-Status-App.md) and [Podcast Directory](../2-Intermediate/Podcast-Directory-App.md) you learned what web scraping is and how you can 6 | use it as an alternative data source when API's and backend databases aren't 7 | available. The _My Podcast Library_ app merges your newfound knowledge of 8 | web scraping with your frontend skills to extend the simple Podcast Directory 9 | app into something more complex and useful. 10 | 11 | The goal of _My Podcast Library_ is to build a more personalized library of 12 | your favorite podcasts and episodes. In this app you'll use 13 | [Puppeteer](https://github.com/GoogleChrome/puppeteer) and 14 | [Podbean](https://www.podbean.com) to create an app to maintain your 15 | personal library of podcasts. 16 | 17 | This project is described in detail by the following user stories, but feel 18 | free to use your imagination. 19 | 20 | ## User Stories 21 | 22 | ### Favorite Podcast Display 23 | 24 | - [ ] User can see their favorite podcasts in a tabular display area 25 | - [ ] User can see the message 'No podcasts added yet' in watermark format 26 | in this area if no podcasts have been added. 27 | - [ ] User can see an overview of each favorite podcast that has been added 28 | in this area. This includes the podcast icon, it's name, and the number of 29 | most recent episodes. 30 | - [ ] User can click on the podcast icon to display a page containing a list 31 | of the most recent episodes. 32 | 33 | ### Favorite Podcast Entry 34 | - [ ] User can see a '+' button at the top of the favorite podcast area with 35 | the hover text 'Add a new podcast' 36 | - [ ] User can click the '+' button to display a popup panel to allow a new 37 | favorite podcast added. This panel contains an input area containing a text 38 | input box for the podcasts page on Podbean (e.g. 39 | [Techpoint Charlie](https://www.podbean.com/podcast-detail/k76vd-8adc7/Techpoint-Charlie-Podcast)), a 'Save' button, and a 'Cancel' button. 40 | - [ ] User can click the 'Save' button to validate the URL and add the 41 | podcast to the favorite podcast area. 42 | - [ ] User can see a warning message if the url doesn't start with 43 | ```https://www.podbean.com/podcast-detail/``` or if navigating to the page 44 | results in a 404 error. 45 | - [ ] User can see valid URLs for favorite podcasts retained across sessions. 46 | - [ ] User can click the 'Cancel' button to discard any data and dismiss the 47 | popup. 48 | 49 | ### Most Recent Episodes for a Podcast Page 50 | - [ ] User can see a table of podcast episodes 51 | - [ ] User can see rows in this table showing a clickable episode icon, the 52 | title of the episode, the date it was originally broadcast, and a heart icon 53 | button to mark it as a favorite. 54 | - [ ] User can scroll through the list 55 | - [ ] User can click on the episode icon to display that episodes page on 56 | the Podbean web site. 57 | - [ ] User can click on an episode's heart icon to mark it as a favorite. 58 | - [ ] User can click on an episode's heart icon to remove it as a favorite. 59 | - [ ] User can see the table sorted with most recent episodes at the top, 60 | followed by those previously marked as favorites. 61 | - [ ] User can see favorite episodes persist across sessions. 62 | 63 | ## Bonus features 64 | 65 | ### Episode Ratings 66 | - [ ] User can see 5 star icons with each episode that denotes how the user 67 | rates it. 68 | - [ ] User may click stars from left-to-right to rate an episode. Stars are 69 | filled or changed to a new color when clicked. 70 | - [ ] User may change a rating by clicking on the stars from right-to-left 71 | to deselect them. 72 | - [ ] User can see the list of favorite episodes on the page sorted in 73 | descending rating sequence. 74 | 75 | ### Searching & Hashtags 76 | - [ ] User can enter a freeform hashtag with an episode on the most recent 77 | episodes page. This hashtag does not need to be predefined. 78 | - [ ] User can see a search box on the main page and a 'Search' button 79 | - [ ] User can enter hashtags in the search box to display a page of episodes 80 | from any podcast with the same format as the most recent episodes page. 81 | - [ ] User can click on a cancel button on the search results page to return 82 | to the main page. 83 | 84 | ## Useful links and resources 85 | 86 | - [Puppeteer](https://github.com/GoogleChrome/puppeteer) 87 | - [Web Scraping with a Headless Browser: A Puppeteer Tutorial](https://www.toptal.com/puppeteer/headless-browser-puppeteer-tutorial) 88 | - [querySelectorAll](https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/querySelectorAll) 89 | 90 | ## Example projects 91 | 92 | N/a 93 | -------------------------------------------------------------------------------- /Projects/3-Advanced/NASA-Exoplanet-Query.md: -------------------------------------------------------------------------------- 1 | # NASA Exoplanet Query 2 | 3 | **Tier:** 3-Advanced 4 | 5 | Since 1992 over 4,000 exoplanets have been discovered outside our solar 6 | system. The United States National Aeronautics and Space Administration (NASA) 7 | maintains a publicly accessible archive of the data collected on these in 8 | comma separated value (CSV) format. 9 | 10 | The objective of the NASA Exoplanet Query app is to make this data available 11 | for simple queries by its users. 12 | 13 | ### Requirements & Constraints 14 | 15 | - The Developer should implement a means of efficiently loading the exoplanet 16 | CSV data obtained from NASA to minimize any delays when the application starts. 17 | - Similarly, the Developer should utilize a data structure and search mechanism 18 | that minimizes the time required to query the exoplanet data and display the 19 | results. 20 | - The Developer will need to review the Exoplanet Archive documentation to 21 | understand the format of the data fields. 22 | 23 | ## User Stories 24 | 25 | - [ ] User can see an query input panel containing dropdowns allowing the 26 | user to query on year of discovery, discovery method, host name, and discovery 27 | facility. 28 | - [ ] User can also see 'Clear' and 'Search' buttons in the query input panel. 29 | - [ ] User can select a single value from any one or all of the query 30 | dropdowns. 31 | - [ ] User can click the 'Search' button to search for exoplanets matching 32 | all of the selected query values. 33 | - [ ] User can see an error message if the 'Search' button was clicked, but 34 | no query values were selected. 35 | - [ ] User can see the matching exoplanet data displayed in tabular format 36 | in an results panel below the query panel. Only the queriable fields should 37 | be displayed. 38 | - [ ] User can click the 'Clear' button to reset the query selections and 39 | clear any data displayed in the results panel, if a search had been performed. 40 | 41 | ## Bonus features 42 | 43 | - [ ] User can see the host name as a hyperlink to NASA's Confirmed Planet 44 | Overview Page for that planet 45 | - [ ] User can click on the host name to display the Confirmed Planet Overview 46 | Page in a new browser tab. 47 | - [ ] User can see icons (such as up and down symbols) in the column headers 48 | - [ ] User can click on the up symbol to sort the rows in the results panel 49 | in ascending order on the values in that column. 50 | - [ ] User can click on the down symbol to sort the rows in the results panel 51 | in descending order on the values in the column. 52 | 53 | ## Useful links and resources 54 | 55 | - [Big O Notation (Wikipedia)](https://en.wikipedia.org/wiki/Big_O_notation) 56 | - [CSV2JSON](../1-Beginner/CSV2JSON-App.md) 57 | - [Exoplanet (Wikipedia)](https://en.wikipedia.org/wiki/Exoplanet) 58 | - [NASA Exoplanet Archive](https://exoplanetarchive.ipac.caltech.edu/cgi-bin/TblView/nph-tblView?app=ExoTbls&config=planets) 59 | 60 | ## Example projects 61 | 62 | N/a 63 | -------------------------------------------------------------------------------- /Projects/3-Advanced/Shell-Game.md: -------------------------------------------------------------------------------- 1 | # Shell Game 2 | 3 | **Tier:** 3-Advanced 4 | 5 | A Shell game is a classic gambling game that dates back to ancient Greece. 6 | Playing it requires three shells, a pea, hand dexterity by the operator, and 7 | keen observation skills on the part of the player. It's also a classic con 8 | game since its easy for the operator to swindle the player. Thank goodness 9 | the latter isn't our intent with this app. 10 | 11 | This Shell game is intended to provide a graphical interface to the classical 12 | shell game and to provide the player with an honest game to play. Our game 13 | draws three shells on the canvas along with the pea, moves the pea under one, 14 | of the shells, and shuffles the shells for a specific interval of time. The 15 | user must then click on the shell she thinks the pea is hidden under. The user 16 | is allowed to continue guessing until the pea is located. 17 | 18 | ## User Stories 19 | 20 | - [ ] User can see the canvas with three shells and the pea. 21 | - [ ] User can click the shell the pea is to be hidden under. 22 | - [ ] User can see the pea move under the shell that's been clicked. 23 | - [ ] User can click on a 'Shuffle' button to start an animated shuffling of 24 | the shells for 5 seconds. 25 | - [ ] User can click on the shell she believes the pea is hidden under when 26 | the animation stops. 27 | - [ ] User can see the shell that has been clicked rise to reveal if the pea 28 | is hidden under it. 29 | - [ ] User can continue clicking shells until the pea is found. 30 | - [ ] User can see a congratulations message when the pea is located 31 | - [ ] User can start a new game by clicking a shell the pea is to be hidden 32 | under (step #2 above). The steps above are then repeated. 33 | 34 | ## Bonus features 35 | 36 | - [ ] User can see a score panel containing the number of wins and the 37 | number of games played. 38 | - [ ] User can see the number of games played increase when the pea is hidden 39 | under a shell 40 | - [ ] User can see the number of wins incremented when the pea is found on 41 | the first guess. 42 | - [ ] User can see the shell hiding the pea to animate (color, size, or 43 | some other effect) when it is clicked (a correct guess). 44 | 45 | ## Useful links and resources 46 | 47 | - [Shell Game (Wikipedia)](https://en.wikipedia.org/wiki/Shell_game) 48 | - [Javascript HTML DOM Animation](https://www.w3schools.com/js/js_htmldom_animate.asp) 49 | - [p5js Animation Library](https://p5js.org/) 50 | 51 | ## Example projects 52 | 53 | [Shell Game](https://codepen.io/RedCactus/pen/dwEjXy) 54 | -------------------------------------------------------------------------------- /Projects/3-Advanced/Shuffle-Deck-App.md: -------------------------------------------------------------------------------- 1 | # Shuffle Card Deck 2 | 3 | **Tier:** 3-Advanced 4 | 5 | As a Web Developer you'll be asked to come up with innovative applications that 6 | solve real world problems for real people. But something you'll quickly learn 7 | is that no matter how many wonderful features you pack into an app users won't 8 | use it if it isn't performant. In other words, there is a direct link between 9 | how an app performs and whether users perceive it as usable. 10 | 11 | The objective of the Shuffle Card Deck app is to find the fastest technique for 12 | shuffling a deck of cards you can use in game apps you create. But, more 13 | important it will provide you with experience at measuring and evaluating app 14 | performance. 15 | 16 | Your task is to implement the performance evaluation algorithm, the Xorshift 17 | pseudorandom number generator, as well as the WELL512a.c algorithm if you 18 | choose to attempt the bonus feature. 19 | 20 | ## User Stories 21 | 22 | - [ ] User can see a panel containing a text box the user can enter the 23 | number of rounds into, three output text boxes to contain the starting time, 24 | ending time, and total time of the test, and two buttons - 'JS Random', 25 | 'Xorshift'. 26 | - [ ] User can enter a number from 1 to 10,000 to specify the number of 27 | times (or rounds) the selected random number is to be executed. 28 | - [ ] User can click one of the three buttons to start the evaluation of the 29 | selected random number algorithm. The random number algorithm will be executed 30 | for the number of rounds entered by the user above. 31 | - [ ] User can see a warning message if number of rounds has not been entered, 32 | if it is not within the range 1 to 10,000, or if it is not a valid integer. 33 | - [ ] User can see a tabular output area where the results of each algorithm 34 | are displayed - algorithm name, time started, time ended, and total time. 35 | - [ ] User can see a warning dialog with a 'Cancel' and a 'OK' button if the 36 | number of rounds is changed before all three tests have been run. 37 | - [ ] User can click the 'Cancel' button in the warning dialog to dismiss 38 | the dialog with no changes. 39 | - [ ] User can click the 'OK' button in the warning dialog to clear the 40 | output area and close the warning dialog. 41 | 42 | ## Bonus features 43 | 44 | - [ ] User can see a third algorithm button - 'WELL512a.c'. 45 | - [ ] Developer should review the output and determine why the fastest 46 | algorithm is faster than the slowest algorithm. 47 | 48 | ## Useful links and resources 49 | 50 | - [Random Number Generation (Wikipedia)](https://en.wikipedia.org/wiki/Random_number_generation) 51 | - [Math.random (MDN)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random) 52 | - [Xorshift (Wikipedia)](https://en.wikipedia.org/wiki/Xorshift) 53 | - [WELL512a.c](http://www.iro.umontreal.ca/~panneton/well/WELL512a.c) 54 | - [console.time (MDN)](https://developer.mozilla.org/en-US/docs/Web/API/Console/time) 55 | - [Using the Chrome DevTools Audit Feature to Measure and Optimize Performance (Part 1)](https://medium.com/chingu/using-the-chrome-devtools-audit-feature-to-measure-and-optimize-performance-part-1-868a20bbfde8) 56 | - [Using the Chrome DevTools Audit Feature to Measure and Optimize Performance (Part 2)](https://medium.com/chingu/using-the-chrome-devtools-audit-feature-to-measure-and-optimize-performance-part-2-af4a78bc6cf0) 57 | 58 | ## Example projects 59 | 60 | Add one or more examples of projects that have similar functionalities to this application. This will act as a guide for the developer. 61 | -------------------------------------------------------------------------------- /Projects/3-Advanced/Slack-Archiver.md: -------------------------------------------------------------------------------- 1 | # Slack Archiver 2 | 3 | **Tier:** 3-Advanced 4 | 5 | Slack is a tool many teams rely on for collaboration not only between 6 | developers, but also between developers and their users. It's especially 7 | attractive to Open Source Software (OSS) teams since it supports a highly 8 | functional free tier. 9 | 10 | One problem is the free tier is limited to a maximum of 10K messages. When 11 | this limit is reached older messages become unavailable since they are 12 | purged. This is very impactful to active Slack teams and communities since 13 | older messages quite often hold a great deal of "institutional knowledge" 14 | that's lost when the message limit is reached. 15 | 16 | The Slack Archiver seeks to remedy this situation by extracting the history 17 | for specific channels to an database or file. Messages could be extracted up to 18 | the maximum allowed limit of 50 messages per minute for the `channels.history` 19 | API method. At this rate (tier 4) 86.4K messages could be theoretically 20 | retrieved per day. 21 | 22 | Implementers are cautioned that further research will be required to 23 | determine the best extraction method to use prior to attempting any 24 | development of this application. 25 | 26 | ## User Stories 27 | 28 | - [ ] Allow the user to specify the channels to be archived. This includes both adding and removing channels from the list 29 | - [ ] Only the owners of the Slack Team should be allowed to archive messages 30 | - [ ] For each channel to be archived periodically extract messages starting from the last message retrieved in the last extract and write them to a database 31 | - [ ] Allow the user to copy and extracted channel to a file 32 | - [ ] Archiving should be an automatic process. Unlike a Slack 'bot, no manual intervention should be required to start or stop and archive operation 33 | 34 | ## Bonus features 35 | 36 | - [ ] Implement an API that allows an application to extract archived messages from the archive database 37 | 38 | ## Useful links and resources 39 | 40 | Details of the Slack API can be found [here](https://api.slack.com/). 41 | 42 | ## Example projects 43 | 44 | For an example of a commercial archiving application for Slack see 45 | [Chronicle](https://chingu-prework.slack.com/apps/A47KWM6Q4-chronicle) 46 | -------------------------------------------------------------------------------- /Projects/3-Advanced/SpellIt-App.md: -------------------------------------------------------------------------------- 1 | # Spell-It 2 | 3 | **Tier:** 3-Advanced 4 | 5 | Knowing how to spell is a fundamental part of being fluent in any language. 6 | Whether you are a youngster learning how to spell or an individual learning a 7 | new language being able to practice helps to solidify your language skills. 8 | 9 | The Spell-It app helps users practice their spelling by playing the audio 10 | recording of a word the user must then spell using the computer keyboard. 11 | 12 | ## User Stories 13 | 14 | - [ ] User can click the 'Play' button to hear the word that's to be entered 15 | - [ ] User can see letters displayed in the word input text box as they are 16 | entered on the keyboard 17 | - [ ] User can click the 'Enter' button to submit the word that has been 18 | typed in the word input text box 19 | - [ ] User can see a confirmation message when the correct word is typed 20 | - [ ] User can see a message requesting the word be typed again when it is 21 | spelled incorrectly 22 | - [ ] User can see a tally of the number of correct spellings, total number 23 | of words attempted, and a percentage of successful entries. 24 | 25 | ## Bonus features 26 | 27 | - [ ] User can hear an confirmation sound when the word is correctly spelled 28 | - [ ] User can hear a warning sound when the word is incorrectly spelled 29 | - [ ] User can click the 'Hint' button to highlight the incorrect letters 30 | in the word input text box 31 | - [ ] User can press the 'Enter' key on the keyboard to submit a typed word 32 | or click the 'Enter' button in the app window 33 | 34 | ## Useful links and resources 35 | 36 | - [Texas Instruments Speak and Spell]() 37 | - [Web Audio API](https://codepen.io/2kool2/pen/RgKeyp) 38 | - [Click and Speak](https://codepen.io/shangle/pen/Wvqqzq) 39 | 40 | ## Example projects 41 | 42 | - [Speak N Spell on Google Play](https://play.google.com/store/apps/details?id=au.id.weston.scott.SpeakAndSpell&hl=en_US) 43 | - [Word Wizard for iOS](https://itunes.apple.com/app/id447312716) 44 | -------------------------------------------------------------------------------- /Projects/3-Advanced/Survey-App.md: -------------------------------------------------------------------------------- 1 | # Survey App 2 | 3 | **Tier:** 3-Advanced 4 | 5 | Surveys are a valuable part of any developers toolbox. They are useful for 6 | getting feedback from your users on a variety of topics including application 7 | satisfaction, requirements, upcoming needs, issues, priorities, and just plain 8 | aggravations to name a few. 9 | 10 | The Survey app gives you the opportunity to learn by developing a full-featured 11 | app that will you can add to your toolbox. It provides the ability to define a 12 | survey, allow users to respond within a predefined timeframe, and tabulate 13 | and present results. 14 | 15 | Users of this app are divided into two distinct roles, each having different 16 | requirements: 17 | 18 | - _Survey Coordinators_ define and conduct surveys. This is an administrative 19 | function not available to normal users. 20 | - _Survey Respondents_ Complete surveys and view results. They have no 21 | administrative privileges within the app. 22 | 23 | Commercial survey tools include distribution functionality that mass emails 24 | surveys to Survey Respondents. For simplicity, this app assumes that surveys 25 | open for responses will be accessed from the app's web page. 26 | 27 | ## User Stories 28 | 29 | ### General 30 | 31 | - [ ] Survey Coordinators and Survey Respondents can define, conduct, and 32 | view surveys and survey results from a common website 33 | - [ ] Survey Coordinators can login to the app to access administrative 34 | functions, like defining a survey. 35 | 36 | ### Defining a Survey 37 | 38 | - [ ] Survey Coordinator can define a survey containing 1-10 multiple choice 39 | questions. 40 | - [ ] Survey Coordinator can define 1-5 mutually exclusive selections to each 41 | question. 42 | - [ ] Survey Coordinator can enter a title for the survey. 43 | - [ ] Survey Coordinator can click a 'Cancel' button to return to the home 44 | page without saving the survey. 45 | - [ ] Survey Coordinator can click a 'Save' button save a survey. 46 | 47 | ### Conducting a Survey 48 | 49 | - [ ] Survey Coordinator can open a survey by selecting a survey from a 50 | list of previously defined surveys 51 | - [ ] Survey Coordinators can close a survey by selecting it from a list of 52 | open surveys 53 | - [ ] Survey Respondent can complete a survey by selecting it from a list of 54 | open surveys 55 | - [ ] Survey Respondent can select responses to survey questions by clicking 56 | on a checkbox 57 | - [ ] Survey Respondents can see that a previously selected response will 58 | automatically be unchecked if a different response is clicked. 59 | - [ ] Survey Respondents can click a 'Cancel' button to return to the home 60 | page without submitting the survey. 61 | - [ ] Survey Respondents can click a 'Submit' button submit their responses 62 | to the survey. 63 | - [ ] Survey Respondents can see an error message if 'Submit' is clicked, 64 | but not all questions have been responded to. 65 | 66 | ### Viewing Survey Results 67 | 68 | - [ ] Survey Coordinators and Survey Respondents can select the survey to 69 | display from a list of closed surveys 70 | - [ ] Survey Coordinators and Survey Respondents can view survey results as 71 | in tabular format showing the number of responses for each of the possible 72 | selections to the questions. 73 | 74 | ## Bonus features 75 | 76 | - [ ] Survey Respondents can create a unique account in the app 77 | - [ ] Survey Respondents can login to the app 78 | - [ ] Survey Respondents cannot complete the same survey more than once 79 | - [ ] Survey Coordinators and Survey Respondents can view graphical 80 | representations of survey results (e.g. pie, bar, column, etc. charts) 81 | 82 | ## Useful links and resources 83 | 84 | Libraries for building surveys: 85 | 86 | - [SurveyJS](https://surveyjs.io/Overview/Library/) 87 | 88 | Some commercial survey services include: 89 | 90 | - [Survey Monkey](https://www.surveymonkey.com/) 91 | - [Traversy](https://youtu.be/SSDED3XKz-0) 92 | - [Typeform](https://www.typeform.com/) 93 | 94 | ## Example projects 95 | 96 | [Javascript Questionnaire](https://codepen.io/amyfu/pen/oLChg) 97 | 98 | [React Survey App](https://chamatt.github.io/survey-web-app/#/) ([Code](https://github.com/chamatt/survey-web-app)) -------------------------------------------------------------------------------- /Projects/3-Advanced/Tic-Tac-Toe.md: -------------------------------------------------------------------------------- 1 | ## Name 2 | Tic Tac Toe 3 | 4 | ## Difficulty 5 | Advanced 6 | 7 | ## 📝 Project Description 8 | Tic-tac-toe, noughts and crosses, or Xs and Os is a paper-and-pencil game for two players who take turns marking the spaces in a three-by-three grid with X or O. The player who succeeds in placing three of their marks in a horizontal, vertical, or diagonal row is the winner. 9 | 10 | ## 📑User Stories 11 | - [ ] User sees 3x3 grid 12 | - [ ] User can click on one of the 9 boxes and there will be an X drawn 13 | - [ ] When user clicks again there will be an O drawn 14 | - [ ] User can play online with others (use websockets or real time api or any other implementation you want that allows you to real time send and receive data) 15 | - [ ] When one user has lined three marks (X or O) horizontaly, vertically or diagonally they win and the game starts again 16 | 17 | ## 🌟 Bonus features (optional) 18 | - [ ] User can choose between singleplayer and multiplayer 19 | - [ ] User can play against a friend in private session (shared link) 20 | - [ ] User can log in or just type username (your choice) 21 | - [ ] Scoreboard will show who has most wins and games played 22 | - [ ] User can play against bot 23 | 24 | ## Useful links and resources 25 | - [wikipedia](https://en.wikipedia.org/wiki/Tic-tac-toe) 26 | - [Socket io](https://socket.io/) 27 | 28 | ## Example projects 29 | - [Google tic tac toe](https://www.google.com/search?client=firefox-b-d&q=tic+tac+toe) 30 | - [Github projects](https://github.com/topics/tic-tac-toe-game) 31 | -------------------------------------------------------------------------------- /Projects/4-Submissions/Blog.md: -------------------------------------------------------------------------------- 1 | # Blog 2 | 3 | Tier: 1-Beginner 4 | 5 | User can write text and publish it for other users to read. 6 | 7 | ## 📑User Stories 8 | - [ ] User can read one blog. 9 | - [ ] User can like blog post, at this point likes can be saved locally 10 | - [ ] User can remove like, at this point likes can be saved locally 11 | - [ ] User can see total likes of blog post, at this poin 0 or 1, if they are saved locally 12 | - [ ] User see comment field under the blog post 13 | - [ ] User can write comments, at this point comments can be saved locally 14 | - [ ] User see comments that they have written and send 15 | 16 | ## 🌟 Bonus features (optional) 17 | - [ ] User can create account 18 | - [ ] User likes on blog post are saved on server and are shown for other users. 19 | - [ ] User comments on blog post are saved on server and are shown for other users. 20 | - [ ] User can follow block writer. 21 | - [ ] Users can like like or dislike comments. Total amount of likes is saved on server and is shown for all users. 22 | - [ ] Users can write their own blog. 23 | - [ ] All blogs are listed. 24 | - [ ] All blogs by writers that user follow are be listed. 25 | - [ ] All blogs of the writer are be listed 26 | - [ ] User can sort all blog post by time, both newest to oldest and oldest to newest. 27 | - [ ] User can sort all blog post by popularity, both most to least and least to most 28 | - [ ] User can sort all blog post by authors name in alphapethical order both ways 29 | - [ ] After publishing blog post, author can edit it. 30 | - [ ] If author has edited their block post, it are shown, for example at the bottom "last edited at 10.30pm" 31 | - [ ] User can stylish the blog post with for example marksman or html. 32 | 33 | 34 | ## Useful links and resources 35 | - [Wikipedia](https://en.wikipedia.org/wiki/Blog) 36 | - [django](https://djangocentral.com/building-a-blog-application-with-django/) tutorial 37 | - [react](https://dev.to/kingdavid/learn-react-hook-by-building-a-simple-blog-app-22i2) tutorial 38 | 39 | ## Example projects 40 | - [nodejs](https://github.com/cosmicjs/simple-blog) github repo 41 | -------------------------------------------------------------------------------- /Projects/4-Submissions/Camera-App.md: -------------------------------------------------------------------------------- 1 | # Camera app 2 | Tier: 3-Advanced 3 | 4 | Take a photo using the camera on your computer or on your phone, the photo is then saved in a gallery where they can all be viewed 5 | 6 | ## User Stories 7 | - [ ] User can take a picture with the webcam or a cellphone camera 8 | - [ ] If user denies camera access from the browser, there should be a message which informs the user of that and how to change it 9 | - [ ] When a photo is snapped, the photo should be saved in the gallery 10 | - [ ] User can see a gallery (list) of photos that they have taken 11 | - [ ] Every photo should include the date on which it was taken 12 | - [ ] Each photo can be removed one by one 13 | 14 | ## Bonus features 15 | - [ ] Every photo shows the location in which it was taken 16 | - [ ] Every photo shows the location in which it was taken 17 | - [ ] User can download the image/video 18 | - [ ] User can turn on delay (a setting that counts down from 3 before taking a photo) 19 | - [ ] User can add a filter to their photo 20 | 21 | ## Useful links and resources: 22 | - [react-webcam](https://www.npmjs.com/package/react-webcam) 23 | - [geo API](https://geo.ipify.org/) 24 | - [Browser Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) 25 | - [Browser MediaDevices](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices) 26 | -------------------------------------------------------------------------------- /Projects/4-Submissions/Christmas-Calendar.md: -------------------------------------------------------------------------------- 1 | # Christmas Calendar 2 | 3 | ## Difficulty 4 | 5 | **Tier:** 1-Intermediate 6 | 7 | An Advent calendar is a special calendar used to count the days of Advent in anticipation of Christmas. Developers desing they own calendar and implements that as web app. Calendar that has 24 doors. Each door include content like text, video, recipe, link to a charity. Whatever you wanna include. If you dont celebrate cristmas and dont wanna do adcent calendar you can do something similar, be creative. 8 | 9 | ## 📑User Stories 10 | - [ ] User see 24 clickable objects that each include number (1-24) 11 | - [ ] When user clicks one of these buttons (doors), user can see content, for example text, image, video, quiz, recipe... 12 | - [ ] Door clicks have special sound 13 | 14 | ## 🌟 Bonus features (optional) 15 | - [ ] User can not open doors of days that are not yet past. How ever for reviewing purposes user should the content for most od doors 16 | - [ ] Users can create their own calenders 17 | - [ ] Users can set bg img for their calender 18 | - [ ] Users can add images, embed videos and text to their calender content 19 | - [ ] User can share their calender for others 20 | - [ ] All calenders are listed by popularity, if that is implemented. 21 | - [ ] Users can rate calenders made by others, for example upvote / downvote. This count will be shown in the list of calenders. 22 | 23 | ## Useful links and resources 24 | - [wikipedia](https://en.wikipedia.org/wiki/Advent_calendar) 25 | 26 | ## Example projects 27 | - [Example](https://calendar.myadvent.net/?id=6660d6a578f3c2afecaeb07ad5cdf43b) 28 | - [another example](https://www.adventcalendar.com/demo/) 29 | -------------------------------------------------------------------------------- /Projects/4-Submissions/Drum-Machine.md: -------------------------------------------------------------------------------- 1 | # Drum Machine 2 | Tier: 1-Advanced 3 | 4 | A drum machine is a device where you can program loops with different types of percussion sounds. A loop is usually 16-step bar long. The user creates drum patterns by placing sounds on a specific step. This creates a quantized beat, quantized means that each sound is placed on time. 5 | 6 | ## User Stories 7 | - [ ] The application should have at least 3 sounds to build a loop with, even before the user adds any of their own. A kick-drum, a snare drum and a hi-hat 8 | - [ ] As a user, I want to be able to place and remove the sounds anywhere I want along the 16-bar sequence 9 | - [ ] As a user, I want to be able to play the sequence of sounds that I have now built 10 | - [ ] As a user, I want to be able to put the sequence on loop so that it doesn't stop playing after 1 playthrough, this means that I as a user should also be able to stop the loop. 11 | - [ ] The drum machine should be set to 100BPM 12 | 13 | ## Bonus features 14 | - [ ] As a user I want to be able to add a new 16-bar loop with a different sound, that already exists in the app 15 | - [ ] As a user I want to be able to upload my own sounds that can be used in the drum machine 16 | - [ ] As a user i want to be able to change the BPM 17 | - [ ] As a user I want to be able to save a loop sequence that i have built 18 | 19 | ## Example projects 20 | [example 1](https://drumbit.app/) 21 | [example 2](https://www.musicca.com/drum-machine?data="4.0.1-4.2.1-4.4.1-4.6.1-4.8.1-4.10.1-4.12.1-4.14.1-5.4.1-5.12.1-6.0.1-6.8.1-m.-t.4-tmp.90-s.0") 22 | [example 3](https://www.onemotion.com/drum-machine/) 23 | -------------------------------------------------------------------------------- /Projects/4-Submissions/Magic-8-Ball.md: -------------------------------------------------------------------------------- 1 | # Magic 8 Ball 2 | 3 | **Tier:** 1-Beginner 4 | 5 | The Magic 8-Ball is a plastic sphere, made to look like an eight-ball, that is used for fortune-telling or seeking advice. It was invented in 1946 by Albert C. Carter and Abe Bookman and is currently manufactured by Mattel. The user asks a yes–no question to the ball, then turns it over to reveal an answer in a window on the ball. 6 | 7 | Magic 8 ball allows the user to enter a question and receive a response. 8 | 9 | ## User Stories 10 | 11 | - [ ] User can enter their question into an input field 12 | - [ ] User will receive a response after their question has been sent 13 | 14 | ## Bonus features 15 | 16 | - [ ] The user can view a history of all the questions they have asked 17 | - [ ] Restrict to maximum 5 questions per day 18 | 19 | ## Useful links and resources 20 | 21 | [Magic 8 Ball](https://en.wikipedia.org/wiki/Magic_8-Ball) 22 | 23 | ## Example projects 24 | 25 | [Codepen Demo](https://codepen.io/codifiedconcepts/pen/vXgvQL) 26 | -------------------------------------------------------------------------------- /Projects/4-Submissions/Polygon.io-api.md: -------------------------------------------------------------------------------- 1 | # Polygon.io API 2 | 3 | **Tier:** 1-Beginner 4 | 5 | Polygon supplies companies & developers with market data for stocks, currencies, forex, and crypto. We provide easy to use APIs to help you build the future of fintech. Powered by Open Source technology. 6 | 7 | ## User Stories 8 | 9 | - [ ] Create a web application using the Polygon.io API 10 | 11 | ## Useful links and resources 12 | 13 | [Polygon.io Documentation](https://polygon.io/docs/stocks) 14 | -------------------------------------------------------------------------------- /app-ideas.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevJamGroup/Projects-List/d11c9b32b489bda0ffe440ebb5f179b92dc3ab95/app-ideas.png --------------------------------------------------------------------------------