├── .github
└── ISSUE_TEMPLATE
│ ├── bug_report.md
│ └── feature_request.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
│ ├── 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
│ ├── 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
├── 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 |
--------------------------------------------------------------------------------
/.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 | ## Contribution Guide
2 |
3 | This guide will help us ensure that you have a simple and effective way to contribute to this project.
4 |
5 | - If you want to propose a new App Idea, please use the [Example Guide](./Example%20Guide.md) as a base template.
6 | - Before creating a Pull Request, please make sure that your suggestion is not already added to the project. You can submit an update if you believe it improves an existing idea.
7 | - Make sure you check your spelling and grammar.
8 | - Create individual PR for each suggestion.
9 |
10 | Thank you for spending your time to improve this project! ^\_^
11 |
--------------------------------------------------------------------------------
/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/First-DB-App.md:
--------------------------------------------------------------------------------
1 | # Your First DB App
2 |
3 | **Tier:** 1-Beginner
4 |
5 | Understanding database concepts and how to use them in your applications is
6 | knowledge all developers need to acquire. The objective of Your First DB App
7 | is to provide a gentle introduction to database concepts and learning one
8 | use case for databases in a frontend app.
9 |
10 | So, did you know that modern browsers have a database management system
11 | built into them? IndexedDB is built into most modern browsers and provides
12 | developers with basic database features, transaction support, and client-side
13 | cross-session persistance.
14 |
15 | ### Requirements & Constraints
16 |
17 | - The primary use case for a browser based database is to maintain state or
18 | status information that needs to persist across sessions, or as a work area
19 | for temporary data. For example, data retrieved from a server that must be
20 | reformatted or cleansed before it's presented to the user.
21 |
22 | - It is important to keep in mind that since the client-side browser
23 | environment cannot be secured you should not maintain any confidential or
24 | personal identifying information (PII) in a browser based database.
25 |
26 | - The following Javascript class is provided with the functionality to allow
27 | your app to initially populate and clear the database from the browser so you
28 | can test the query logic you'll be adding. You'll be required to hook up
29 | buttons on the web page you build to the `clearDB` and `loadDB` functions, and
30 | to write your own `queryDB` handler to connect to the `Query DB` button. You'll
31 | also need to add a `queryAllRows` function to the Customer class.
32 | ```js
33 | class Customer {
34 | constructor(dbName) {
35 | this.dbName = dbName;
36 | if (!window.indexedDB) {
37 | window.alert("Your browser doesn't support a stable version of IndexedDB. \
38 | Such and such feature will not be available.");
39 | }
40 | }
41 |
42 | /**
43 | * Remove all rows from the database
44 | * @memberof Customer
45 | */
46 | removeAllRows = () => {
47 | const request = indexedDB.open(this.dbName, 1);
48 |
49 | request.onerror = (event) => {
50 | console.log('removeAllRows - Database error: ', event.target.error.code,
51 | " - ", event.target.error.message);
52 | };
53 |
54 | request.onsuccess = (event) => {
55 | console.log('Deleting all customers...');
56 | const db = event.target.result;
57 | const txn = db.transaction('customers', 'readwrite');
58 | txn.onerror = (event) => {
59 | console.log('removeAllRows - Txn error: ', event.target.error.code,
60 | " - ", event.target.error.message);
61 | };
62 | txn.oncomplete = (event) => {
63 | console.log('All rows removed!');
64 | };
65 | const objectStore = txn.objectStore('customers');
66 | const getAllKeysRequest = objectStore.getAllKeys();
67 | getAllKeysRequest.onsuccess = (event) => {
68 | getAllKeysRequest.result.forEach(key => {
69 | objectStore.delete(key);
70 | });
71 | }
72 | }
73 | }
74 |
75 | /**
76 | * Populate the Customer database with an initial set of customer data
77 | * @param {[object]} customerData Data to add
78 | * @memberof Customer
79 | */
80 | initialLoad = (customerData) => {
81 | const request = indexedDB.open(this.dbName, 1);
82 |
83 | request.onerror = (event) => {
84 | console.log('initialLoad - Database error: ', event.target.error.code,
85 | " - ", event.target.error.message);
86 | };
87 |
88 | request.onupgradeneeded = (event) => {
89 | console.log('Populating customers...');
90 | const db = event.target.result;
91 | const objectStore = db.createObjectStore('customers', { keyPath: 'userid' });
92 | objectStore.onerror = (event) => {
93 | console.log('initialLoad - objectStore error: ', event.target.error.code,
94 | " - ", event.target.error.message);
95 | };
96 |
97 | // Create an index to search customers by name and email
98 | objectStore.createIndex('name', 'name', { unique: false });
99 | objectStore.createIndex('email', 'email', { unique: true });
100 |
101 | // Populate the database with the initial set of rows
102 | customerData.forEach(function(customer) {
103 | objectStore.put(customer);
104 | });
105 | db.close();
106 | };
107 | }
108 | }
109 |
110 | // Web page event handlers
111 | const DBNAME = 'customer_db';
112 |
113 | /**
114 | * Clear all customer data from the database
115 | */
116 | const clearDB = () => {
117 | console.log('Delete all rows from the Customers database');
118 | let customer = new Customer(DBNAME);
119 | customer.removeAllRows();
120 | }
121 |
122 | /**
123 | * Add customer data to the database
124 | */
125 | const loadDB = () => {
126 | console.log('Load the Customers database');
127 |
128 | // Customers to add to initially populate the database with
129 | const customerData = [
130 | { userid: '444', name: 'Bill', email: 'bill@company.com' },
131 | { userid: '555', name: 'Donna', email: 'donna@home.org' }
132 | ];
133 | let customer = new Customer(DBNAME);
134 | customer.initialLoad(customerData);
135 | }
136 | ```
137 |
138 |
139 | ## User Stories
140 |
141 | - [ ] User can see a web page containing a control panel containing three
142 | buttons - 'Load DB', 'Query DB', and 'Clear DB'.
143 | - [ ] User can see a notification panel where status messages will be posted.
144 | - [ ] User can see a scrollable log panel where execution details describing
145 | the apps operation and interface with the Customer instance will be posted.
146 | - [ ] User can see a running history of notification panel messages in the log
147 | panel.
148 | - [ ] User can see a scrollable query results area where retrieved customer
149 | data will be displayed.
150 | - [ ] User can click the 'Load DB' button to populate the database with data.
151 | The 'Load DB' button in your UI should be hooked to the `loadDB` event handler
152 | that's provided.
153 | - [ ] User can see a message displayed in the notification panel when the
154 | data load operation starts and ends.
155 | - [ ] User can click the 'Query DB' button to list all customers in the query
156 | results area. The 'Query DB' button in your UI should be hooked to a `queryDB`
157 | event handler you will add to the program.
158 | - [ ] User can see a message in the notification panel when the query starts
159 | and ends.
160 | - [ ] User can see a message in the query results area if there are no rows
161 | to display.
162 | - [ ] User can click on the 'Clear DB' button to remove all rows from the
163 | database. The 'Clear DB' button in your UI should be hooked to the `clearDB`
164 | event handler that's provided.
165 | - [ ] User can see a message in the notification panel when the clear
166 | operation starts and ends.
167 |
168 | ## Bonus features
169 |
170 | - [ ] User can see buttons enabled and disabled according to the following
171 | table.
172 |
173 | | State | Load DB | Query DB | Clear DB |
174 | |---------------------|----------|----------|----------|
175 | | Initial App display | enabled | enabled | disabled |
176 | | Load DB clicked | disabled | enabled | enabled |
177 | | Query DB clicked | disabled | enabled | enabled |
178 | | Clear DB clicked | enabled | enabled | disabled |
179 |
180 | - [ ] User can see additional Customer data fields added to those included
181 | in the code provided. Developer should add date of last order and total sales
182 | for the year.
183 | - [ ] Developer should conduct a retrospection on this project:
184 | - What use cases can you see for using IndexedDB in your frontend apps?
185 | - What advantages and disadvantages can you see over using a file or
186 | local storage?
187 | - In general, what criteria might you use to determine if IndexedDB is right
188 | for your app. (Hint: 100% yes or no is not a valid answer).
189 |
190 |
191 | ## Useful links and resources
192 |
193 | - [IndexedDB Concepts (MDN)](http://tinyw.in/7TIr)
194 | - [Using IndexedDB (MDN)](http://tinyw.in/w6k0)
195 | - [IndexedDB API (MDN)](http://tinyw.in/GqnF)
196 | - [IndexedDB Browser Support](https://caniuse.com/#feat=indexeddb)
197 |
198 | ## Example projects
199 |
200 | - N/a
201 |
--------------------------------------------------------------------------------
/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 | `<hello-in-native-language> <user-name> 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 <user-name>!`
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/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/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](<https://en.wikipedia.org/wiki/Concentration_(game)>)
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/Charity-Finder-App.md:
--------------------------------------------------------------------------------
1 | # Charity Finder
2 |
3 | **Tier:** 2-Intermediate
4 |
5 | With the Charity Finder app you'll not only get to refine your Web Developer
6 | skills, but you will also have an opportunity to see how you can do good. The
7 | objective of this app is to utilize the [Global Giving](https://www.globalgiving.org/) organizations API to provide your users with a list of global charities they
8 | can search to find a charity that matches their philanthropic interests.
9 |
10 | ### Constraints
11 | - Since the app is asking the user to choose and contribute to a charitable
12 | cause it's important that the presentation of information be clear and concise.
13 | Just as important is the need for the UI/UX to be polished and engaging to use.
14 |
15 | Although this is true of all apps, its even more the case here since each
16 | user that abandons the site represents the loss of an opportunity to do good
17 | (see ['What is Web Site Conversion?](##useful-links-and-resources)) below.
18 |
19 | ## User Stories
20 |
21 | - [ ] User can see a page heading containing the application name.
22 | - [ ] User can see an overview of what the app is intended for in 'splash'
23 | page format.
24 | - [ ] User can see a search area containing an set of drop down boxes that
25 | allow the user to specify search criteria for charitable organizations
26 | including:
27 | - Organization name
28 | - Organizations home country
29 | - Countries the organization serves
30 | - [ ] User can see a 'Search' button
31 | - [ ] User can click on the 'Search' button to display information cards
32 | for the matching organizations in a search results area.
33 | - [ ] User can see organization information cards in the search results area
34 | containing:
35 | - ID
36 | - Name
37 | - Address
38 | - Logo
39 | - [ ] User can click the logo in the organizations information card to open a
40 | new window to that organizations home page.
41 | - [ ] User can see a page footer with links to your GitHub and social media
42 | accounts including social media icons (like the Twitter icon).
43 |
44 | ## Bonus features
45 |
46 | - [ ] User can see a search dropdown for themes the charity focuses on.
47 | - [ ] User can select multiple options in the search dropdowns.
48 | - [ ] User can see a project link (e.g. 'PROJECT') on the organization
49 | information card.
50 | - [ ] User can click on the project link to display a page with information
51 | describing the Global Giving project the organization is associated with.
52 | Hint: examine the structure of the JSON returned from the API to understand
53 | the relationship between projects and organizations.
54 |
55 | ## Useful links and resources
56 |
57 | - [What is Web Site Conversion?](https://www.marketing91.com/what-is-website-conversion/)
58 | - [Global Giving API](https://www.globalgiving.org/api/)
59 | - Sample XML for a project returned through the API:
60 | ```
61 | <?xml version="1.0" encoding="UTF-8" standalone="yes"?>
62 | <projects numberFound="26842">
63 | <hasNext>true</hasNext>
64 | <nextProjectId>367</nextProjectId>
65 | <project>
66 | <active>false</active>
67 | <activities>To fund the training of health professionals including nurses, psychologists, and social workers, and buy medicine and equipment.</activities>
68 | <additionalDocumentation>https://www.globalgiving.org/pfil/359/projdoc.doc</additionalDocumentation>
69 | <approvedDate>2004-06-01T12:43:27-04:00</approvedDate>
70 | <contactAddress>28 Pine Street</contactAddress>
71 | <contactCity>Mechanic Falls</contactCity>
72 | <contactCountry>United States</contactCountry>
73 | <contactPostal>04256</contactPostal>
74 | <contactState>Maine</contactState>
75 | <contactUrl>http://groups.yahoo.com/group/FOCUSonCambodia</contactUrl>
76 | <country>Cambodia</country>
77 | <funding>8239.33</funding>
78 | <goal>55000.00</goal>
79 | <id>359</id>
80 | <image id="0">
81 | <imagelink size="small">
82 | <url>https://www.globalgiving.org/pfil/359/pict_grid1.jpg</url>
83 | </imagelink>
84 | <imagelink size="thumbnail">
85 | <url>https://www.globalgiving.org/pfil/359/pict_thumbnail.jpg</url>
86 | </imagelink>
87 | <imagelink size="medium">
88 | <url>https://www.globalgiving.org/pfil/359/pict_med.jpg</url>
89 | </imagelink>
90 | <imagelink size="large">
91 | <url>https://www.globalgiving.org/pfil/359/pict_grid7.jpg</url>
92 | </imagelink>
93 | <imagelink size="extraLarge">
94 | <url>https://www.globalgiving.org/pfil/359/pict_large.jpg</url>
95 | </imagelink>
96 | <imagelink size="original">
97 | <url>https://www.globalgiving.org/pfil/359/pict_original.jpg</url>
98 | </imagelink>
99 | <title>Improving the Health of Children in Cambodia</title>
100 | </image>
101 | <imageGallerySize>1</imageGallerySize>
102 | <imageLink>https://www.globalgiving.org/pfil/359/pict.jpg</imageLink>
103 | <iso3166CountryCode>KH</iso3166CountryCode>
104 | <longTermImpact>This project will help improve the mental and physical health of orphaned children in Cambodia. This project will also ensure the sustainability of the Nutrition Center in Child Mental Health Center.</longTermImpact>
105 | <need>Our beneficiaries will be orphaned children suffering from AIDS/HIV and other diseases and children with mental health problems whose parents do not know how to cope because they were deprived of family experiences by the forced separations of the Pol Pot regime. At the Nutrition Center in Phnom Penh, we will help urban orphans from brothels and hospitals that have abandoned them. At the Child Mental Health Center, we will help families, largely the working poor, from all over Cambodia.</need>
106 | <numberOfDonations>102</numberOfDonations>
107 | <organization>
108 | <activeProjects>0</activeProjects>
109 | <addressLine1>1062 Lewiston Road</addressLine1>
110 | <addressLine2></addressLine2>
111 | <bridgeId>5824171103</bridgeId>
112 | <city>New Gloucester</city>
113 | <countries>
114 | <country>
115 | <iso3166CountryCode>KH</iso3166CountryCode>
116 | <name>Cambodia</name>
117 | </country>
118 | </countries>
119 | <country>United States</country>
120 | <id>10</id>
121 | <iso3166CountryCode>US</iso3166CountryCode>
122 | <mission>The mission of FOCUS is to pursue humanitarian programs that include medical aid, school construction and supplies, distribution of rice and rice seeds, road improvements, agricultural improvements, fish farms, basic housing, hospital restoration, school scholarships, and loans for infrastructure improvements. We want to help disadvantaged youth and their families, if they have any, in a country where the infrastructure is still weak due to Khmer Rouge depredations.</mission>
123 | <name>Friends of Cambodia in the U.S. (FOCUS)</name>
124 | <postal>4260</postal>
125 | <state>Maine</state>
126 | <themes>
127 | <theme>
128 | <id>health</id>
129 | <name>Health</name>
130 | </theme>
131 | </themes>
132 | <totalProjects>2</totalProjects>
133 | <url></url>
134 | </organization>
135 | <progressReportLink>https://www.globalgiving.org/projects/educating-children-of-cambodia/updates/</progressReportLink>
136 | <projectLink>https://www.globalgiving.org/projects/educating-children-of-cambodia/</projectLink>
137 | <region>Asia and Oceania</region>
138 | <remaining>46760.67</remaining>
139 | <status>funded</status>
140 | <summary>To help abandoned children, many afflicted with HIV/AIDS, and children with mental health problems. We want to address lack of food, medicine and staff training.</summary>
141 | <themeName>Health</themeName>
142 | <title>Improving the Health of Children in Cambodia</title>
143 | <type>project</type>
144 | </project>
145 | </projects>
146 | ```
147 |
148 | ## Example projects
149 |
150 | [Playing with card layout](https://codepen.io/bradjdouglas/pen/xOZJRz)
151 |
--------------------------------------------------------------------------------
/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 | - [ ] User can click a 'Results' button to display the tallies of
34 | correct and incorrect answers.
35 | - [ ] User can click a 'Reset' button to reset the tallies of correct
36 | and incorrect answers.
37 | - [ ] User can click a 'Shuffle' button to re-randomize the "deck"
38 | - [ ] User can click a 'More Info' button to flip the flash card to see
39 | additional information. For example, detailed information about the subject
40 | of the question on the front of the card.
41 |
42 | ## Useful links and resources
43 |
44 | The definitive source for HTML/CSS/Javascript is [MDN](https://developer.mozilla.org/en-US/)
45 |
46 | Example Javascript questions and answers can be found at
47 | [Brainscape](https://www.brainscape.com/subjects/javascript).
48 |
49 | ## Example projects
50 |
51 | [Vintage Multiplication Flash Cards](https://codepen.io/NinoLopezTech/pen/vJBMpZ)
52 |
--------------------------------------------------------------------------------
/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 | In the [GitHub Status](../1-Beginner/GitHub-Status-App.md) app you learned how to use the
6 | Request package to scrape information from a web page. The Podcast Directory
7 | continues this process and introduces you to another web scraping package -
8 | [Puppeteer](https://github.com/GoogleChrome/puppeteer).
9 |
10 | Although Request is a useful package it isn't built specifically for web
11 | scraping like Puppeteer. As you gain experience with web scraping you'll find
12 | that there are web sites and applications where web scraping is made easier
13 | by using a tool like Puppeteer that is specifically built for scaping.
14 |
15 | It is important to note that while web scraping has its place, the use of
16 | an API or a data source such as a file or database is always preferable to
17 | scraping information from a page. The reason being that even minor changes to
18 | page styling can render your web scraper inoperable. For example, the change
19 | of a CSS class name your scraping logic is dependent on.
20 |
21 | The goal of the Podcast Directory app is to pull the most recent episodes of
22 | the [Javascript Jabber](https://www.podbean.com/podcast-detail/d4un8-57595/JavaScript-Jabber-Podcast)
23 | and [Techpoint Charlie](https://www.podbean.com/podcast-detail/k76vd-8adc7/Techpoint-Charlie-Podcast)
24 | podcasts from [Podbean](https://www.podbean.com) and create a new page that
25 | creates a combined list of episodes, sorted by broadcast date.
26 |
27 | ## User Stories
28 |
29 | - [ ] User can see a table of podcast episodes
30 | - [ ] User can see rows in this table showing a clickable episode icon, the
31 | title of the episode, and the date it was originally broadcast.
32 | - [ ] User can scroll through the list
33 | - [ ] User can click on the episode icon to display that episodes page on
34 | the Podbean web site.
35 |
36 | ## Bonus features
37 |
38 | - [ ] User can see rows in the episode table have alternating background
39 | colors.
40 | - [ ] User can see a summary above the episode table showing the number
41 | of episodes for each podcast.
42 | - [ ] User can see a clickable checkbox next to each podcast name in the
43 | summary above the episode table.
44 | - [ ] User can click the radio button next to the podcast name to include
45 | episodes for that podcast in the episode table.
46 |
47 | ## Useful links and resources
48 |
49 | - [Puppeteer](https://github.com/GoogleChrome/puppeteer)
50 | - [Web Scraping with a Headless Browser: A Puppeteer Tutorial](https://www.toptal.com/puppeteer/headless-browser-puppeteer-tutorial)
51 | - [querySelectorAll](https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/querySelectorAll)
52 | - Hint! You can use the following code to help you get started with this
53 | project. You can execute this using the command line command `node puptest`.
54 | ```
55 | // puptest.js
56 | const puppeteer = require('puppeteer');
57 |
58 | const run = async () => {
59 | return new Promise(async (resolve, reject) => {
60 | try {
61 | const browser = await puppeteer.launch();
62 | const page = await browser.newPage();
63 | await page.goto("https://www.podbean.com/podcast-detail/d4un8-57595/JavaScript-Jabber-Podcast");
64 | let episodeLinks = await page.evaluate(() => {
65 | return Array.from(document.querySelectorAll('a.title')).map((item) => ({
66 | url: item.getAttribute('href'),
67 | text: item.innerText
68 | })
69 | );
70 | });
71 | browser.close();
72 | return resolve(episodeLinks);
73 | } catch (e) {
74 | return reject(e);
75 | }
76 | })
77 | }
78 |
79 | run()
80 | .then(console.log)
81 | .catch(console.error);
82 | ```
83 | - When you have completed this project check out the advanced project
84 | [MyPodcast Library](../3-Advanced/MyPodcast-Library-app.md)
85 |
86 | ## Example projects
87 |
88 | N/a
89 |
--------------------------------------------------------------------------------
/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 <user-name> <user-name>...<user-name>` 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 Game Engine (BGE) implements the classic turn-based board game as a
6 | package that's separated from any presentation layer. This is a type of
7 | architectural pattern that useful in many application since it allows
8 | any number of apps to utilize the same service.
9 |
10 | The BGE itself is invoked through a series of function calls rather than
11 | through directly coupled end user actions. In this respect using the BGE is
12 | is similar to using an API or a series of routes exposed by a web server.
13 |
14 | This challenge requires that you develop the BGE and a very thin, text-based
15 | presentation layer for testing that's separate from the engine itself. Due to
16 | this the User Stories below are divided two sets - one for the BGE and one
17 | for the text-based presentation layer.
18 |
19 | BGE is responsible for maintaining game state.
20 |
21 | ## User Stories
22 |
23 | ### BGE
24 |
25 | - [ ] Caller 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:
26 |
27 | - Destroyer: 2 squares
28 | - Cruiser: 3 squares
29 | - Battleship: 4 squares
30 |
31 | `startGame()` will randomly place these ships on the board in any direction and will return an array representing ship placement.
32 |
33 | - [ ] Caller 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.
34 |
35 | 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.
36 |
37 | ### Text-based Presentation Layer
38 |
39 | - [ ] User can see the hits and misses array displayed as a 2 dimensional character representation of the game board returned by the `startGame()` function.
40 | - [ ] User can be prompted to enter the coordinates of a target square on the game board.
41 | - [ ] User can see an updated hits and misses array display after taking a shot.
42 | - [ ] User can see a message after each shot indicating whether the shot resulted in a hit or miss.
43 | - [ ] User can see an congratulations message after the shot that sinks the last remaining ship.
44 | - [ ] User can be prompted to play again at the end of each game. Declining to play again stops the game.
45 |
46 | ## Bonus features
47 |
48 | ### BGE
49 |
50 | - [ ] Caller can specify the number of rows and columns in the game board as a parameter to the `startGame()` function.
51 | - [ ] Caller 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.
52 | - [ ] Caller can specify the number of players (1 or 2) when calling `startGame()` which will generate one board for each player randomly populated with ships.
53 |
54 | `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.
55 |
56 | ### Text-based Presentation Layer
57 |
58 | - [ ] 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)
59 | - [ ] 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)
60 | - [ ] User can see the player number in prompts associated with the inputs in each turn.
61 | - [ ] User can see both players boards at the end of each turn.
62 |
63 | ## Useful links and resources
64 |
65 | - [Battleship Game (Wikipedia)](<https://en.wikipedia.org/wiki/Battleship_(game)>)
66 | - [Battleship Game Rules (Hasbro)](https://www.hasbro.com/common/instruct/battleship.pdf)
67 |
68 | ## Example projects
69 |
70 | This YouTube video shows how a text-based [Battleship Game](https://www.youtube.com/watch?v=TKksu3JXTTM) is played.
71 |
72 | 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.
73 |
74 | - [Battleship Game by Chris Brody](https://codepen.io/CodifyAcademy/pen/ByBEOz)
75 |
--------------------------------------------------------------------------------
/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 #<pr-number> created for repo <repo name> - <repo description>`.
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 <slack-id> <text>` where:
15 |
16 | - `<slack-id>` defines the individual receiving the recognition
17 | - `<text>` is your kudo for that person
18 |
19 | - [ ] User can modify a kudu using the Slack command: `/kudo replace <kudo-id> <text>` where:
20 |
21 | - `<action>` is 'replace' or 'delete'
22 | - `<kudo-id>` is the kudo identifier
23 | - `<text>` is your kudo for that person
24 |
25 | - [ ] User can delete a kudu using the Slack command: `/kudo delete <kudo-id>`
26 |
27 | - [ ] User may display the most recent _n_ kudos using the Slack command: `/kudo list <n>` 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 <slack-id>`
30 |
31 | ## Bonus features
32 |
33 | - [ ] User may list the individual having the most kudos, in descending order, user the Slack command: `/kudo top <n>` 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](<https://en.wikipedia.org/wiki/Speak_%26_Spell_(toy)>)
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))
--------------------------------------------------------------------------------
/app-ideas.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/florinpop17/app-ideas/08b771c8632d04c0d011f2600afcf2e44689918f/app-ideas.png
--------------------------------------------------------------------------------