[ { "path": ".github/ISSUE_TEMPLATE/bug_report.md", "content": "---\nname: Bug report\nabout: Create a report to help us improve\ntitle: ''\nlabels: ''\nassignees: ''\n\n---\n\n**Describe the bug**\nA clear and concise description of what the bug is.\n\n**To Reproduce**\nSteps to reproduce the behavior:\n1. Go to '...'\n2. Click on '....'\n3. Scroll down to '....'\n4. See error\n\n**Expected behavior**\nA clear and concise description of what you expected to happen.\n\n**Screenshots**\nIf applicable, add screenshots to help explain your problem.\n\n**Desktop (please complete the following information):**\n - OS: [e.g. iOS]\n - Browser [e.g. chrome, safari]\n - Version [e.g. 22]\n\n**Smartphone (please complete the following information):**\n - Device: [e.g. iPhone6]\n - OS: [e.g. iOS8.1]\n - Browser [e.g. stock browser, safari]\n - Version [e.g. 22]\n\n**Additional context**\nAdd any other context about the problem here.\n" }, { "path": ".github/ISSUE_TEMPLATE/feature_request.md", "content": "---\nname: Feature request\nabout: Suggest an idea for this project\ntitle: ''\nlabels: ''\nassignees: ''\n\n---\n\n**Is your feature request related to a problem? Please describe.**\nA clear and concise description of what the problem is. Ex. I'm always frustrated when [...]\n\n**Describe the solution you'd like**\nA clear and concise description of what you want to happen.\n\n**Describe alternatives you've considered**\nA clear and concise description of any alternative solutions or features you've considered.\n\n**Additional context**\nAdd any other context or screenshots about the feature request here.\n" }, { "path": ".gitignore", "content": ".DS_Store\n" }, { "path": "CODE_OF_CONDUCT.md", "content": "# Contributor Covenant Code of Conduct\n\n## Our Pledge\n\nIn the interest of fostering an open and welcoming environment, we as\ncontributors and maintainers pledge to making participation in our project and\nour community a harassment-free experience for everyone, regardless of age, body\nsize, disability, ethnicity, sex characteristics, gender identity and expression,\nlevel of experience, education, socio-economic status, nationality, personal\nappearance, race, religion, or sexual identity and orientation.\n\n## Our Standards\n\nExamples of behavior that contributes to creating a positive environment\ninclude:\n\n* Using welcoming and inclusive language\n* Being respectful of differing viewpoints and experiences\n* Gracefully accepting constructive criticism\n* Focusing on what is best for the community\n* Showing empathy towards other community members\n\nExamples of unacceptable behavior by participants include:\n\n* The use of sexualized language or imagery and unwelcome sexual attention or\n advances\n* Trolling, insulting/derogatory comments, and personal or political attacks\n* Public or private harassment\n* Publishing others' private information, such as a physical or electronic\n address, without explicit permission\n* Other conduct which could reasonably be considered inappropriate in a\n professional setting\n\n## Our Responsibilities\n\nProject maintainers are responsible for clarifying the standards of acceptable\nbehavior and are expected to take appropriate and fair corrective action in\nresponse to any instances of unacceptable behavior.\n\nProject maintainers have the right and responsibility to remove, edit, or\nreject comments, commits, code, wiki edits, issues, and other contributions\nthat are not aligned to this Code of Conduct, or to ban temporarily or\npermanently any contributor for other behaviors that they deem inappropriate,\nthreatening, offensive, or harmful.\n\n## Scope\n\nThis Code of Conduct applies both within project spaces and in public spaces\nwhen an individual is representing the project or its community. Examples of\nrepresenting a project or community include using an official project e-mail\naddress, posting via an official social media account, or acting as an appointed\nrepresentative at an online or offline event. Representation of a project may be\nfurther defined and clarified by project maintainers.\n\n## Enforcement\n\nInstances of abusive, harassing, or otherwise unacceptable behavior may be\nreported by contacting the project team at popflorin1705@yahoo.com. All\ncomplaints will be reviewed and investigated and will result in a response that\nis deemed necessary and appropriate to the circumstances. The project team is\nobligated to maintain confidentiality with regard to the reporter of an incident.\nFurther details of specific enforcement policies may be posted separately.\n\nProject maintainers who do not follow or enforce the Code of Conduct in good\nfaith may face temporary or permanent repercussions as determined by other\nmembers of the project's leadership.\n\n## Attribution\n\nThis Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,\navailable at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html\n\n[homepage]: https://www.contributor-covenant.org\n\nFor answers to common questions about this code of conduct, see\nhttps://www.contributor-covenant.org/faq\n" }, { "path": "CONTRIBUTING.md", "content": "## Contribution Guide\n\nThis guide will help us ensure that you have a simple and effective way to contribute to this project.\n\n- If you want to propose a new App Idea, please use the [Example Guide](./Example%20Guide.md) as a base template.\n- 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.\n- Make sure you check your spelling and grammar.\n- Create individual PR for each suggestion.\n\nThank you for spending your time to improve this project! ^\\_^\n" }, { "path": "Example Guide.md", "content": "# Application Name\n\n**Tier:** Add corresponding tier (1-Beginner, 2-Intermediate, 3-Advanced)\n\nAdd a clear description of the application and its main features.\nAnswer the following questions:\n\n- \"What is the purpose of this application?\"\n- \"Are there any resources needed in order to complete the project?\" - If yes, be sure to add it.\n\n## User Stories\n\n- [ ] User can ... first user story\n- [ ] User can ... second user story\n- [ ] User can ... third user story\n- [ ] User can ... fourth user story\n- [ ] User can ... fifth user story\n- etc...\n\n## Bonus features\n\n- [ ] User can ... first bonus feature\n- [ ] User can ... second bonus feature\n- etc...\n\n## Useful links and resources\n\nAdd useful links and resources corresponding to this project.\n\n## Example projects\n\nAdd one or more examples of projects that have similar functionality to this application. This will act as a developer guide.\n" }, { "path": "LICENSE", "content": "MIT License\n\nCopyright (c) 2018 Florin Pop\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n" }, { "path": "Projects/1-Beginner/Bin2Dec-App.md", "content": "# Bin2Dec\n\n**Tier:** 1-Beginner\n\nBinary is the number system all digital computers are based on.\nTherefore it's important for developers to understand binary, or base 2,\nmathematics. The purpose of Bin2Dec is to provide practice and\nunderstanding of how binary calculations.\n\nBin2Dec allows the user to enter strings of up to 8 binary digits, 0's\nand 1's, in any sequence and then displays its decimal equivalent.\n\nThis challenge requires that the developer implementing it follow these\nconstraints:\n\n- Arrays may not be used to contain the binary digits entered by the user\n- Determining the decimal equivalent of a particular binary digit in the\n sequence must be calculated using a single mathematical function, for\n example the natural logarithm. It's up to you to figure out which function\n to use.\n\n## User Stories\n\n- [ ] User can enter up to 8 binary digits in one input field\n- [ ] User must be notified if anything other than a 0 or 1 was entered\n- [ ] User views the results in a single output field containing the decimal (base 10) equivalent of the binary number that was entered\n\n## Bonus features\n\n- [ ] User can enter a variable number of binary digits\n\n## Useful links and resources\n\n[Binary number system](https://en.wikipedia.org/wiki/Binary_number)\n\n## Example projects\n\nTry not to view this until you've developed your own solution:\n\n- [Binary to decimal conversion program for beginners](https://www.youtube.com/watch?v=YMIALQE26KQ)\n- [Binary to Decimal converter using React](https://github.com/email2vimalraj/Bin2Dec)\n- [Binary to Decimal converter with plain html, js and css](https://grfreire.github.io/Bin2Dec/)\n- [Binary to Decimal converter using Flutter & Dart](https://github.com/israelss/AppIdeasCollection/tree/master/Tier1/Bin2Dec)\n - [Live preview built with Flutter for Web](https://bin2dec.web.app/#/)\n- [Binary to Decimal converter using React](https://github.com/geoffctn/Bin2Dec)\n- [Matrix-like Binary to Decimal converter using Angular](https://github.com/ZangiefWins/MatrixBin2Dec)\n - [Live preview on heroku](https://matrix-bin2dec.herokuapp.com/)\n" }, { "path": "Projects/1-Beginner/Border-Radius-Previewer.md", "content": "# Border-radius Previewer\n\n**Tier:** 1-Beginner\n\nThe border-radius property can have multiple values changed. Preview how the shape looks while changing these values.\n\n## User Stories\n\n- [ ] User can see a box which has a `border-radius` property applied to it\n- [ ] User can change the 4 `border-radius` values that are applied to the box (top-left, top-right, bottom-left, bottom-right)\n- [ ] User can copy the resulting CSS to the clipboard\n\n## Bonus features\n\n- [ ] User can change all 8 possible values of the border-radius in order to create a complex shape\n\n## Useful links and resources\n\n- [CSS3 Borders](https://www.w3schools.com/css/css3_borders.asp)\n- [Copy to Clipboard](https://www.w3schools.com/howto/howto_js_copy_clipboard.asp)\n\n## Example projects\n\n- [9elements Fancy Border Radius](https://9elements.github.io/fancy-border-radius/)\n- [Border Radius](https://border-radius.com/)\n- [CSS Gradient Border](https://codepen.io/thebabydino/pen/zbqPVd)\n" }, { "path": "Projects/1-Beginner/CSV2JSON-App.md", "content": "# CSV2JSON\n\n**Tier:** 1-Beginner\n\nIn the [JSON2CSV](./JSON2CSV-App.md) application you translated JSON \nto a comma separated value (CSV) format. The objective of CSV2JSON is to \nreverse that process by converting a block of CSV text to JSON.\n\nIn CSV2JSON you'll start by copying the JSON2CSV app you created and then\nmodify it to allow CSV to JSON conversion as well the JSON to CSV conversion\nthat's already present. In additional to providing a useful function, this\nchallenge will also give you practice in modifying existing applications to\nadd new functionality.\n\n### Constraints ###\n\n- Read the user stories below carefully. Some of the functionality created\nfor JSON2CSV will need to be modified.\n- You may not use any libraries or packages designed to perform this type of\nconversion.\n- Nested JSON structures are not supported.\n\n## User Stories\n\n- [ ] User can paste CSV syntax into a text box\n- [ ] User can click a 'Convert to JSON' button to validate the CSV text box and convert it to JSON\n- [ ] User can see an warning message if the CSV text box is empty or if it doesn't contain valid CSV\n- [ ] User can see the converted CSV in the JSON text box\n\n### Stories already implemented in JSON2CSV \n- [ ] User can paste JSON syntax into a text box\n- [ ] User can click a 'Convert to CSV' button to validate the JSON text box and convert it to CSV\n- [ ] User can see an warning message if the JSON text box is empty or if it doesn't contain valid JSON\n- [ ] User can click a 'Clear' button to clear the contents of both the JSON and CSV text boxes.\n\n## Bonus features\n\n- [ ] User can enter the path to the CSV file on the local file system in a text box\n- [ ] User can click a 'Open CSV' button to load file containing the CSV into the text box\n- [ ] User can see a warning message if the CSV file is not found\n- [ ] 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\n- [ ] User can see a warning message if the CSV text box is empty or if the save operation failed.\n- [ ] User can enter the path to the JSON file on the local file system in a text box\n- [ ] User can click a 'Open JSON' button to load file containing the JSON into the text box\n- [ ] User can see a warning message if the JSON file is not found\n- [ ] 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\n- [ ] User can see a warning message if the JSON text box is empty or if the save operation failed.\n\n## Useful links and resources\n\n- [Comma Separated Values (CSV)](https://en.wikipedia.org/wiki/Comma-separated_values)\n- [JavaScript Object Notation (JSON)](https://www.json.org/)\n- [Saving a file with pure JS](https://codepen.io/davidelrizzo/pen/cxsGb)\n- [Reading files in Javascript](https://codepen.io/jduprey/details/xbale)\n\n## Example projects\n\n- [CSV to JSON Converter](https://codepen.io/JFarrow/pen/CAwyo)\n- [JSV Converter](https://gpaiva00.github.io/json-csv)\n" }, { "path": "Projects/1-Beginner/Calculator-App.md", "content": "# Calculator\n\n**Tier:** 1-Beginner\n\nCalculators are not only one of the most useful tools available, but they are\nalso a great way to understand UI and event processing in an application. In\nthis problem you will create a calculator that supports basic arithmetic\ncalculations on integers. \n\nThe styling is up to you so use your imagination and get creative! You might\nalso find it worth your time to experiment with the calculator app on your\nmobile device to better understand basic functionality and edge cases.\n\n### Constraints\n\n- You may not use the `eval()` function to execute calculations\n\n## User Stories\n\n- [ ] User can see a display showing the current number entered or the\nresult of the last operation.\n- [ ] User can see an entry pad containing buttons for the digits 0-9, \noperations - '+', '-', '/', and '=', a 'C' button (for clear), and an 'AC'\nbutton (for clear all).\n- [ ] User can enter numbers as sequences up to 8 digits long by clicking on\ndigits in the entry pad. Entry of any digits more than 8 will be ignored.\n- [ ] User can click on an operation button to display the result of that\noperation on:\n * the result of the preceding operation and the last number entered OR\n * the last two numbers entered OR\n * the last number entered\n- [ ] User can click the 'C' button to clear the last number or the last\noperation. If the users last entry was an operation the display will be\nupdated to the value that preceded it.\n- [ ] User can click the 'AC' button to clear all internal work areas and\nto set the display to 0.\n- [ ] User can see 'ERR' displayed if any operation would exceed the \n8 digit maximum.\n\n## Bonus features\n\n- [ ] User can click a '+/-' button to change the sign of the number that is\ncurrently displayed.\n- [ ] User can see a decimal point ('.') button on the entry pad to that \nallows floating point numbers up to 3 places to be entered and operations to\nbe carried out to the maximum number of decimal places entered for any one\nnumber.\n\n## Useful links and resources\n\n- [Calculator (Wikipedia)](https://en.wikipedia.org/wiki/Calculator)\n- [MDN](https://developer.mozilla.org/en-US/)\n\n## Example projects\n\n- [BHMBS - JS-Neumorphic-Calculator](https://barhouum7.github.io/JS-Neumorphic-Calc.github.io/)\n- [Javascript iOS Style Calculator](https://codepen.io/ssmkhrj/full/jOWBQqO)\n- [Javascript Calculator](https://codepen.io/giana/pen/GJMBEv)\n- [React Calculator](https://codepen.io/mjijackson/pen/xOzyGX)\n- [Javascript-CALC](https://github.com/x0uter/javascript-calc)\n- [Sample Calculator](https://sevlasnog.github.io/sample-calculator)\n- [Python Calculator](https://github.com/kana800/Side-Projects/tree/master/1-Beginner/calculator)\n" }, { "path": "Projects/1-Beginner/Calendar-App.md", "content": "# My calendar\n\n**Tier:** 3-Advanced\n\nBuild a calendar application to organize you daily life. Add functionality to add events and reminder.\nStyle your own calendar according to your requirement\n\n- Understanding how calendar application works\n- Only basic understanding of HTML/CSS and JS is required\n- Working on more features help you learning advance concepts of JS\n\n## User Stories\n\n- [ ] User can create event\n- [ ] User can edit event\n- [ ] User can delete event\n\n## Bonus features\n\n- [ ] User can drag events between dates\n- [ ] User can set reminder for a event\n- [ ] Change theme (light/dark) (play with css), play with css šŸ˜„\n- [ ] Store data locally so that events does not get deleted when server is restarted\n\n## Useful links and resources\n\n- [Local Storage](https://blog.logrocket.com/the-complete-guide-to-using-localstorage-in-javascript-apps-ba44edb53a36/)\n- [MDN](https://developer.mozilla.org/en-US/)\n- [Design Ideas](https://dribbble.com/tags/calendar)\n\n## Example projects\n\n- [Simple calendar](https://medium.com/@nitinpatel_20236/challenge-of-building-a-calendar-with-pure-javascript-a86f1303267d)\n- [eCalendar](https://github.com/muzhaqi16/eCalendar)\n" }, { "path": "Projects/1-Beginner/Cause-Effect-App.md", "content": "# CauseEffect\n\n**Tier:** 1-Beginner\n\nPatterns are integral to software engineering and represent potentially\nreusable components in program logic. However, patterns aren't used only\nfor program logic, they are exist in other domains such as DevOps, user\nsupport, and the user interface.\n\nA common user interface pattern is to summarize data in one section of a page\nthat consists of some type of list (like text, images, or icons) that describes\nor categorizes a set of data. When a list item is clicked, the detailed data\nbehind it is displayed in an adjacent pane on the page.\n\nFor example, on a real estate site clicking an address in a list of properties\nfor sale displays the details about the property in another part of the\npage.\n\nThis challenge requires that the developer implementing it follow these\nconstraints:\n\n- You are responsible for creating your own test data. Use a hardcoded\n Javascript object to define your test data (see below).\n- Use only native HTML/CSS/Javascript in your first version of this app\n- You may use other packages or libraries when implementing subsequent\n versions.\n\n## User Stories\n\n- [ ] User can see a list of person names arranged vertically in a summary\n pane on the page.\n- [ ] User can click on a name in the list to update an adjacent pane on the\n page with that individuals full name, address, telephone number, and\n birthday.\n- [ ] User can click on another name in the list to refresh the detail pane\n with that individuals information.\n\n## Bonus features\n\n- [ ] User can see the person name in the summary pane highlighted when the\n cursor is hovered over it.\n- [ ] User can see the person name in the summary pane highlighted\n using a selection effect (color, size, etc.) when it is clicked. This is a\n different effect from the hover effect\n- [ ] User can see the selection effect removed from a name in the summary\n list when a new name is clicked.\n\n## Useful links and resources\n\n- [DOM Events](https://developer.mozilla.org/en-US/docs/Web/API/Event)\n- Consider defining your test data in a JavaScript object having a format\n such as this:\n\n```\nconst people = [\n {name: \"...\", street: \"...\", city: \"...\", state: \"...\", country: \"...\", telephone: \"...\", birthday: \"...\"},\n .\n .\n .\n {name: \"...\", street: \"...\", city: \"...\", state: \"...\", country: \"...\", telephone: \"...\", birthday: \"...\"}\n];\n```\n\n## Example projects\n\nCheckout the interaction between the Navigation items on the left hand side\nof the page and the main body of the page on the [Javascript MDN site](https://developer.mozilla.org/en-US/docs/Web/JavaScript)\n" }, { "path": "Projects/1-Beginner/Christmas-Lights-App.md", "content": "# Christmas Lights\n\n**Tier:** 1-Beginner\n\nThe ChristmasLights application relies on your development talents to create\na mesmerizing light display. Your task is to draw seven colored circles\nin a row and based on a timer change the intensity of each circle. When\na circle is brightened it's predecessor returns to its normal intensity.\n\nThis simulates the effect of a string of rippling lights, similar to the ones\ndisplayed during the Christmas Holidays.\n\n## User Stories\n\n- [ ] User can press a button to start and stop the display\n- [ ] User can change the interval of time controlling the change in intensity\n\n## Bonus features\n\n- [ ] User can select the color used to fill each circle\n- [ ] User can specify the intensity value\n- [ ] User can change the size of any circle in the row\n- [ ] User can specify the number of rows to be included in the display. From\n one to seven rows can be chosen\n\n## Useful links and resources\n\n- [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)\n- [Adafruit LED Matrix](https://cdn-shop.adafruit.com/970x728/1487-02.jpg)\n\n## Example projects\n\n[PureCSSChristmasLights](https://codepen.io/tobyj/pen/QjvEex)\n[Christmas Lights](https://codepen.io/irfanezani_/pen/mdeLpKo)\n\n\n" }, { "path": "Projects/1-Beginner/Color-Cycle-App.md", "content": "# ColorCycle\n\n**Tier:** 1-Beginner\n\nThe use of color plays a major role in an applications User Interface and\nUser Experience (UI/UX). ColorCycle seeks to help WebDev's better understand\nRBG colors by making small changes to a colored box over time.\n\nThis app draws a box filled with a user specified color and makes small changes\nover time also based on user input. In other words, from cycles through\nchanges to the originally specified color. These changes allow the user to\nexperience the visual impact different changes to the individual parts of\nan RGB color specification (e.g. `#000000` color code).\n\n## User Stories\n\n- [ ] User can specify a starting fill color as a six hexadecimal standard\n CSS color code in three individual components of two digits each - red,\n blue, and green\n- [ ] User can specify an increment value for each color component that will\n be added to that component every .25 second\n- [ ] User can see the box containing the fill color change every .25 seconds\n- [ ] User can only change the color components and their increments when\n the app is stopped\n- [ ] User can start and stop the fill operation using a button whose name\n changes to 'Start' when stopped and 'Stop' when started\n- [ ] User will receive an warning if something other than hexadecimal digits\n are entered for the color components\n\n## Bonus features\n\n- [ ] User can change the time interval between color changes\n- [ ] User can specify the color encoding format used from RGB to another format like HSL\n\n## Useful links and resources\n\n[CSS Color Codes](https://qhmit.com/css/css_color_codes.cfm)\n\n## Example projects\n\n[CSS Color Changing Background](https://codepen.io/SoumyajitChand/pen/wjKVed)\n" }, { "path": "Projects/1-Beginner/Countdown-Timer-App.md", "content": "# Countdown Timer\n\n**Tier:** 1-Beginner\n\nWe all have important events we look forward to in life, birthdays,\nanniversaries, and holidays to name a few. Wouldn't it be nice to have an app\nthat counts down the months, days, hours, minutes, and seconds to an event?\nCountdown Timer is just that app!\n\nThe objective of Countdown Timer is to provide a continuously decrementing\ndisplay of the he months, days, hours, minutes, and seconds to a user entered\nevent.\n\n### Constraints\n\n- Use only builtin language functions for your calculations rather than relying\non a library or package like [MomentJS](https://momentjs.com/). This assumes,\nof course, that the language of your choice has adequate date and time\nmanipulation functions built in.\n- You may not use any code generators such as the \n[Counting Down To](https://countingdownto.com/) site. You should develop your\nown original implementation. \n\n## User Stories\n\n- [ ] User can see an event input box containing an event name field, an\ndate field, an optional time, and a 'Start' button.\n- [ ] User can define the event by entering its name, the date it is\nscheduled to take place, and an optional time of the event. If the time is \nomitted it is assumed to be at Midnight on the event date in the local time\nzone.\n- [ ] User can see a warning message if the event name is blank.\n- [ ] User can see a warning message if the event date or time are incorrectly\nentered. \n- [ ] User can see a warning message if the time until the event data and time\nthat has been entered would overflow the precision of the countdown timer.\n- [ ] User can click on the 'Start' button to see the countdown timer start\ndisplaying the days, hours, minutes, and seconds until the event takes place.\n- [ ] User can see the elements in the countdown timer automatically\ndecrement. For example, when the remaining seconds count reaches 0 the remaining\nminutes 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. \n\n## Bonus features\n\n- [ ] User can save the event so that it persists across sessions\n- [ ] User can see an alert when the event is reached\n- [ ] User can specify more than one event. \n- [ ] User can see a countdown timers for each event that has been defined.\n\n## Useful links and resources\n\n- Images of analog tube-based countdown timers can be found \n[here](https://nixieshop.com/)\n- [`clearInterval` MDN](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval)\n- [`setInterval` MDN](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval)\n- [Date MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date)\n\n## Example projects\n\n[Simple Clock/Countdown Timer](https://codepen.io/karlo-stekovic/pen/OajKVK)\n[Countdown Timer built with React](https://www.florin-pop.com/blog/2019/05/countdown-built-with-react/)\n" }, { "path": "Projects/1-Beginner/Dollars-To-Cents-App.md", "content": "# Dollars To Cents\n\n**Tier:** 1-Beginner\n\nConverting dollars to cents would enable you to practice your fundamental knowledge of programming. Loops, if conditions and a simple algorithm will be used.\nYour 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.\n\nThe challenge: Try this without using any frameworks.\n\n(EX. If you have $0.58, I would have 4 coins: 2 quarters, 0 dimes, 1 nickel and 3 pennies)\n\n## User Stories\n\n- [ ] User can enter a dollar value\n- [ ] User can see the total cents from the converted dollar value\n\n## Bonus features\n\n- [ ] User can see how many were pennies, nickels, quarters and dimes from the total cents\n\n## Useful links and resources\n\n- [Math functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math)\n- [Loops and iterations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration)\n- [Money values in JavaScript](https://timleland.com/money-in-javascript/)\n\n## Example projects\n\n- [Dollars to cents converter](https://github.com/LimonJuice322/Dollars-to-cents-converter)\n" }, { "path": "Projects/1-Beginner/Dynamic-CSSVar-app.md", "content": "# Dynamic CSS Variables\n\n**Tier:** 1-Beginner\n\nCSS variables are a powerful tool that lets the developer associate a symbolic\nname with a value, and then use that name in the stylesheet wherever that\nvalue is required. The advantage is that when a change to that value is \nrequired it only needs to change in the CSS variable definition rather than in\nthe many spots it may be used.\n\nWhat can make this even more powerful is to dynamically change the value of a\nCSS variable at runtime.\n\nThe goal of this app is to dynamically change the background color of text boxes\nbased to let you gain experience using both CSS variables and dynamically \nchanging them from within the app.\n\n## User Stories\n\n- [ ] User can see three two boxes to be used to enter a User ID and Password\nalong with 'Cancel' and 'Login' buttons underneath them. The default background\ncolor of the text boxes is white.\n- [ ] User can enter a user id and password into the text boxes.\n- [ ] User can click the 'Login' button to validate the user id and password.\n- [ ] User can see a warning message if one or both of the text boxes contains\nspaces and the background color of the empty text box will change to light\nyellow.\n- [ ] User can see a warning message if the user id doesn't match 'testuser'\nand the background color of the text box will change to light red.\n- [ ] User can see a warning message if the password doesn't match 'mypassword'\nand the background color of the text box will change to light red.\n- [ ] User can click the 'Cancel' button to clear the text boxes and reset\ntheir background colors to white.\n\n## Bonus features\n\n- [ ] User can see the color of the text box border change when an error is\ndetected\n- [ ] User can see the size and font of the contents of the text box change\nwhen an error is detected.\n\n## Useful links and resources\n\n- [Custom properties (--*): CSS variables (MDN)](https://developer.mozilla.org/en-US/docs/Web/CSS/--*)\n- [CSSStyleDeclaration (MDN)](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration)\n\n## Example projects\n\n[Dynamic CSS Variables](https://codepen.io/gordawn/pen/oOWBXX)\n" }, { "path": "Projects/1-Beginner/First-DB-App.md", "content": "# Your First DB App\n\n**Tier:** 1-Beginner\n\nUnderstanding database concepts and how to use them in your applications is\nknowledge all developers need to acquire. The objective of Your First DB App\nis to provide a gentle introduction to database concepts and learning one\nuse case for databases in a frontend app.\n\nSo, did you know that modern browsers have a database management system\nbuilt into them? IndexedDB is built into most modern browsers and provides\ndevelopers with basic database features, transaction support, and client-side\ncross-session persistance.\n\n### Requirements & Constraints\n\n- The primary use case for a browser based database is to maintain state or\nstatus information that needs to persist across sessions, or as a work area\nfor temporary data. For example, data retrieved from a server that must be\nreformatted or cleansed before it's presented to the user.\n\n- It is important to keep in mind that since the client-side browser\nenvironment cannot be secured you should not maintain any confidential or\npersonal identifying information (PII) in a browser based database.\n\n- The following Javascript class is provided with the functionality to allow\nyour app to initially populate and clear the database from the browser so you\ncan test the query logic you'll be adding. You'll be required to hook up \nbuttons on the web page you build to the `clearDB` and `loadDB` functions, and\nto write your own `queryDB` handler to connect to the `Query DB` button. You'll\nalso need to add a `queryAllRows` function to the Customer class.\n```js\nclass Customer {\n constructor(dbName) {\n this.dbName = dbName;\n if (!window.indexedDB) {\n window.alert(\"Your browser doesn't support a stable version of IndexedDB. \\\n Such and such feature will not be available.\");\n }\n }\n\n /**\n * Remove all rows from the database\n * @memberof Customer\n */\n removeAllRows = () => {\n const request = indexedDB.open(this.dbName, 1);\n\n request.onerror = (event) => {\n console.log('removeAllRows - Database error: ', event.target.error.code,\n \" - \", event.target.error.message);\n };\n\n request.onsuccess = (event) => {\n console.log('Deleting all customers...');\n const db = event.target.result;\n const txn = db.transaction('customers', 'readwrite');\n txn.onerror = (event) => {\n console.log('removeAllRows - Txn error: ', event.target.error.code,\n \" - \", event.target.error.message);\n };\n txn.oncomplete = (event) => {\n console.log('All rows removed!');\n };\n const objectStore = txn.objectStore('customers');\n const getAllKeysRequest = objectStore.getAllKeys();\n getAllKeysRequest.onsuccess = (event) => {\n getAllKeysRequest.result.forEach(key => {\n objectStore.delete(key);\n });\n }\n }\n }\n\n /**\n * Populate the Customer database with an initial set of customer data\n * @param {[object]} customerData Data to add\n * @memberof Customer\n */\n initialLoad = (customerData) => {\n const request = indexedDB.open(this.dbName, 1);\n\n request.onerror = (event) => {\n console.log('initialLoad - Database error: ', event.target.error.code,\n \" - \", event.target.error.message);\n };\n\n request.onupgradeneeded = (event) => {\n console.log('Populating customers...');\n const db = event.target.result;\n const objectStore = db.createObjectStore('customers', { keyPath: 'userid' });\n objectStore.onerror = (event) => {\n console.log('initialLoad - objectStore error: ', event.target.error.code,\n \" - \", event.target.error.message);\n };\n\n // Create an index to search customers by name and email\n objectStore.createIndex('name', 'name', { unique: false });\n objectStore.createIndex('email', 'email', { unique: true });\n\n // Populate the database with the initial set of rows\n customerData.forEach(function(customer) {\n objectStore.put(customer);\n });\n db.close();\n };\n }\n}\n\n// Web page event handlers\nconst DBNAME = 'customer_db';\n\n/**\n * Clear all customer data from the database\n */\nconst clearDB = () => {\n console.log('Delete all rows from the Customers database');\n let customer = new Customer(DBNAME);\n customer.removeAllRows();\n}\n\n/**\n * Add customer data to the database\n */\nconst loadDB = () => {\n console.log('Load the Customers database');\n\n // Customers to add to initially populate the database with\n const customerData = [\n { userid: '444', name: 'Bill', email: 'bill@company.com' },\n { userid: '555', name: 'Donna', email: 'donna@home.org' }\n ];\n let customer = new Customer(DBNAME);\n customer.initialLoad(customerData);\n}\n```\n\n\n## User Stories\n\n- [ ] User can see a web page containing a control panel containing three\nbuttons - 'Load DB', 'Query DB', and 'Clear DB'.\n- [ ] User can see a notification panel where status messages will be posted.\n- [ ] User can see a scrollable log panel where execution details describing \nthe apps operation and interface with the Customer instance will be posted. \n- [ ] User can see a running history of notification panel messages in the log\npanel.\n- [ ] User can see a scrollable query results area where retrieved customer\ndata will be displayed.\n- [ ] User can click the 'Load DB' button to populate the database with data.\nThe 'Load DB' button in your UI should be hooked to the `loadDB` event handler\nthat's provided. \n- [ ] User can see a message displayed in the notification panel when the \ndata load operation starts and ends.\n- [ ] User can click the 'Query DB' button to list all customers in the query \nresults area. The 'Query DB' button in your UI should be hooked to a `queryDB`\nevent handler you will add to the program.\n- [ ] User can see a message in the notification panel when the query starts\nand ends.\n- [ ] User can see a message in the query results area if there are no rows\nto display.\n- [ ] User can click on the 'Clear DB' button to remove all rows from the \ndatabase. The 'Clear DB' button in your UI should be hooked to the `clearDB` \nevent handler that's provided.\n- [ ] User can see a message in the notification panel when the clear\noperation starts and ends.\n\n## Bonus features\n\n- [ ] User can see buttons enabled and disabled according to the following\ntable.\n\n | State | Load DB | Query DB | Clear DB |\n |---------------------|----------|----------|----------|\n | Initial App display | enabled | enabled | disabled |\n | Load DB clicked | disabled | enabled | enabled |\n | Query DB clicked | disabled | enabled | enabled |\n | Clear DB clicked | enabled | enabled | disabled |\n \n- [ ] User can see additional Customer data fields added to those included\nin the code provided. Developer should add date of last order and total sales\nfor the year.\n- [ ] Developer should conduct a retrospection on this project:\n - What use cases can you see for using IndexedDB in your frontend apps?\n - What advantages and disadvantages can you see over using a file or \n local storage?\n - In general, what criteria might you use to determine if IndexedDB is right\n for your app. (Hint: 100% yes or no is not a valid answer).\n\n\n## Useful links and resources\n\n- [IndexedDB Concepts (MDN)](http://tinyw.in/7TIr)\n- [Using IndexedDB (MDN)](http://tinyw.in/w6k0)\n- [IndexedDB API (MDN)](http://tinyw.in/GqnF)\n- [IndexedDB Browser Support](https://caniuse.com/#feat=indexeddb)\n\n## Example projects\n\n- N/a\n" }, { "path": "Projects/1-Beginner/Flip-Image-App.md", "content": "# FlipImage\n\n**Tier:** 1-Beginner\n\nIt's important for Web Developers to understand the basics of manipulating\nimages since rich web applications rely on images to add value to the user\ninterface and user experience (UI/UX).\n\nFlipImage explores one aspect of image manipulation - image rotation. This\napp displays a square pane containing a single image presented in a 2x2\nmatrix. Using a set of up, down, left, and right arrows adjacent to each\nof the images the user may flip them vertically or horizontally.\n\nYou must only use native HTML, CSS, and Javascript to implement this app.\nImage packages and libraries are not allowed.\n\n## User Stories\n\n- [ ] User can see a pane containing a single image repeated in a 2x2 matrix\n- [ ] 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\n\n## Bonus features\n\n- [ ] User can change the default image by entering the URL of a different image in an input field\n- [ ] User can display the new image by clicking a 'Display' button next to the input field\n- [ ] User can see an error message if the new images URL is not found\n\n## Useful links and resources\n\n- [How to Flip an Image](https://www.w3schools.com/howto/howto_css_flip_image.asp)\n- [Create a CSS Flipping Animatin](https://davidwalsh.name/css-flip)\n\n## Example projects\n\n[Image Effects by @bennettfeely](https://codepen.io/seyedi/pen/gvqYQv)\n" }, { "path": "Projects/1-Beginner/GitHub-Status-App.md", "content": "# GitHub Status\n\n**Tier:** 1-Beginner\n\nWeb apps acquire data in many ways. Through user input in web pages, through\nAPI's to backend systems, from files and databases, and sometimes by \"scraping\"\nwebsites. The objective of the GitHub Status app is to introduce you to one\nway to scrape information from another web site.\n\nGitHub Status uses the NPM Request package to retrieve the current GitHub site\nstatus from the [GitHub Status](https://www.githubstatus.com/) web site. The\nRequest package allows websites to be retrieved not to a browser window, but\nas a JSON document that can be readily accessed by your code.\n\nAlthough this application specification relies heavily on Javascript, feel free\nto develop it using your language of choice!\n\n## User Stories\n\n- [ ] User can see the current status for GitHub Git operations, API Requests,\nOperational Issues, PRs, Dashboard, & Projects, Operational Notifications,\nOperational Gists, and Operational GitHub Pages as a list in the main app\nwindow.\n- [ ] User can retrieve the most recent status from the GitHub Status web\nsite by clicking a 'Get Status' button.\n\n## Bonus features\n\n- [ ] User can see any of the GitHub components that are not in 'Operational'\nstatus highlighted by a different color, background animation, or any other\ntechnique to make it stand out. Use your imagination!\n\n## Useful links and resources\n\n- [Web Scraping (Wikipedia)](https://en.wikipedia.org/wiki/Web_scraping)\n- [NPM Request](https://www.npmjs.com/package/request)\n- [Javascript JSON (MDN)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON)\n- [Javascript Object Notation](https://json.org/)\n- Hint! You can use the following code to display the JSON for the GitHub Status\nweb site page from the command line command `node ghstatus`. You can use this \noutput to determine which JSON element contain the status information you'll \nneed to develop this app.\n```\nghstatus.js\n\nconst request = require('request');\nrequest('https://www.githubstatus.com/', { json: true }, (err, res, body) => { \n console.log(body);\n});\n```\n\n## Example projects\n\n- [Peter Luczynski's example](https://peterluczynski.github.io/github-status/)\n- [Diogo Moreira's example](https://diogomoreira.github.io/github-status/)\n" }, { "path": "Projects/1-Beginner/Hello-App.md", "content": "# Hello\n\n**Tier:** 1-Beginner\n\nIt is a given that applications must provide users with the functionality\nnecessary to accomplish some task or goal. The effectiveness of app functionality\nis the first determinate of how users perceive the apps they use. However, it\nis not the only thing that influences user satisfaction.\n\nThe User Interface and User Experience (UI/UX) features developers build into\napps have at least an equal amount of influence on users perception of an app.\nIt may be an oversimplification, but UI/UX is largely (but not wholly)\nconcerned with an apps \"form\". Personalization is an aspect of UX that tailors\ncharacteristics and actions to\nthe individual user. Personalizing app functionality in this manner works to\nmake the app easier and more pleasing to use.\n\nThe objective of the Hello app is to leverage geolocation to obtain the users\ncountry so it can then generate a customized greeting in the users native\nlanguage.\n\n### Constraints\n\n- Developers should use the [IP-API](http://ip-api.com/docs/api:json) service\n to obtain the users IP.\n- Developers should use the\n [Fourtonfish](https://www.fourtonfish.com/hellosalut/hello/) service to\n obtain the greeting in the users native language by passing the users IP.\n- Developers must use a HTML entities decoding to decode the hello message.\n\n## User Stories\n\n- [ ] User can see a mock login panel containing a user name text input field,\n a password text input field, and 'Login' and 'Logout' buttons.\n- [ ] User can enter a mock login name into the User Name field.\n- [ ] User can enter a mock password into the Password field. Input should\n be masked so the user see's asterisks (`*`) for each character that is entered\n rather than the plaintext password.\n- [ ] User can click the 'Login' button to perform a mock login.\n- [ ] User can see a message if either or both of the input fields are empty\n and the border color of the field(s) in error should be changed to red.\n- [ ] User can see a login acknowledgement message in the format:\n ` you have successfully logged in!`\n- [ ] User can click the 'Logout' button to clear the text input fields and\n any previous messages.\n- [ ] User can see a new message when successfully logged out in the format:\n `Have a great day !`\n\n## Bonus features\n\n- [ ] User can see an additional text input field for a language code which\n will be used to override the IP obtained through geolocation. Hint:\n this is a great feature for testing your app.\n- [ ] User can see additional geolocation information after logging on that\n includes at least the local IP address, city, region, country name, zip code,\n longitude, latitude, and timezone.\n\n## Useful links and resources\n\n- [Form Follows Function (Wikipedia)](https://en.wikipedia.org/wiki/Form_follows_function)\n- [Personalization (Wikipedia)](https://en.wikipedia.org/wiki/Personalization)\n- [Fourtonfish](https://www.fourtonfish.com/hellosalut/hello/)\n- [IP-API](http://ip-api.com/docs/api:json)\n\n## Example projects\n\n[Fourtonfish Hello World](https://fourtonfish.com/hellosalut/helloworld/)\n" }, { "path": "Projects/1-Beginner/IOT-Mailbox-App.md", "content": "# IOT Mailbox Simulator\n\n**Tier:** 1-Beginner\n\nThe objective of the IOT Mailbox Simulator is to mimic how an Internet of Things\n(IOT) enabled physical mailbox might be used to notify you when \"snail\" mail \nhas arrived. In doing so it will provide you with experience using callbacks\nto communicate state between different components of an app that are dependent\non one another.\n\n### Requirements & Constraints\n\n- Even though this app is specified using Javascript concepts and terminology\nyou are free to implement it in the language of your choice. \n\n- The following Javascript class is provided to start and stop the monitoring\nprocess, and to signal the app web page with the state of the mailbox door\n(open or closed) at preset intervals. Keep in mind that the interval you specify\nshouldn't exceed the time it normally takes to open or close the door or you\nmight miss a delivery!\n```\n/**\n * Monitor the light levels inside an IOT enabled snail mailbox to detect\n * when the mailbox door has been opened and closed.\n * @class IOTMailbox\n */\nclass IOTMailbox {\n /**\n * Creates an instance of IOTMailbox.\n * @param {number} [signalInterval=500] Timer interval for checking mailbox status.\n * @param {function} signalCallback Function to invoke when the timer interval expires.\n * @memberof IOTMailbox\n */\n constructor(signalInterval = 500, signalCallback) {\n this.signalInterval = signalInterval;\n this.signalCallback = signalCallback;\n this.intervalID = null;\n this.lastLightLevel = 0;\n }\n\n /**\n * Start monitoring of the mailbox and invoke the caller specified callback\n * function when the interval expires.\n * @memberof IOTMailbox\n */\n startMonitoring = () => {\n console.log(`Starting monitoring of mailbox...`);\n this.intervalID = window.setInterval(this.signalStateChange, this.signalInterval);\n }\n\n /**\n * Stop monitoring the mailbox status\n * @memberof IOTMailbox\n */\n stopMonitoring = () => {\n if (this.intervalID === null) return;\n window.clearInterval(this.intervalID);\n this.intervalID = null;\n console.log(`Mailbox monitoring stopped...`);\n }\n\n /**\n * Pass the current light level inside the mailbox to the users callback\n * function. The positive light levels indicate the door is open while \n * negative levels indicate it is closed. Depending on the sampling interval \n * the mailbox door could be in any postion from fully closed to fully open. \n * This means the light level varies from interval-to-interval.\n * @memberof IOTMailbox\n */\n signalStateChange = () => {\n const lightLevel = this.lastLightLevel >= 0 \n ? Math.random().toFixed(2) * -1 \n : Math.random().toFixed(2);\n console.log(`Mailbox state changed - lightLevel: ${lightLevel}`);\n this.signalCallback(this.lightLevel);\n this.lastLightLevel = lightLevel;\n }\n};\n```\n\n## User Stories\n\n- [ ] User can see a web page containing a control panel containing three\nbuttons - 'Start Monitoring', 'Stop Monitoring', and 'Reset'.\n- [ ] User can see a notification panel where the mailbox status will be posted.\n- [ ] User can see a scrollable log panel where execution details describing \nthe apps operation and interface with the IOTMailbox instance will be posted.\n- [ ] User can click the 'Start Monitoring' button to begin receiving state\nnotifications from the mailbox.\n- [ ] User can see a message added to the log panel when monitoring starts.\n- [ ] User can see a message added to the log panel for light level passed\nthrough the callback function. This should include the numerical light level\nand whether the door is open or closed.\n- [ ] User can see a message added to the notification panel when the door has\nbeen opened.\n- [ ] User can click the 'Stop Monitoring' button to stop receiving state\nnotifications from the mailbox. \n- [ ] User can see a message added to the log panel when monitoring stops.\n\n## Bonus features\n\n- [ ] User can see the 'Start Monitoring' button disabled until monitoring is\nstopped.\n- [ ] User can see the 'Stop Monitoring' button disabled until monitoring is\nstarted.\n- [ ] User can see an field in the control panel allowing the length of the\nmonitoring interval to be specified. \n- [ ] User can see a message added to the notification panel if the door is\nleft open.\n- [ ] User can hear an audible alert when the door is opened.\n\n## Useful links and resources\n\n- [Snail Mail (Wikipedia)](https://en.wikipedia.org/wiki/Snail_mail)\n- [Internet of Things (Wikipedia)](https://en.wikipedia.org/wiki/Internet_of_things)\n- [IOT Mailbox: An Introduction](https://iotexpert.com/2018/08/13/iot-mailbox-an-introduction/)\n- [What the Heck is a Callback?](https://codeburst.io/javascript-what-the-heck-is-a-callback-aba4da2deced)\n- [window.setInterval (MDN)](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval)\n\n## Example projects\n\nN/a\n" }, { "path": "Projects/1-Beginner/JSON2CSV-App.md", "content": "# JSON2CSV\n\n**Tier:** 1-Beginner\n\nDevelopers and end users are both experts in their own domains and as such, \neach speaks using a domain-specific language and terminology. This also extends\nto the tools used to manipulate data. Developers have found JSON to be a\nuniversally accepted method for transferring data between applications. End\nUsers, on the other hand, rely on spreadsheets to organize and analyze data.\n\nThe objective of JSON2CSV is to help bridge the gap between JSON and CSV by\nconverting JSON to CSV to make it easier to review data in a spreadsheet. It\nallows the user to paste JSON into a text box to generate its equivalent CSV.\n\n### Constraints ###\n\n- You may not use any libraries or packages designed to perform this type of\nconversion.\n- If you choose to implement this in JavaScript don't use complicated looping\nin your first implementation. Instead, use `Object.keys()` and `Object.values`\nto generate CSV for the header and data rows.\n- Nested JSON structures are not supported.\n\n## User Stories\n\n- [ ] User can paste JSON syntax into a text box\n- [ ] User can click a 'Convert' button to validate the JSON text box and convert it to CSV\n- [ ] User can see the converted CSV in another text box\n- [ ] User can see an warning message if the JSON text box is empty or if it doesn't contain valid JSON\n- [ ] User can click a 'Clear' button to clear the contents of both the JSON and CSV text boxes.\n\n## Bonus features\n\n- [ ] User can enter the path to the JSON file on the local file system in a text box\n- [ ] User can click a 'Open' button to load file containing the JSON into the text box\n- [ ] User can see a warning message if the JSON file is not found\n- [ ] User can enter the path the CSV file is to be saved to in a text box\n- [ ] User can click a 'Save' button to save the CSV file to the local file system\n- [ ] User can see a warning message if the CSV text box is empty or if the save operation failed.\n- [ ] User can convert CSV data to JSON. See [CSV2JSON](./CSV2JSON-App.md)\n\n## Useful links and resources\n\n- [Comma Separated Values (CSV)](https://en.wikipedia.org/wiki/Comma-separated_values)\n- [JavaScript Object Notation (JSON)](https://www.json.org/)\n- [MDN Javascript Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)\n- [Saving a file with pure JS](https://codepen.io/davidelrizzo/pen/cxsGb)\n- [Reading files in Javascript](https://codepen.io/jduprey/details/xbale)\n\n## Example projects\n\nTry to complete your JSON2CSV implementation before reviewing the example\nproject(s).\n\n- [JSON to CSV Converter](https://codepen.io/JFarrow/pen/umjGF)\n- [JSV Converter](https://gpaiva00.github.io/json-csv)\n" }, { "path": "Projects/1-Beginner/Javascript-Validation-With-Regex.md", "content": "# Javascript Validation With Regex\n\n**Tier:** 1-Beginner\n\nIn this challenge, you'd create a javascript validation script to validate the inputs entered by a user using RegEx.\n\nYou 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\n\nFor this project, there'd be three required inputs for validation:\n- 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.\n- The second which could be used as username would require the user to enter letters without spaces\n- The third which could be used as email address would require the user to enter only email addresses on gmail (...@gmail.com).\n\n## User Stories\n\n- [ ] User should be notified of any invalid inputs by error messages displayed on the form.\n- [ ] The submit button on the form would never be executed until all entries are validated.\n\n## Useful links and resources\n\n- [Javascript form validation using regular expressions](http://form.guide/snippets/javascript-form-validation-using-regular-expression.html)\n- [JavaScript Form Validation Using Regular Expressions](https://study.com/academy/lesson/javascript-form-validation-using-regular-expressions-definition-example.html)\n\n## Example project\n\n- [Native HTML5 validation with CSS & Regex](https://codepen.io/helgesverre/pen/vWRevp)" }, { "path": "Projects/1-Beginner/Key-Value-App.md", "content": "# Key Value\n\n**Tier:** 1-Beginner\n\nHave you ever thought about what it means that the computer you are using is\na digital device? Among other things it means that everything its capable of\nis 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. \n\nThe keyboard you used to retrieve this project description is a great example\nof this. Pressing a key generates a digital signal that is translated by the\ncomputer into a code representing the key that was pressed.\n\nThe goal of the Key Value app is to display the encoded value on screen each\ntime a key is pressed on the keyboard.\n\n## User Stories\n\n- [ ] User can see a display panel containing a text area where the key value\nand key code will be displayed along with display areas for four other \nindicators related to the keys on the keyboard - alt key, control key, \nmeta key, and shift key.\n- [ ] User can see the key code and key value displayed in the display panel\ncorresponding to the key when it is pressed.\n- [ ] User can see the appropriate indicator change from 'False' to 'True' \nwhen the alt, control, meta, or shift key is pressed.\n\n## Bonus features\n\n- [ ] User can hear a unique tone played when a key is pressed.\n- [ ] User can see the background color of the key code and value change when \na key is pressed.\n\n## Useful links and resources\n\n- [Digital Electronics](https://en.wikipedia.org/wiki/Digital_electronics)\n- [Keyboard Event](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent)\n\n## Example projects\n\n[Javascript Keyevent Test Script](https://unixpapa.com/js/testkey.html)\n" }, { "path": "Projects/1-Beginner/Lorem-Ipsum-Generator.md", "content": "# Lorem Ipsum Generator\n\n**Tier:** 1-Beginner\n\nLorem Ipsum is simply dummy text of the printing and typesetting industry.\nThis app should generate passages of lorem ipsum text suitable for use as placeholder copy in web pages, graphics, and more.\n\n## User Stories\n\n- [ ] User can type into an input field the number of paragraphs of lorem ipsum to be generated\n- [ ] Use can see the generated paragraphs of lorem ipsum and is able to copy them\n\n## Trello Board\n\nYou can track your progress by cloning this [Trello Board](https://trello.com/b/T0xA0Glj/lorem-ipsum-generator)\n\n## Useful links and resources\n\n- [lorem-ipsum npm package](https://www.npmjs.com/package/lorem-ipsum)\n- [lorem-ipsum CDN](https://www.jsdelivr.com/package/npm/lorem-ipsum)\n\n## Example projects\n\n- [Lipsum.com](https://www.lipsum.com/)\n" }, { "path": "Projects/1-Beginner/Notes-App.md", "content": "# Notes App\n\n**Tier:** 1-Beginner\n\nCreate and store your notes for later purpose!\n\n## User Stories\n\n- [ ] User can create a note\n- [ ] User can edit a note\n- [ ] User can delete a note\n- [ ] When closing the browser window the notes will be stored and when the User returns, the data will be retrieved\n\n## Bonus features\n\n- [ ] User can create and edit a note in Markdown format. On save it will convert Markdown to HTML\n- [ ] User can see the date when he created the note\n\n## Useful links and resources\n\n- [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage)\n- [Markdown Guide](https://www.markdownguide.org/basic-syntax/)\n- [Marked - A markdown parser](https://github.com/markedjs/marked)\n\n## Example projects\n\n- [Markdown Notes built with Angular on Codepen](https://codepen.io/nickmoreton/full/gbyygq)\n- [Markdown Notes built with React](https://github.com/email2vimalraj/notes-app)\n- [Markdown Notes built with Angular 7 and bootstrap 4](https://github.com/omdnaik/angular-ui)\n" }, { "path": "Projects/1-Beginner/Pearson-Regression-App.md", "content": "# Pearson Regression\n\n**Tier:** 1-Beginner\n\nThere are few, if any, applications that don't require some form of \ncross-disciplinary knowledge in order to implement useful functionality for\na user. In the case of an app for the medical profession it might be domain\nexpertise in biology or pharmacology. A paint manufacturer or a crop science\nbusiness might rely on apps with an intimate knowledge of chemistry. And, a \npayroll application will certainly incorporate HR and accounting concepts.\n\nRegardless of the industry segment an app is developed for one cross domain\nexpertise in common with them all is mathematics. As an application developer\nyou don't have to be a mathematician, but it's useful to have an understanding\nof how to apply mathematical concepts to the problems you are trying to solve.\n\nThe objective of this app is to apply the Pearson Correlation Coefficient\nagainst two sets of data to provide the user with the degree to which they\nmay or may not be related. For example, given a set of temperatures and another\nset of car prices this would let the user test whether or not they are related\n(spoiler alert: they are unrelated!).\n\n### Constraints\n\n- The Developer must program all calculations without relying on a package.\n\n## User Stories\n\n- [ ] User can see an input panel with two input fields allowing entry of `x` \nand `y` coordinates, and 'Add' and 'Calculate' buttons.\n- [ ] User can enter numbers into these boxes where `x` and `y` are observations\nfrom the two data sets.\n- [ ] User can click the 'Add' button to add the `x` and `y` to a tabular\noutput area listing the pairs of observations.\n- [ ] User can see and error message if either of the two input fields are\nempty or do not contain valid real numbers.\n- [ ] User can see the 'Calculate' button is disabled until errors have been\ncorrected.\n- [ ] User can click the 'Calculate' button to perform the regression analysis\nand to display its results.\n- [ ] User can see results of the calculation which include:\n - Arithmetic means for both the `x` and `y` observations\n - Standard deviations for both the `x` and `y` observations\n - Pearson correlation coefficient with one of the following interpretations:\n - No correlation\n - Neutral\n - Some correlation\n\n## Bonus features\n\n- [ ] User can see a scatter plot of the observations\n- [ ] User can upload observations from a file on the local machine.\n- [ ] User can see a regression line overlaying the scatter plot\n\n## Useful links and resources\n\n- [Pearson Correlation Coefficient (Wikipedia)](https://en.wikipedia.org/wiki/Pearson_correlation_coefficient)\n- [Linear Regression](https://en.wikipedia.org/wiki/Linear_regression)\n- [Pearson's Correlation Coefficient](http://www.code-in-javascript.com/pearsons-correlation-coefficient-in-javascript/)\n\n## Example projects\n\n[Correlation](https://memory.psych.mun.ca/tech/js/correlation.shtml)\n" }, { "path": "Projects/1-Beginner/Pomodoro-Clock.md", "content": "# Pomodoro Clock\n\n**Tier:** 1-Beginner\n\nThe 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.\n\n## User Stories\n\n- [ ] User can see a timer for 25 minutes - the **working** session\n- [ ] After the **working** session is over, the User can see a timer for 5 minutes - the **break** session\n- [ ] User can _start_ / _pause_, _stop_ and _reset_ the timers\n\n## Bonus features\n\n- [ ] User can hear a sound playing when the timer hits `00:00` - denoting that the session has ended\n- [ ] User can change / customize the minutes in both sessions before starting\n- [ ] User can set a **long break** session of 10 minutes. This will be activated every 4th **break** session\n\n## Useful links and resources\n\n- More about the [Pomodoro Technique](https://en.m.wikipedia.org/wiki/Pomodoro_Technique)\n\n## Example projects\n\n- [Joe Weaver's example](https://codepen.io/JoeWeaver/pen/bLbbxK)\n- [FreeCodeCamp Pomodoro Clock example](https://codepen.io/freeCodeCamp/full/XpKrrW)\n- [A desktop pomodoro app for menubar/tray.](https://github.com/amitmerchant1990/pomolectron)\n- [Sheri Richardson's example](https://srd-pomodoro-timer.netlify.com/)\n" }, { "path": "Projects/1-Beginner/Product-Landing-Page.md", "content": "# Product Landing Page\n\n**Tier:** 1-Beginner\n\nWhenever 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.\n\nConversion rate - the % of the visitors which purchase the product or service.\n\nWhen you have completed this app and the bonus features try leveling up your\nskills by expanding it to incorporate the features specified in the\n[Simple Online Store](../2-Intermediate/Simple-Online-Store.md).\n\n## User Stories\n\nThese will cover the visual part of the project.\n\n- [ ] User can see on the page one or more images with the product\n- [ ] User can see a list with all the features of the product\n- [ ] User can see how this product will improve the buyers life. Why should he buy it?\n- [ ] User can see a contact section (a text with the email)\n\n## Bonus features\n\nThese will cover the functional part of the project.\n\n- [ ] User can see a FAQ section\n- [ ] User can contact the staff members via a contact form\n- [ ] User can sign up to receive notifications about the product\n- [ ] User can purchase the product\n\n## Useful links and resources\n\nThere are plenty of Product Landing Pages out there. You can use [Dribbble](www.dribbble.com) and [Behance](www.behance.net) for inspiration.\n\n## Example projects\n\n- [Netlify](https://www.netlify.com/)\n- [Product Landing Page - Codepen](https://codepen.io/l4ci/pen/LoGjk)\n" }, { "path": "Projects/1-Beginner/Quiz-App.md", "content": "# Quiz App\n\n**Tier:** 1-Beginner\n\nPractice and test your knowledge by answering questions in a quiz application.\n\nAs a developer you can create a quiz application for testing coding skills of other developers. (HTML, CSS, JavaScript, Python, PHP, etc...)\n\n## User Stories\n\n- [ ] User can start the quiz by pressing a `button`\n- [ ] User can see a question with 4 possible answers\n- [ ] After selecting an answer, display the next question to the User. Do this until the quiz is finished\n- [ ] At the end, the User can see the following statistics\n - Time it took to finish the quiz\n - How many correct answers did he get\n - A message showing if he `passed` or `failed` the quiz\n\n## Bonus features\n\n- [ ] User can share the result of a quiz on social media\n- [ ] Add multiple quizzes to the application. User can select which one to take\n- [ ] User can create an account and have all the scores saved in his dashboard. User can complete a quiz multiple times\n\n## Useful links and resources\n\n- [Open Trivia Database](https://opentdb.com/api_config.php)\n\n## Example projects\n\n- [Quiz app built with React](http://tranquil-beyond-43849.herokuapp.com/) (wait for it to load as it is hosted on Heroku)\n- [Quiz app interface](https://codepen.io/FlorinPop17/full/qqYNgW)\n- [Quiz Progressive Web App built with React](https://github.com/SafdarJamal/quiz-app)\n" }, { "path": "Projects/1-Beginner/Random-Meal-Generator.md", "content": "# Random Meal Generator\n\n**Tier:** 1-Beginner\n\nGenerate a random meal from an API.\n\n## User Stories\n\n- [ ] User can click a button that will get a random meal from an external API (see below)\n- [ ] The app should display: **Recipe name**, **Ingredients**, **Instructions** and a **Picture** of the meal\n- [ ] By clicking the button again, another meal will be generated\n\n## Bonus features\n\n- [ ] The app should display a **YouTube Video**\n\n## Useful links and resources\n\n- [TheMealDB API](https://www.themealdb.com)\n\n## Example projects\n\n- [Random Meal Generator by Florin Pop on Codepen](https://codepen.io/FlorinPop17/full/WNeggor)\n- [Random Meal Generator by ShinSpiegel on github](https://github.com/shinspiegel/random-meal-generator)\n" }, { "path": "Projects/1-Beginner/Random-Number-Generator.md", "content": "# Random-Number-Generator\r\n\r\n**Tier:** 1-Beginner\r\n\r\nGenerate a random number between a range of defined minimun and maximun.\r\n\r\nThe generator allows the user to use the random property for purposes like games that contains some kind of lottary or for statistics.\r\n\r\n## User Stories\r\n\r\n- [ ] User can define maximun and minimun values for the random number.\r\n- [ ] User can press the generate button to generate random number.\r\n\r\n## Bonus features\r\n\r\n- [ ] User can add option for negative values\r\n- [ ] User can add option for decimal numbers\r\n\r\n## Useful links and resources\r\n\r\n[What's this fuss about true randomness?](https://www.random.org/)\r\n\r\n## Example projects\r\n\r\nTry not to view this until you've developed your own solution:\r\n\r\n- [Example](https://alonjoshua.github.io/random-number-generator/)\r\n- [Project](https://github.com/AlonJoshua/random-number-generator/)\r\n" }, { "path": "Projects/1-Beginner/Recipe-App.md", "content": "# Recipe\n\n**Tier:** 1-Beginner\n\nYou might not have realized this, but recipe's are nothing more than culinary\nalgorithms. Like programs, recipes are a series of imperative steps which,\nif followed correctly, result in a tasty dish.\n\nThe objective of the Recipe app is to help the user manage recipes in a way\nthat will make them easy to follow. \n\n### Constraints\n\n- For the initial version of this app the recipe data may be encoded as a\nJSON file. After implementing the initial version of this app you may\nexpand on this to maintain recipes in a file or database.\n\n## User Stories\n\n- [ ] User can see a list of recipe titles\n- [ ] User can click a recipe title to display a recipe card containing the\nrecipe title, meal type (breakfast, lunch, supper, or snack), number of people\nit serves, its difficulty level (beginner, intermediate, advanced), the list\nof ingredients (including their amounts), and the preparation steps.\n- [ ] User click a new recipe title to replace the current card with a new\nrecipe.\n\n## Bonus features\n\n- [ ] User can see a photo showing what the item looks like after it has\nbeen prepared.\n- [ ] User can search for a recipe not in the list of recipe titles by\nentering the meal name into a search box and clicking a 'Search' button. Any\nopen source recipe API may be used as the source for recipes (see The MealDB\nbelow).\n- [ ] User can see a list of recipes matching the search terms\n- [ ] User can click the name of the recipe to display its recipe card.\n- [ ] User can see a warning message if no matching recipe was found.\n- [ ] User can click a 'Save' button on the cards for recipes located through\nthe API to save a copy to this apps recipe file or database.\n\n## Useful links and resources\n\n- [Using Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)\n- [Axios](https://www.npmjs.com/package/axios)\n- [The MealDB API](https://www.themealdb.com/api.php) \n\n## Example projects\n\n- [Recipe Box - a Free Code Camp Project (FCC)](https://codepen.io/eddyerburgh/pen/xVeJvB)\n- [React Recipe Box](https://codepen.io/inkblotty/pen/oxWRme)\n" }, { "path": "Projects/1-Beginner/Roman-to-Decimal-Converter.md", "content": "# Roman to Decimal numbers Converter\n\n**Tier:** 1-Beginner\n\nThe numeric system represented by Roman numerals originated in ancient Rome and remained the\nusual way of writing numbers throughout Europe well into the Late Middle Ages.\nRoman numerals, as used today, employ seven symbols, each with a fixed integer value.\n\nSee the below table the _Symbol - Value_ pairs:\n\n- I - 1\n- V - 5\n- X - 10\n- L - 50\n- C - 100\n- D - 500\n- M - 1000\n\n## User Stories\n\n- [ ] User should be able to enter one Roman number in an input field\n- [ ] 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\n- [ ] If a wrong symbol is entered, the User should see an error\n\n## Bonus features\n\n- [ ] User could see the conversion to be made automatically as I type\n- [ ] User should be able to convert from decimal to Roman (vice-versa)\n\n## Useful links and resources\n\n- [An explanation of Roman Numbers](https://en.wikipedia.org/wiki/Roman_numerals)\n\n## Example projects\n\nTry not to view this until you've developed your own solution:\n\n- [Roman Number Converter](https://www.calculatorsoup.com/calculators/conversions/roman-numeral-converter.php)\n" }, { "path": "Projects/1-Beginner/Slider-Design.md", "content": "# Slider Design\n\n**Tier:** 1-Beginner\n\nDisplay multiple images using a slider / carousel.\n\n## User Stories\n\n- [ ] User can see a slider displaying multiple images every `x` seconds\n- [ ] User can click on `previous` and `next` buttons and the slider will display the corresponding image\n\n## Bonus features\n\n- [ ] Add animation to the slides\n- [ ] Add text over the slides\n- [ ] Create a 3D effect\n\n## Useful links and resources\n\n- [Unsplash](https://unsplash.com/) for free images\n\n## Example projects\n\n- [Full Page Slider](https://codepen.io/FlorinPop17/full/LvOroe)\n- [WOWSlider](http://wowslider.com/3d-slider-jquery-fresh-cube-demo.html)\n" }, { "path": "Projects/1-Beginner/Stopwatch-App.md", "content": "# Stopwatch App\n\n**Tier:** 1-Beginner\n\nA stopwatch helps you track the time you spent on activities.\n\n## User Stories\n\n- [ ] User can `start` a clock\n- [ ] User can `stop` the clock\n- [ ] When the clock is `stopped` the user can click `start` again and the clock will continue counting up\n- [ ] User can `restart` the clock\n\n## Bonus features\n\n- [ ] User can create `laps` - these will be displayed on the screen\n- [ ] User can clear all the laps\n\n## Useful links and resources\n\n- [setInterval](https://www.w3schools.com/jsref/met_win_setinterval.asp)\n\n## Example projects\n\n- [Stopwatch by Hilo](https://codepen.io/hilotacker/pen/ONZWoX)\n- [Stopwatch by Billy Brown](https://codepen.io/_Billy_Brown/pen/dbJeh)\n- [Svelte Stopwatch by Gabriele Corti](https://codepen.io/borntofrappe/pen/KKKPZZg)\n" }, { "path": "Projects/1-Beginner/True-or-False-App.md", "content": "# TrueOrFalse\n\n**Tier:** 1-Beginner\n\nSomething every developer needs to clearly understand is the result of\nconditional expressions like `x === y`. This is a bit more involved for\nJavascript developers who must also understand the concept of _truthiness_.\n\nTrueOrFalse helps by displaying the result when a conditional operator is\napplied to two values. Users can use this to test their knowledge and\nexplore edge cases.\n\nThe two values and the conditional operator are entered by the user and the\nresult to be displayed will be TRUE or FALSE. The implementation must not use\nthe `eval()` function to generate the result of the conditional.\n\n## User Stories\n\n- [ ] User can enter two strings to be compared\n- [ ] User can enter a valid Javascript conditional operator to be used to compare the two strings\n- [ ] User can see the result of the conditional as TRUE or FALSE\n- [ ] User can see a warning if the input strings or conditional operator that has been entered is not valid\n\n## Bonus features\n\n- [ ] User can specify the type of each of the two strings so numbers can be compared to strings, strings to booleans, etc\n\n## Useful links and resources\n\n- [Comparison Operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators)\n- [Conditional Javascript for Experts](https://hackernoon.com/conditional-javascript-for-experts-d2aa456ef67c)\n- [Truthy and Falsy: When all is not equal in Javascript](https://www.sitepoint.com/javascript-truthy-falsy/)\n\n## Example projects\n\nN/A\n" }, { "path": "Projects/1-Beginner/Typing-Speed-Test-App", "content": "# Typing Speed Test App\n\n**Tier:** 1-Beginner \n\nTyping speed tests are a fun and interactive way to measure how fast and accurately you can type. \nIn this project, you'll build a simple **Typing Speed Test App** that displays a random passage for the user to type within a limited time. \nOnce the timer runs out (or the user finishes typing), the app calculates and displays their **typing speed (WPM)** and **accuracy (%).**\n\nThis project will help you understand **real-time input handling**, **timing events**, and **DOM manipulation** ā€” essential skills for building interactive web apps. \n\n\n## Features\n\n- **Real-time Timer** ā€“ Start typing to begin the timer automatically. \n- **Live Accuracy Check** ā€“ Incorrect letters are highlighted instantly. \n- **Performance Stats** ā€“ Get detailed results including Words Per Minute (WPM) and Accuracy (%). \n- **Restart Option** ā€“ Take the test again with a new random passage. \n- **No External Libraries** ā€“ All calculations implemented manually.\n\n\n## User Stories\n\n- [ ] User can see a **random passage** to type on the screen. \n- [ ] User can start the test by clicking a **Start** button (starts the timer). \n- [ ] User can see a **typing input area** to type the given text. \n- [ ] User can view a **countdown timer** showing how much time is left (e.g., 60 seconds). \n- [ ] User can see their **WPM** and **Accuracy (%)** after finishing or when the timer ends. \n- [ ] User can click **Restart** to take the test again with a new passage. \n- [ ] User sees **real-time error highlighting** while typing.\n\n\n## Bonus Features\n\n- [ ] User can select different **time durations** (15s, 30s, 60s, 120s). \n- [ ] User can choose **difficulty levels** or text lengths. \n- [ ] Userā€™s **best WPM** is saved locally using `localStorage`. \n- [ ] **Dark/Light Mode** toggle for better UI experience. \n- [ ] Live **WPM and Accuracy** tracking while typing. \n- [ ] **Progress Graphs or History** showing previous scores. \n\n\n## Constraints\n\n- Do not use any third-party libraries for typing speed or accuracy calculations. \n- Use only front-end technologies like **HTML**, **CSS**, and **JavaScript** (or React if preferred). \n\n\n## How to Calculate WPM\n\n**Words Per Minute (WPM)** = (Total Characters Typed / 5) Ć· (Time in Minutes) \n**Accuracy (%)** = (Correct Characters / Total Characters Typed) Ɨ 100 \n\n\n## Example UI Inspirations\n\n- [Monkeytype](https://monkeytype.com) \n- [10FastFingers](https://10fastfingers.com) \n\n\n## Useful Resources\n\n- [Typing Test (Wikipedia)](https://en.wikipedia.org/wiki/Typing_test) \n- [MDN: Keyboard Events](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) \n- [How to Calculate WPM](https://www.speedtypingonline.com/typing-equations) \n\n\n## Example Projects\n\n- [Typing Speed Test ā€“ Monkeytype Clone](https://monkeytype.com) \n- [Typing Speed Test (CodePen)](https://codepen.io/rajatkantinandi/pen/PoKyLMy) \n- [Speed Typing Game ā€“ Web Dev Simplified](https://github.com/WebDevSimplified/Speed-Typing-Game) \n- [Typing Game in React](https://github.com/karlhadwen/typing-game) \n- [10FastFingers Clone ā€“ Vanilla JS](https://codepen.io/joshuaward/full/jObXJZj) \n\n\n\n" }, { "path": "Projects/1-Beginner/Vigenere-Cipher.md", "content": "# Vigenere Cipher\n\n**Tier:** 1-Beginner\n\nThe rate and impact of security breaches in recent years makes it imperative\nthat developers understand the methods bad actors use to compromise apps. \nUnderstanding how an app can be compromised is the first step in coming up \nwith effective protection measures.\n\nOne of the easiest ways bad actors can compromise an app is to access\ndata that's left unencrypted by the developer. There are a number of strong\nencryption algorithms available to ensure that data is not readable even if\naccess is compromised. These include AES, Blowfish, and TripleDES to name a\nfew. \n\nHowever, these algorithms can be quite complex to implement so the objective\nof this app is to implement a classical encryption algorithm, the Vigenere\nCipher to learn the basics of how ciphers work.\n\n### Requirements & Constraints\n\n- Developers should use only native language features to implement the Vigenere\nCipher. Libraries are not allowed.\n- Developers should design and implement their own solution using only the\ndescription of the steps in the Vigenere Cipher algorithm.\n- After successfully implementing this algorithm Developer should ask\nthemselves these questions:\n - Would you feel confident encrypting your financial information using the\n Vigenere Cipher? Why?\n - How would you detect that a message had been encrypted using the\n Vigenere Cipher?\n - How would you go about trying to crack this encryption?\n\n## User Stories\n\n- [ ] User can see the app window with these components:\n - Plain text message input field\n - Encryption key input field\n - Action buttons - 'Encrypt' and 'Decrypt'\n - Resulting encrypted or decrypted message\n- [ ] User can enter the text to be encrypted in the plain text message input\nfield\n- [ ] User can enter the Encryption key the Vigenere algorithm will use to\nencrypt the plain text message.\n- [ ] User can click see see the 'Decrypt' button disabled until the plain\ntext has been encrypted.\n- [ ] User can click the 'Encrypt' button to encrypt the plain text message\n- [ ] User can see the encrypted message displayed in the result field.\n- [ ] User can see the 'Decrypt' button enabled after the encrypted message\nhas been displayed.\n- [ ] User can click the 'Decrypt' button to decrypt the encrypted message\nand to display its contents in the result field.\n\n## Bonus features\n\n- [ ] User can see a 'Compare' button after decryption that compares the \noriginal plain text message with the decrypted message\n- [ ] User can see an error message if the 'Compare' detects differences\nin the contents of these two fields.\n\n## Useful links and resources\n\n- [Bad Actors](http://solutionsreservoir.com/resources/introduction-to-cybersecurity/part-1-cybersecurity-overview)\n- [Vigenere Cypher](https://www.geeksforgeeks.org/vigenere-cipher/)\n\n## Example projects\n\n[Vigenere Encryption](https://codepen.io/max1128/pen/VdyJmd)\n" }, { "path": "Projects/1-Beginner/Weather-App.md", "content": "# Weather App\n\n**Tier:** 1-Beginner\n\nA 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.\n\n## User Stories\n\n- [ ] Enter the name of a city into the `input` field.\n- [ ] 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.\n\n## Bonus features\n\n- [ ] 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`.\n\n## Useful links and resources\n\n- [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage)\n- [accuweather](https://developer.accuweather.com/)\n- [axios](https://github.com/axios/axios)\n- [bootstrap](https://getbootstrap.com/)\n\n## Example projects\n\n- [Weather App on Codepen](https://codepen.io/tutsplus/pen/gObLaEP) by [George Martsoukos]\n- [Coding A Weather App In Pure JavaScipt](https://www.youtube.com/watch?v=ZPG2wGNj6J4)\n" }, { "path": "Projects/1-Beginner/Windchill-App.md", "content": "# Windchill\n\n**Tier:** 1-Beginner\n\nWindchill combines the actual temperature with the wind speed to calculate\nthe windchill factor, or what the perceived temperature is versus the actual\ntemperature.\n\n## User Stories\n\n- [ ] User can select the measurement system calculations will be performed in - Metric or English\n- [ ] User can enter the actual temperature and the wind speed\n- [ ] User can press the `Calculate` button to display the wind chill\n- [ ] User will receive an error message when `Calculate` is clicked if data values are not entered\n\n## Bonus features\n\n- [ ] 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\n- [ ] User will be prompted to enter new data values if `Calculate` is pressed without first changing at least one of the input fields\n- [ ] 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\n\n## Useful links and resources\n\n- [Wikipedia Wind Chill](https://en.wikipedia.org/wiki/Wind_chill)\n- [JavaScript Assert](https://developer.mozilla.org/en-US/docs/Web/API/console/assert)\n\n## Example projects\n\n[Wind Chill Calculator](http://www.jsmadeeasy.com/javascripts/Calculators/Wind%20Chill%20Calculator/index.htm)\n[Svelte Wind Chill Index by Gabriele Corti](https://codepen.io/borntofrappe/pen/WNNrrJg)\n" }, { "path": "Projects/1-Beginner/Word-Frequency-App.md", "content": "# Word Frequency\n\n**Tier:** 1-Beginner\n\nCalculating the frequency of words in a block of text is a technique which has\nvarious uses in algorithms such as searching, sorting, and semantic analysis.\nThe objective of the Word Frequency app is count the frequency of words in a\nblock of text and create a tabular display of each unique word in the text\nalong with its frequency, in descending order by frequency.\n\n## User Stories\n\n- [ ] User can see a text input box, a 'Translate' button, and a word\n frequency table.\n- [ ] User can enter text (or cut and paste) into the input box. This input\n box must allow the entry of large blocks of text (maximum of 2048 characters).\n- [ ] User can click the 'Translate' button to analyze the word frequency in\n the text that has been input.\n- [ ] User can see an error message if the text input box is empty.\n- [ ] User can see the word frequency table populated when the 'Translate'\n button is clicked. Each row in the table contains a word and the number of times\n it occurs in the input text.\n- [ ] User can see the word frequency table ordered in descending sequence\n by word frequency.\n\n## Bonus features\n\n- [ ] User can see a graphical representation of the word frequency in a\n bubble chart, column chart, or any other form of graphical representation the\n developer chooses.\n- [ ] User may choose to enter the URL of a web page whose content is to be\n analyzed instead of manually entering text. (Hint: See the\n [Podcast Directory](../2-Intermediate/Podcast-Directory-App.md) application for ideas).\n\n## Useful links and resources\n\n- [Bag of Words Model (Wikipedia)](https://en.wikipedia.org/wiki/Bag-of-words_model)\n- [Semantic Analysis (Wikipedia)](https://en.wikipedia.org/wiki/Sentiment_analysis)\n\n## Example projects\n\n- [Word Frequency Counter](https://codepen.io/maxotar/pen/aLrwJM)\n- [Bubble Chart](https://codepen.io/Quendoline/pen/pjELpM)\n- [Svelte Word Frequency by Gabriele Corti](https://codepen.io/borntofrappe/pen/QWWWqQM)\n" }, { "path": "Projects/2-Intermediate/Bit-Masks-App.md", "content": "# Bit Masks\n\n**Tier:** 2-Intermediate\n\nIt's difficult to find an app that doesn't rely on some form of conditional\nlogic to implement its functionality. This is almost always performed using \nstatements like:\n```\nif (processAccount === true) { \n /* do something */\n}\n```\nIf and switch statements work well for a limited number of conditionals, but\nwhat if your app had 10's or 100's of conditionals to evaluate? Luckily, there's\nanother way.\n\nThe goal of the Bit Masks app is demonstrate how to use bit masks to evaluate\nlonger sequences of switches without having to rely on long strings of \nconditional statements.\n\n## User Stories\n\n- [ ] User can see a vertical list of checkboxes with the following cities\nand their timezones:\n - Moscow: GMT +3\n - Paris: GMT +2\n - Berlin: GMT +2\n - Brussels: GMT +2\n - Amsterdam: GMT +2\n - Rome: GMT +2 \n - London: GMT +1\n - Dublin: GMT +1\n - New York: GMT -4\n - Washington, DC: GMT -4\n - St. Louis: GMT -5\n - Los Angeles: GMT -7\n - Tokyo: GMT +9\n - Beijing: GMT +8\n - Ho Chi Mihn City: GMT +7\n - Mumbai: GMT +5\n- [ ] User can see a GMT search box where an integer representing a GMT offset\ncan be entered into and a 'Find Cities' button.\n- [ ] User can click the 'Find Cities' button to display the names of the\ncities in that GMT offset in an output area.\n\n### Developer Notes\n\nFor this exercise the developer should use sequences of 24 \nbinary bits, each corresponding a GMT time zone from +12 to -12 to map cities\nto their timezones. \n\nSearches should be conducted by combining a bit mask for the desired time zone\nagainst the city-specific bit sequences to identify matches. Determining if a \ncity meets the search criteria shouldn't rely on a statement such as\n```\nif (city[i].gmtOffset === searchOffset ) {\n /* Found it! */\n}\n```\nIt should instead rely on a bitwise operation.\n\n## Bonus features\n\n- [ ] User can search for cities NOT in the GMT offset entered in the \nsearch box.\n- [ ] User can see a summary count of the number of cities that met the\nsearch criteria.\n\n## Useful links and resources\n\n- [World Time Zones](https://greenwichmeantime.com/time-zone/definition/)\n- [Bitwise Operators (MDN)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators)\n\n## Example projects\n\n[Bitwise Operation](https://codepen.io/Lunoware/pen/VBZgQd)\n" }, { "path": "Projects/2-Intermediate/Book-Finder-App.md", "content": "# Book Finder App\n\n**Tier:** 2-Intermediate\n\nCreate 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.\n\n## User Stories\n\n- [ ] User can enter a search query into an `input` field\n- [ ] 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)\n- [ ] User can see the list of books appearing on the page\n\n## Bonus features\n\n- [ ] 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\n- [ ] Implement a Responsive Design\n- [ ] Add loading animations\n\n## Useful links and resources\n\nYou can use the [Google Books API](https://developers.google.com/books/docs/overview)\n\n## Example projects\n\n[Book Finder](https://book-finder-by-deyl.netlify.com/)\n[Search Books](https://booksure.netlify.app/)\n" }, { "path": "Projects/2-Intermediate/Calculator-CLI.md", "content": "# Calculator CLI\n\n**Tier:** 2-Intermediate\n\nCreate a basic calculator with addition feature. \n\n## User Stories\n\n- [ ] User can add multiple numbers using `add` command.\n- [ ] User can add floating numbers using the `-f` flag.\n- [ ] User can add only even/odd numbers using `even`/`odd` sub-command.\n- [ ] User can use `--help` or `-h` flag to get all the available commands and flags.\n \n> Note: The stories 1 and 2 are basically for static typed language, where passed arguments must be of same type.\n\n## Bonus Features\n\n- [ ] User can use all the basic arithmetic operations like (addition, subtraction, multiplication and divison).\n- [ ] User can use `--help` or `-h` flag to get the sub-commands of command.\n- [ ] **Power of** and **Square Root of** operation.\n\n## Useful links and resources\n\n- [5 keys to create a killer CLI in Go](https://blog.alexellis.io/5-keys-to-a-killer-go-cli/)\n- [How to build a CLI tool in NodeJS ?](https://www.freecodecamp.org/news/how-to-build-a-cli-tool-in-nodejs-bc4f67d898ec/)\n- [Build a Command Line Interface (CLI) Application with Node.js](https://codeburst.io/build-a-command-line-interface-cli-application-with-node-js-59becec90e28)\n- [Building Beautiful Command Line Interfaces with Python](https://codeburst.io/building-beautiful-command-line-interfaces-with-python-26c7e1bb54df)\n- [How to create a CLI in golang with cobra](https://schadokar.dev/posts/how-to-create-a-cli-in-golang-with-cobra/)\n- [Building a Network Command Line Interface in Go](https://tutorialedge.net/golang/building-a-cli-in-go/)\n\n## Example projects\n\n- [my-calc](https://github.com/schadokar/my-calc)\n" }, { "path": "Projects/2-Intermediate/Card-Memory-Game.md", "content": "# Card-Memory-Game\n\n**Tier:** 2-Intermediate\n\nCard 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.\n\n## User Stories\n\n- [ ] User can see a grid with n x n cards (`n` is an integer). All the cards are faced down initially (`hidden` state)\n- [ ] User can click a button to start the game. When this button is clicked, a timer will start\n- [ ] 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\n\nWhen the User clicks on the 2nd card:\n\n- [ ] 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)\n- [ ] If there isn't a match, the 2 cards will flip back to their original state (`hidden` state)\n- [ ] 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\n\n## Bonus features\n\n- [ ] 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\n- [ ] User can see the game statistics (nr. of times he won / he lost, best time for each level)\n\n## Useful links and resources\n\n- [Wikipedia]()\n\n## Example projects\n\n- [Flip - card memory game](https://codepen.io/zerospree/full/bNWbvW)\n- [Memory Game](https://jdmedlock.github.io/memorygame/)\n- [SMB3 Memory Card Game](https://codepen.io/hexagoncircle/full/OXBJxV)\n- [BHMBS - Memory Game](https://barhouum7.github.io/JS-MemoryGame.github.io/)" }, { "path": "Projects/2-Intermediate/Charity-Finder-App.md", "content": "# Charity Finder\n\n**Tier:** 2-Intermediate\n\nWith the Charity Finder app you'll not only get to refine your Web Developer\nskills, but you will also have an opportunity to see how you can do good. The\nobjective 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\ncan search to find a charity that matches their philanthropic interests.\n\n### Constraints\n- Since the app is asking the user to choose and contribute to a charitable\ncause it's important that the presentation of information be clear and concise.\nJust as important is the need for the UI/UX to be polished and engaging to use.\n\n Although this is true of all apps, its even more the case here since each\nuser that abandons the site represents the loss of an opportunity to do good\n(see ['What is Web Site Conversion?](##useful-links-and-resources)) below.\n\n## User Stories\n\n- [ ] User can see a page heading containing the application name.\n- [ ] User can see an overview of what the app is intended for in 'splash'\npage format.\n- [ ] User can see a search area containing an set of drop down boxes that\nallow the user to specify search criteria for charitable organizations\nincluding:\n - Organization name\n - Organizations home country\n - Countries the organization serves\n- [ ] User can see a 'Search' button\n- [ ] User can click on the 'Search' button to display information cards\nfor the matching organizations in a search results area.\n- [ ] User can see organization information cards in the search results area\ncontaining:\n - ID\n - Name\n - Address\n - Logo\n- [ ] User can click the logo in the organizations information card to open a\nnew window to that organizations home page.\n- [ ] User can see a page footer with links to your GitHub and social media\naccounts including social media icons (like the Twitter icon).\n\n## Bonus features\n\n- [ ] User can see a search dropdown for themes the charity focuses on.\n- [ ] User can select multiple options in the search dropdowns.\n- [ ] User can see a project link (e.g. 'PROJECT') on the organization\ninformation card.\n- [ ] User can click on the project link to display a page with information\ndescribing the Global Giving project the organization is associated with.\nHint: examine the structure of the JSON returned from the API to understand\nthe relationship between projects and organizations.\n\n## Useful links and resources\n\n- [What is Web Site Conversion?](https://www.marketing91.com/what-is-website-conversion/)\n- [Global Giving API](https://www.globalgiving.org/api/)\n- Sample XML for a project returned through the API:\n```\n\n\n true\n 367\n \n false\n To fund the training of health professionals including nurses, psychologists, and social workers, and buy medicine and equipment.\n https://www.globalgiving.org/pfil/359/projdoc.doc\n 2004-06-01T12:43:27-04:00\n 28 Pine Street\n Mechanic Falls\n United States\n 04256\n Maine\n http://groups.yahoo.com/group/FOCUSonCambodia\n Cambodia\n 8239.33\n 55000.00\n 359\n \n \n https://www.globalgiving.org/pfil/359/pict_grid1.jpg\n \n \n https://www.globalgiving.org/pfil/359/pict_thumbnail.jpg\n \n \n https://www.globalgiving.org/pfil/359/pict_med.jpg\n \n \n https://www.globalgiving.org/pfil/359/pict_grid7.jpg\n \n \n https://www.globalgiving.org/pfil/359/pict_large.jpg\n \n \n https://www.globalgiving.org/pfil/359/pict_original.jpg\n \n Improving the Health of Children in Cambodia\n \n 1\n https://www.globalgiving.org/pfil/359/pict.jpg\n KH\n 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.\n 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.\n 102\n \n 0\n 1062 Lewiston Road\n \n 5824171103\n New Gloucester\n \n \n KH\n Cambodia\n \n \n United States\n 10\n US\n 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.\n Friends of Cambodia in the U.S. (FOCUS)\n 4260\n Maine\n \n \n health\n Health\n \n \n 2\n \n \n https://www.globalgiving.org/projects/educating-children-of-cambodia/updates/\n https://www.globalgiving.org/projects/educating-children-of-cambodia/\n Asia and Oceania\n 46760.67\n funded\n 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.\n Health\n Improving the Health of Children in Cambodia\n project\n \n\n```\n\n## Example projects\n\n[Playing with card layout](https://codepen.io/bradjdouglas/pen/xOZJRz)\n" }, { "path": "Projects/2-Intermediate/Chrome-Theme-Extension.md", "content": "# Chrome Theme Extension\n\n**Tier:** 2-Intermediate\n\nBuild 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 šŸ˜›\n\n- How chrome extension work(behind the scenes).\n- Basic understanding of HTML/CSS, JS, JSON is required.\n\n## User Stories\n\n- [ ] User can make a theme according to their own personal color preference\n- [ ] This will extremely benefit the people suffering from color blindness.\n- [ ] User can install and set it as the default theme.\n\n## Bonus features\n\n- [ ] Deploy extension to chrome store\n- [ ] Add a toggle button to control the night sight feature manually\n- [ ] Create same extension for multiple browsers like firefox, etc.\n\n## Useful links and resources\n\n- [Getting Started](https://developer.chrome.com/extensions/getstarted)\n\n## Example projects\n\n- [chrome-developer-edition-dark](https://github.com/KeenRivals/chrome-developer-edition-dark)\n- [Night Shift(BlueLight Filter)](https://chrome.google.com/webstore/detail/night-shiftbluelight-filt/hkjikimiiojjiiffmgngnkefacpbgajl?hl=en)\n" }, { "path": "Projects/2-Intermediate/Currency-Converter.md", "content": "# Currency Converter\n\n**Tier:** 2-Intermediate\n\nA 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.\n\n## User Stories\n\n- [ ] User can enter up to 9 digits to represent the amount to convert in a source input field\n- [ ] User can view a sorted list of available currencies and select the currency to convert from in a source drop-down list\n- [ ] User can view a sorted list of available currencies and select the currency to convert to in a destination drop-down list\n- [ ] 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.\n- [ ] User must be alerted if the input is not a number\n\n## Bonus features\n\n- [ ] User should be able to swap the values of the source and destination drop-down lists on the click of a button\n\n## Useful links and resources\n\n- [Free currency converter API](https://free.currencyconverterapi.com/)\n- [XE currency converter](https://www.xe.com/)\n- [How to use fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) to fetch data\n\n## Example projects\n- [Currency Converter](https://acodedoer.github.io/currency-converter/)\n- [Currency converter code](https://github.com/acodedoer/currency-converter)\n" }, { "path": "Projects/2-Intermediate/Drawing-App.md", "content": "# Drawing App\n\n**Tier:** 2-Intermediate\n\nCreate digital artwork on a canvas on the web to share online and also export as images.\n\n## User Stories\n\n- [ ] User can draw in a `canvas` using the mouse\n- [ ] User can change the color\n- [ ] User can change the size of the tool\n- [ ] User can press a button to clear the `canvas`\n\n## Bonus features\n\n- [ ] User can save the artwork as an image (`.png`, `.jpg`, etc format)\n- [ ] User can draw different shapes (`rectangle`, `circle`, `star`, etc)\n- [ ] User can share the artwork on social media\n\n## Useful links and resources\n\n- [Learn how to create a Drawing Application using p5js](https://www.florin-pop.com/blog/2019/04/drawing-app-built-with-p5js/)\n\n## Example projects\n\n- [Drawing App by Florin Pop](https://codepen.io/FlorinPop17/full/VNYyZQ)\n- [Drawing App by t0mm4rx](https://codepen.io/t0mm4rx/full/dLowvZ)\n" }, { "path": "Projects/2-Intermediate/Emoji-Translator-App.md", "content": "# Emoji Translator\n\n**Tier:** 2-Intermediate\n\nEmojis have become the _lingua franca_ of modern society. They are a fun and\nfast way to communicate, but an also extremely expressive mechanism for\ncommunicating emotions and reactions.\n\nThe objective of the Emoji Translator app is to translate text entered by the\nuser into an equivalent string of emojis, translated from one or more words in\nthe original text, and words for which there is no corresponding emoji. \n\n## User Stories\n\n- [ ] User can enter a string of words, numbers, and punctuation into a text\nbox\n- [ ] User can click a 'Translate' button to translate words in the entered\ntext into their corresponding emojis.\n- [ ] User can see a warning message if 'Translate' was clicked, but the \ninput text box was empty or unchanged from the last translation.\n- [ ] User can see text elements in the entered text translated to their\nequivalent emojis in an output text box. Text elements for which there is no\nemoji will be left unchanged.\n- [ ] User can click a 'Clear' button to clear the input and output text boxes.\n\n## Bonus features\n\n- [ ] Developer will implement an emoji synonym feature to allow the app to\ntranslate a wider variety of words to emoji.\n- [ ] User can select the language the input text is entered from a dropdown\nlist of languages.\n\n## Useful links and resources\n\n[Full Emoji List v12.0](https://unicode.org/emoji/charts/full-emoji-list.html)\n\n## Example projects\n\n[Emoji Translate](https://emojitranslate.com/)\n" }, { "path": "Projects/2-Intermediate/FlashCards-App.md", "content": "# FlashCards\n\n**Tier:** 2-Intermediate\n\nFlashCards are a time tested technique used by students to review and test\ntheir knowledge on a particular subject.\n\nThis app is based on a knowledge base of questions and answers about a\nparticular subject and randomly displays a card with the question and multiple\nanswers. The objective is for the user to select the correct answer(s).\n\n## User Stories\n\n- [ ] User can see a single card, randomly picked from the \"deck\" displayed\n at any point in time\n- [ ] User can see a question on the card and a list of four possible answers,\n each of which is identified by a letter.\n- [ ] User can select an answer by clicking on it\n- [ ] User can see an error displayed when the wrong answer is selected\n- [ ] User can see a congratulations message when the correct answer is\n selected.\n- [ ] User can click a 'Next Question' button to display the next flash card.\n\n### Additional Info for the Developer\n\n- For this app the knowledge base of questions and answers should be encoded in\n a JavaScript object.\n- The possible answers display on each card should be randomly chosen from\n other flashcards.\n\n## Bonus features\n\n- [ ] User can click a 'Results' button to display the tallies of\n correct and incorrect answers.\n- [ ] User can click a 'Reset' button to reset the tallies of correct\n and incorrect answers.\n- [ ] User can click a 'Shuffle' button to re-randomize the \"deck\"\n- [ ] User can click a 'More Info' button to flip the flash card to see\n additional information. For example, detailed information about the subject\n of the question on the front of the card.\n\n## Useful links and resources\n\nThe definitive source for HTML/CSS/Javascript is [MDN](https://developer.mozilla.org/en-US/)\n\nExample Javascript questions and answers can be found at\n[Brainscape](https://www.brainscape.com/subjects/javascript).\n\n## Example projects\n\n[Vintage Multiplication Flash Cards](https://codepen.io/NinoLopezTech/pen/vJBMpZ)\n" }, { "path": "Projects/2-Intermediate/Flip-Art-App.md", "content": "# Flip Art\n\n**Tier:** 2-Intermediate\n\nMany developers have found that adding animation to an application is a\nuseful technique that adds impact to the UI, to make it more appealing to its users,\nand to explain complex subject matter. But, as a developer how do you create \nthese and how do you know what images make effective animations?\n\nThe objective of the Flip Art app is to address both of these needs by \nproviding a simple way to collect and arrange a set of images into an\nanimated sequence that can be replayed and adjusted to achieve the desired\nimpact and effect.\n\n### Requirements & Constraints\n\nDevelopers should not rely on animation or graphics libraries to implement\nthis app. Instead, try using vanilla Javascript, CSS, and HTML.\n\n## User Stories\n\n- [ ] User can see the following primary components in the app window:\n - Configuration panel containing elements used to tailor the animation\n process.\n - Operation buttons\n - Animation display panel animations will be presented in\n\n### Configuration Panel\n- [ ] User can see eight thumbnails that will contain individual animation \nframes\n- [ ] User can see a button under each thumbnail - '+'\n- [ ] User can click the '+' button to add a new image to an empty thumbnail\n- [ ] User can see a file open dialog when the '+' button is clicked to \nallow an `.jpg` image to be loaded into the thumbnail. \n- [ ] User can see the '+' button label change to '-' after a thumbnail is\nloaded.\n- [ ] User can click the '-' button to remove or replace a thumbnail.\n- [ ] User can see an 'Transition Speed' slider control. \n- [ ] User can adjust the 'Transition Speed' slider from slow to fast to\nadjust the transition time between thumbnails in the Animation Display.\n\n### Operation Buttons\n- [ ] User can see two buttons - 'Clear Configuration' and 'Start Animation'\n- [ ] User can see the 'Start Animation' button disabled until at least one\nthumbnail has been added via the Configuration Panel.\n- [ ] User can click the 'Clear Configuration' button to clear all thumbnails\nfrom the configuration panel.\n- [ ] User can click the 'Start Animation' button to begin the Animation \nDisplay panel\n- [ ] User can see the 'Start Animation' button label change to 'Stop\nAnimation' once an animation has been started.\n- [ ] User can click the 'Stop Animation' button to halt the animation in\nthe animation display\n- [ ] User can see the 'Stop Animation' button label change to 'Start\nAnimation' when an animation has been stopped.\n\n### Animation Display Panel\n- [ ] User can see thumbnails added in the Configuration panel displayed\nwhen theh 'Start Animation' button is clicked. \n- [ ] User can see thumbnails transtion from one to the next at the rate\ndefined by the 'Transition Speed' slider.\n\n## Bonus features\n\n- [ ] User can see the border around the thumbnail in the Configuration Panel\nhighlighted when that thumbnail is displayed in the Animation Display panel.\n- [ ] User can dynamically add any number of thumbnails rather than being\nrestricted to just eight.\n- [ ] User can hear unique sounds associated with modifying thumbnails in the \nConfiguration Panel.\n- [ ] User can see a transition type dropdown in the Configuration Panel to\ndefine the transition effect between thumbnails in the Animation Display - \nease, ease-in, ease-out, ease-in-out\n- [ ] User can drag and drop thumbnails to reorder them\n- [ ] User can save the animation as a `.gif` file.\n\n## Useful links and resources\n\n- [How to Make Flip Book Animation](https://www.youtube.com/watch?v=Njl-uqnmBGA)\n- [CSS Animation (MDN)](https://developer.mozilla.org/en-US/docs/Web/CSS/animation)\n- [Using CSS Transitions (MDN)](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions)\n- [CSS Transition (MDN)](https://developer.mozilla.org/en-US/docs/Web/CSS/transition)\n\n## Example projects\n\n[FlipAnim](http://flipanim.com/)\n" }, { "path": "Projects/2-Intermediate/Game-Suggestion-App.md", "content": "\r\n# Game suggestion app\r\n\r\n**Tier:** 2-Intermediate\r\n\r\nAn 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.\r\n\r\n## User Stories\r\n\r\n- [ ] User can create polls\r\n- [ ] User can vote on polls (add games)\r\n- [ ] User can see the poll results as a top 10 or 5 list of the most voted games\r\n\r\n## Bonus features\r\n\r\n- [ ] Poll admin can restrict the voting to a certain tag or genre\r\n- [ ] User can login and see their old polls\r\n\r\n## Useful links and resources\r\n\r\n- [IGDB API documentation](https://api-docs.igdb.com/)\r\n\r\n## Example projects\r\n\r\n- [Strawpoll, one of the most popular polling apps](https://www.strawpoll.me/)" }, { "path": "Projects/2-Intermediate/GitHub-Profiles.md", "content": "# GitHub Profiles\n**Tier:** 2-Intermediate\n\nAPIs 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.\n\nIn 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.\n\n## User Stories\n\n- [ ] User can enter a username\n- [ ] User can click on search button to retrieve information\n- [ ] User can see the avatar, username, followers and repository count of searched user\n- [ ] User can see the top 4 repositories of searched user\n- [ ] User should get an alert if the username is not valid\n\n## Bonus features\n- [ ] User can toggle dark/light mode\n- [ ] Selected mode should persist when user comes back to the app again\n\n## Useful links and resources\nTo get the data you need to communicate with GitHub API. you can either\n\n- [Read Docs](https://developer.github.com/v3/)\n- [Check API directly](https://api.github.com/users/chaharshivam)\n\nTo get data from API you can check [fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) in javascript\n\n## Example projects\n\n- [GitHub profiles](https://github-profiles.netlify.app/) ([repo](https://github.com/GabrielNBDS/GitHub-Profiles))\n\n- [github-profile-search](https://github-profile-search-272901.web.app/) ([repo](https://github.com/guerra08/github-profile-search))\n" }, { "path": "Projects/2-Intermediate/HighStriker-Game.md", "content": "# HighStriker\n\n**Tier:** 2-Intermediate\n\nCarnivals and circuses have featured the HighStriker sideshow game since at\nleast the 1930's. This game consists of a tower with a bell mounted at the top\nand a levered platform at the bottom. When the levered platform is struck with\na mallet it causes a puck to travel up a track attached to the tower. \n\nWhen the platform is struck the puck travels vertically up the track. If hit\nhard enough the puck will ring the bell, signifying a winner.\n\nThe objective of the Highstriker app is to simulate this carnival\ngame. Instead of physical force to move the puck up the track use an algorithm \nof your own design and a random number generator to determine the puck's\nspeed and the distance it travels.\n\n## User Stories\n\n- [ ] User can see an image of the High Striker tower with the bell at the\ntop, the levered platform at the bottom and the track connecting the two.\n- [ ] User can click the 'Strike!' button under the levered platform to play\nthe game.\n- [ ] User can see the puck travel up the rail.\n- [ ] User can hear the bell ring if the puck travels far enough to strike it.\n- [ ] User can see a score updated for each click of the 'Strike!' button -\nthe number of times the bell was struck and the number of attempts.\n- [ ] User can click a 'Clear' button to clear the score.\n- [ ] User can see a congratulations message when a total of 10 points are\nreached.\n\n## Bonus features\n\n- [ ] User can see the bell vibrate when it is struck.\n- [ ] User can be awarded points on a scale based on the distance the puck\ntravels up the track. For example, 1 point for 1/8 to 1/4 distance, 2 points\nfor 1/4 to 1/2 distance, 3 points for 1/2 to 3/4 distance, 4 points for 3/4 to\nthe bottom of the bell, and 5 points if the bell is struck.\n- [ ] User can hear a sound as the puck travels up the rail.\n- [ ] User can hear unique sounds when different points are awarded.\n\n## Useful links and resources\n\n- [HighStriker Game (Wikipedia)](https://en.wikipedia.org/wiki/High_striker)\n- [HighStriker Video (YouTube)](https://www.youtube.com/watch?v=1W5jGH4xh1E)\n- [Implementing Velocity, Acceleration, and Friction on a Canvas](https://codepen.io/Tobsta/post/implementing-velocity-acceleration-and-friction-on-a-canvas)\n\n## Example projects\n\nN/a\n" }, { "path": "Projects/2-Intermediate/Image-Scaner.md", "content": "# Image Scanner\n\n**Tier:** 2-Intermediate\n\nCreate an android and ios app to find phone numbers, email and website links available in a photo and then organise it in the app.\n\n## User Stories\n\n- [ ] User can either click a photo or upload a photo from the gallery\n- [ ] Processing is done on the image.\n- [ ] If there are any phone numbers, email or web links present in the image then they are listed in the cards properly organized.\n- [ ] On tap on the details, an option is provided to save as contact.\n- [ ] History of search results are provided in the list view\n\n## Bonus features\n\n- [ ] Provide an option to add tags for each search results.\n- [ ] Add search funtionality based on tags\n- [ ] Add login and sync the results across multiple devices.\n\n## Useful links and resources\n\n- Use google OCR to read text from the image uploaded. https://cloud.google.com/vision/docs/ocr\n- Apply regex to identify the phone number , emails and website links on the text identified from the OCR. \n\n## Example projects\n\n- Android App for text detection - https://github.com/alexzaitsev/ocr-google-vision\n" }, { "path": "Projects/2-Intermediate/Markdown-Previewer.md", "content": "# Markdown Previewer\n\n**Tier:** 2-Intermediate\n\nConvert Github flavored markdown into HTML code.\n\n## User Stories\n\n- [ ] User can enter Github flavored markdown into a `textarea`\n- [ ] User can see the resulting `HTML` in another container/box by pressing on a button\n\n## Bonus features\n\n- [ ] User can see the resulting `HTML` updated automatically when the markdown `textarea` is changed\n- [ ] 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\n- [ ] User can click a button and the content of the box is saved to the `clipboard`\n\n## Useful links and resources\n\n- [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage)\n- [Markdown Guide](https://www.markdownguide.org/basic-syntax/)\n- [Marked - A markdown parser](https://github.com/markedjs/marked)\n- [How to Copy to Clipboard](https://www.w3schools.com/howto/howto_js_copy_clipboard.asp)\n\n## Example projects\n\n- [Markdown Live Preview](https://markdownlivepreview.com/)\n" }, { "path": "Projects/2-Intermediate/Markdown-Table-Generator.md", "content": "# Markdown Table Generator\n\n**Tier:** 2-Intermediate\n\nCreate an application that will convert a regular table with data provided by the User (optionally) into a Markdown formatted table.\n\n## User Stories\n\n- [ ] User can create an `HTML table` with a given number of **Rows** and **Columns**\n- [ ] User can insert text in each cell of the `HTML table`\n- [ ] User can generate a `Markdown formatted table` that will contain the data from the `HTML table`\n- [ ] User can preview the `Markdown formatted table`\n\n## Bonus features\n\n- [ ] User can copy the `Markdown formatter table` to the clipboard by pressing a button\n- [ ] User can insert a new **Row** or **Column** to a specified location\n- [ ] User can delete a **Row** or a **Column** entirely\n- [ ] User can align (to the _left_, _right_ or _center_) a **cell**, a **column**, a **row**, or the entire **table**\n\n## Useful links and resources\n\n- [Markdown Guide](https://www.markdownguide.org/)\n- [Marked - A markdown parser](https://github.com/markedjs/marked)\n- [How to Copy to Clipboard](https://www.w3schools.com/howto/howto_js_copy_clipboard.asp)\n\n## Example project\n\n- [Tables Generator / Markdown Tables](https://www.tablesgenerator.com/markdown_tables)\n" }, { "path": "Projects/2-Intermediate/Meme-Generator-App.md", "content": "# Meme Generator App\n\n**Tier:** 2-Intermediate\n\nAllow users to generate custom memes by adding text over an image.\n\n## User Stories\n\n- [ ] User can upload an image that will appear in a canvas\n- [ ] User can add text in the top part of the image\n- [ ] User can add text in the bottom part of the image\n- [ ] User can select the color of the text\n- [ ] User can select the size of the text\n- [ ] User can save the resulting meme\n\n## Bonus features\n\n- [ ] User can select the font-family for the text\n- [ ] User can share the meme on social media (twitter, reddit, facebook, etc)\n- [ ] User can drag the text around and place it wherever he wants on top of the image\n- [ ] User can draw shapes on top of the image (circles, rectangles, or free drawing with the mouse)\n\n## Useful links and resources\n\nWorking with canvas is made very easy by the [p5js](http://p5js.org/) library.\n\n## Example projects\n\n- [Meme Generator by imgflip](https://imgflip.com/memegenerator)\n- [Meme Generator by Niels Vadot](https://codepen.io/ninivert/pen/BpLKRx)\n" }, { "path": "Projects/2-Intermediate/Name-Generator.md", "content": "# Name generation using Recurrent Neural Networks\n\n**Tier:** 2-Intermediate\n\nName 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.\nThis App should utilize a RNN model with LSTM/GRUs to ensure highly likeable naming patterns\n\n## User Stories\n\n- [ ] User can specify the first 2 to 3 letters to be used for the initial name\n- [ ] Use can see the generated name and use it accordingly\n\n\n## Useful links and resources\n\n-\t[RNN for Pokemon names](https://towardsdatascience.com/generating-pok%C3%A9mon-names-using-rnns-f41003143333)\n-\t[RNN for Dinosaur names](https://datascience-enthusiast.com/DL/Dinosaurus_Island_Character_level_language_model.html)\n" }, { "path": "Projects/2-Intermediate/Password-Generator.md", "content": "# Password Generator\n\n**Tier:** 2-Intermediate\n\nGenerate passwords based on certain characteristics selected by the user.\n\n## User Stories\n\n- [ ] User can select the length of the generated password\n- [ ] User can select one or multiple of the following: `Include uppercase letters`, `Include lowercase letters`, `Include numbers`, `Include symbols`\n- [ ] By clicking the `Generate password` button, the user can see a password being generated\n- [ ] User can click a `Copy to clipboard` button which will save the password to the clipboard\n\n## Bonus features\n\n- [ ] User can see the password strength\n\n## Useful links and resources\n\n- [Password strength checked - zxcvbn](https://github.com/dropbox/zxcvbn)\n\n## Example projects\n\n- [Password Generator by Florin Pop on Codepen](https://codepen.io/FlorinPop17/full/BaBePej)\n- [PasswordGenerator](https://passwordsgenerator.net)\n- [Enhanced Password Generator by Snehal Mahasagar](https://github.com/Snehalmahasagar/Random-Password_Generator)\n" }, { "path": "Projects/2-Intermediate/Podcast-Directory-App.md", "content": "# Podcast Directory\n\n**Tier:** 2-Intermediate\n\nIn the [GitHub Status](../1-Beginner/GitHub-Status-App.md) app you learned how to use the\nRequest package to scrape information from a web page. The Podcast Directory\ncontinues this process and introduces you to another web scraping package - \n[Puppeteer](https://github.com/GoogleChrome/puppeteer).\n\nAlthough Request is a useful package it isn't built specifically for web\nscraping like Puppeteer. As you gain experience with web scraping you'll find\nthat there are web sites and applications where web scraping is made easier\nby using a tool like Puppeteer that is specifically built for scaping.\n\nIt is important to note that while web scraping has its place, the use of\nan API or a data source such as a file or database is always preferable to \nscraping information from a page. The reason being that even minor changes to\npage styling can render your web scraper inoperable. For example, the change\nof a CSS class name your scraping logic is dependent on.\n\nThe goal of the Podcast Directory app is to pull the most recent episodes of \nthe [Javascript Jabber](https://www.podbean.com/podcast-detail/d4un8-57595/JavaScript-Jabber-Podcast)\nand [Techpoint Charlie](https://www.podbean.com/podcast-detail/k76vd-8adc7/Techpoint-Charlie-Podcast)\npodcasts from [Podbean](https://www.podbean.com) and create a new page that\ncreates a combined list of episodes, sorted by broadcast date.\n\n## User Stories\n\n- [ ] User can see a table of podcast episodes\n- [ ] User can see rows in this table showing a clickable episode icon, the\ntitle of the episode, and the date it was originally broadcast.\n- [ ] User can scroll through the list\n- [ ] User can click on the episode icon to display that episodes page on\nthe Podbean web site.\n\n## Bonus features\n\n- [ ] User can see rows in the episode table have alternating background\ncolors.\n- [ ] User can see a summary above the episode table showing the number\nof episodes for each podcast.\n- [ ] User can see a clickable checkbox next to each podcast name in the\nsummary above the episode table.\n- [ ] User can click the radio button next to the podcast name to include\nepisodes for that podcast in the episode table.\n\n## Useful links and resources\n\n- [Puppeteer](https://github.com/GoogleChrome/puppeteer)\n- [Web Scraping with a Headless Browser: A Puppeteer Tutorial](https://www.toptal.com/puppeteer/headless-browser-puppeteer-tutorial)\n- [querySelectorAll](https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/querySelectorAll)\n- Hint! You can use the following code to help you get started with this\nproject. You can execute this using the command line command `node puptest`.\n```\n// puptest.js\nconst puppeteer = require('puppeteer');\n\nconst run = async () => {\n return new Promise(async (resolve, reject) => {\n try {\n const browser = await puppeteer.launch();\n const page = await browser.newPage();\n await page.goto(\"https://www.podbean.com/podcast-detail/d4un8-57595/JavaScript-Jabber-Podcast\");\n let episodeLinks = await page.evaluate(() => {\n return Array.from(document.querySelectorAll('a.title')).map((item) => ({\n url: item.getAttribute('href'),\n text: item.innerText\n })\n );\n });\n browser.close();\n return resolve(episodeLinks);\n } catch (e) {\n return reject(e);\n }\n })\n}\n\nrun()\n.then(console.log)\n.catch(console.error);\n```\n- When you have completed this project check out the advanced project\n[MyPodcast Library](../3-Advanced/MyPodcast-Library-app.md)\n\n## Example projects\n\nN/a\n" }, { "path": "Projects/2-Intermediate/QRCode-Badge-App.md", "content": "# QRCode Badge Generator\n\n**Tier:** 2-Intermediate\n\nAt some point in your career you will probably find yourself involved helping\nto coordinate a company-sponsored event or a local technical Meetup. It's not\nuncommon in these types of gatherings for attendees to want to exchange contact\ninformation between themselves. \n\nBut how to do that? Attendees could always exchange business cards or write\ndown each others email or social media account names, but that can be slow and\nerror prone. Wouldn't it be nice to be able to scan a each others badges to\ncapture this type of information quickly and more dependably? \n\nIf you answered 'Yes!\" to this question then QRCode Badge Generator is an\napp you will be interested in creating. The objective of this application is\nto collect a meeting attendee's name, email address, Twitter, and GitHub \naccount names and print a name badge with a QRcode that can be scanned using\na smartphone.\n\n### Requirements & Constraints\n\n- For this app you'll want to use the NPM package \n[QRCode Generator](https://www.npmjs.com/package/qrcode-generator) to encode\nthe information you collect from the attendee in a QR code.\n\n- To test your implementation you'll need to download a QR code reader onto\nyour smartphone or tablet. There are many such readers that are free of charge.\nCheck the app store for your device to find the one that best suites your needs.\n\n## User Stories\n\n- [ ] User can see an input panel containing input fields for the attendee\nname, email address, Twitter account name, GitHub account name, and 'Cancel'\nand 'Create' buttons.\n- [ ] User can enter data into these input fields. Note that attendee name\nand email address are required, but the Twitter and GitHub account names are\noptional fields.\n- [ ] User can click the 'Cancel' button to clear all input fields as well as\nthe badge panel (see below) if it has been created.\n- [ ] User can click the 'Create' button to generated an image of the \nattendees name badge.\n- [ ] User can see an error message if any of the following are true:\n - Required fields are empty\n - A first name and last name have not been entered\n - Email input field isn't a properly formatted email address\n - Twitter account name doesn't start with '@'\n- [ ] User can see an badge panel displayed on screen containing this \ninformation, plus a QR code encoded with this information.\n\n## Bonus features\n\n- [ ] User can see a 'Print' button below the badge panel.\n- [ ] User can see the 'Print' button enabled only after the input fields\nhave been validated and the badge is displayed in the badge panel.\n- [ ] User can make corrections to the input fields and click 'Create' to\nupdate the contents of the badge panel.\n- [ ] User can click the 'Print' button to reproduce the badge panel on a\nlabel or hardcopy.\n- [ ] User can see the '@' symbol automatically prepended to the Twitter\naccount name so it doesn't have to be manually entered.\n\n## Useful links and resources\n\n- [QR code (Wikipedia)](https://en.wikipedia.org/wiki/QR_code)\n- [QRCode Generator](https://www.npmjs.com/package/qrcode-generator)\n\n## Example projects\n\n[QRCode Generator](https://kazuhikoarase.github.io/qrcode-generator/js/demo/)\n" }, { "path": "Projects/2-Intermediate/RegExp-Helper-App.md", "content": "# Regular Expression Helper\n\n**Tier:** 2-Intermediate\n\nRegular Expressions should be a valuable part of any developers toolbox. They\nprovide a concise way to describe a pattern that can be used to test, search, \nmatch, replace, or split the contents of a \nstring. Regular Expressions provide functionality you might otherwise have to\nimplement using loops and more lines of code.\n\nThe Regular Expression Helper helps you learn more about Regular Expressions\nby building a useful tool you'll also be able to use to test expressions\nyou use in your apps.\n\n## User Stories\n\n- [ ] User can enter a regular expression.\n- [ ] User can enter a string the regular expression can be run against.\n- [ ] User can click a 'Run' button to test\n- [ ] User can see a warning message if no regular expression was entered.\n- [ ] User can see a warning message if no string was entered.\n- [ ] User can see the matching text highlighted indicating if `test()` was able to locate the pattern in the string.\n- [ ] User can see a message if none of the text was matched.\n\n## Bonus features\n\n- [ ] User can select the flags (like 'g') to be used in the regular expression from a dropdown - global, case insensitive, multiline, sticky.\n- [ ] User can select the RegExp function to be applied from a dropdown - test, search, or match\n- [ ] User can see a message indicating the result of the selected RegExp function.\n- [ ] Developer can run automated tests using a testing framework such as\n[Jest](https://jestjs.io/)\n\n## Useful links and resources\n\n- [Javascript RegExp](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp)\n- [Regular Expressions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions)\n\n## Example projects\n\n- [RegExr](https://regexr.com/)\n- [Regular Expressions 101](https://regex101.com/)\n" }, { "path": "Projects/2-Intermediate/Sales-DB-App.md", "content": "# Sales Reciepts\n\n**Tier:** 2-Intermediate\n\nIn the [First DB App](../1-Beginner/First-DB-App.md) you were able to learn the basics of\nhow to use the IndexedDB database that's built into the browser. In Sales\nReciepts you'll take this a step further by creating an app that records\npoint of sales receipts, presumably for subsequent balancing against cash in\nthe stores cash register.\n\nThe objective of Sales Receipts is to implement point-of-sale functionality for\na merchant and to make a record of all sales in a database.\n\n### Requirements & Constraints\n\n- Developer should implement this app as a frontend application that uses the\nIndexedDB database in the browser to record all sales receipts.\n\n- Developer may implement the inventory of items available for sale as an\narray of objects in the application source. Each item should be defined with\nthe following attributes:\n - Item number (unique)\n - Description\n - Unit price\n\n- Developer should use her UI/UX skills to create a pleasant and efficient\nwindow layout that makes it easy for the user to purchase items and display \npurchase history.\n\n- The primary use case for a browser based database is to maintain state or \nstatus information that needs to persist across sessions, or as a work area for \ntemporary data. For example, data retrieved from a server that must be \nreformatted or cleansed before it's presented to the user.\n\n- It is important to keep in mind that since the client-side browser environment\ncannot be secured you should not maintain any confidential or personal\nidentifying information (PII) in a browser based database.\n\n## User Stories\n\n- [ ] User can see an purchase panel containing buttons for each item containing\nthe item number, description, and unit price, as well as a 'Clear' and a\n'Checkout' button.\n- [ ] User can click an item button to make a purchase.\n- [ ] User can see an field displaying the total sale amount incremented as\nitems are purchased.\n- [ ] User can see a reciept panel displaying the date and time of the sale,\nas well as all items selected for purchase. This includes the item number,\ndescription, and unit price.\n- [ ] User can click the 'Clear' button to clear all purchases at any time\nbefore checking out.\n- [ ] User can click the 'Checkout' button to complete purchase all selected\nitems. The final total purchase amount will be added to the end of the reciept\npanel and all selected items will be added to the database.\n- [ ] User can see the receipt panel cleared after all items have been added\nto the database.\n- [ ] User can see a 'Daily Sales' and a 'Clear All' button at the bottom of\nthe app window. \n- [ ] User can click the 'Daily Sales' button to display all items purchased\nby all customers in the receipt panel along with the total of them all.\n- [ ] User can click the 'Clear All' button to clear the receipt panel and\ndelete the record of all purchases from the database.\n\n## Bonus features\n\n- [ ] User can see an thumbnail image of the items on the item buttons.\n- [ ] User can see the 'Clear' button replaced by 'Clear Entry' and 'Cancel\nAll' buttons under the purchase panel\n- [ ] User can click the 'Clear Entry' button to clear the last selected item\nfrom the receipt panel. This has the effect of unselecting that item.\n- [ ] User can click the 'Cancel All' button to clear all purchases made\nbefore checking out.\n- [ ] User can see an input field in the input panel the user may enter the\nname of the customer into when a purchase is made. The customer name will be\nadded to all items purchased by that customer in the receipt panel and in the\nrows added to the database.\n\n## Useful links and resources\n\n- [IndexedDB Concepts (MDN)](http://tinyw.in/7TIr)\n- [Using IndexedDB (MDN)](http://tinyw.in/w6k0)\n- [IndexedDB API (MDN)](http://tinyw.in/GqnF)\n- [IndexedDB Browser Support](https://caniuse.com/#feat=indexeddb)\n\n## Example projects\n\n- N/a\n" }, { "path": "Projects/2-Intermediate/Simple-Online-Store.md", "content": "# Simple Online Store\n\n**Tier:** 2-Intermediate\n\nIn the [Product Landing Page](../1-Beginner/Product-Landing-Page.md) project you implemented\na landing page to provide your users with information about a product and to\nhopefully increase your sites conversion rate.\n\nThe goal of the Simple Online Store is to give your users the capability of \nselecting a product to purchase, viewing purchase information, adding it to\nan online shopping cart, and finally, actually purchasing the products in the\nshopping cart.\n\n### Constraints\n\n- Starting out you may implement your product inventory as an array of \nJavascript objects if you are developing in Javascript. For other languages\nfeel free to choose the in memory solution of your choice.\n\n## User Stories\n\n- [ ] User can click on a `View Products` button on the Landing Page to \ndisplay the Products Page.\n- [ ] User can see a card on the Products Page for each\nProduct showing the product thumbnail, name, price, a short description,\nand a `Select` button.\n- [ ] User can see a Product Details page displayed when the `Select` button\nis clicked showing the same information from the product card, but also a \nunique product id, a long description, `Add to Cart` button, and a \n`See More Products` button.\n- [ ] User can see a confirmation message when the product is added to the\nshopping cart.\n- [ ] User can click on the `See More Products` page to return to the \nProducts Page. \n- [ ] User can see a `Shopping Cart` button on both the Landing\nPage or the Products Page. Hint: a top bar might be a good common location\nfor this button.\n- [ ] User can click on the `Shopping Cart` button to display the Shopping\nCart page containing the product id, name, price, and quantity\nordered input box for each product previously added to the Shopping Cart.\n- [ ] User can see a total purchase amount on the Shopping Card that is\ncalculated as the sum of the quantities multiplied by the unit price for each\nproduct ordered.\n- [ ] User can adjust the quantity ordered for any product to adjust the\ntotal purchase amount. \n- [ ] User can click a `Place Order` button on the Shopping Cart Page to \ncomplete the order. User will see a confirmation number when the order has been\nplaced.\n- [ ] User can click a `Cancel Order` button on the Shopping Cart Page to \ncancel the order. User will see the product quantities and the total purchase\namount reset to zero.\n- [ ] User can click a `See More Products` button on the Shopping Cart Page\nto return to the Products Page. If the order hasn't been placed yet this will\nnot clear the products that have already been added to the Products Page.\n\n## Bonus features\n\n- [ ] User can see an error message if the quantity ordered exceeds the \n\"on hand\" quantity of the product.\n- [ ] User can specify a bill to and ship to address when the order is\nplaced from the Shopping Cart Page\n- [ ] User can see shipping charges added to the total purchase amount\n- [ ] User can see sales taxes added to the total purchase amount\n- [ ] Developer will implement the product inventory in an external file or\na database.\n\n## Useful links and resources\n\nThere are plenty of eCommerce Site Pages out there. You can use [Dribbble](https://www.dribbble.com) and [Behance](https://www.behance.net) for inspiration.\n\n## Example projects\n\n- [eCommerce Animations](https://codepen.io/RSH87/pen/RagqEv)\n\n" }, { "path": "Projects/2-Intermediate/Sports-Bracket-Generator.md", "content": "# Sports Bracket Generator\n\n**Tier:** 2-Intermediate\n\nWhether your main sport is soccer, baseball, cricket, or competitive\nEsports following the progress of your favorite team during tournaments is an\nactivity enjoyed by many. \n\nTracking team progress is traditionally done using a horizontal tree diagram\nshowing all of the initial matches on the lefthand side. At the end of each\nmatch the winner advances to the next round in the tournament along with the\nwinner of the adjacent match. Columns in the diagram are used to represent \neach round and contain one-half of the teams in the adjacent column on the left\nand twice as many teams as the adjacent column to the right. The number of \nteams in each column decreases from left to right until the last round\n(column) contains the final winner in the tournament.\n\nThe SportsBracket Generator automates the process of creating this type of chart by \ndrawing it in a browser window to relieve the user from having to draw it by\nhand.\n\n## User Stories\n\n- [ ] User can enter the name of the tournament\n- [ ] User can enter the starting and ending dates of the tournament\n- [ ] User can enter the number of teams competing in the tournament\n- [ ] User can see a warning if either the starting or ending date is \ninvalid\n- [ ] User can see a warning if an odd number of competing teams is entered\n\n## Bonus features\n\n- [ ] User can enter the competing team names for each match\n- [ ] User can enter the date for each match\n- [ ] User can enter the final score for each match\n- [ ] User can expect that this data will persist across sessions\n\n## Useful links and resources\n\n- [Bracket (tournament)](https://en.wikipedia.org/wiki/Bracket_(tournament))\n\n## Example projects\n\n- [Pure CSS & DOM Sports Bracket](https://codepen.io/cbleslie/pen/ZOLLXg)\n- [Responsive Sports Bracket](https://codepen.io/MrCaseiro/pen/bxJpwV)\n" }, { "path": "Projects/2-Intermediate/String-Art.md", "content": "# StringArt\n\n**Tier:** 2-Intermediate\n\nThe purpose of String Art is to provide the developer with practice creating a\nsimple animated graphic, using geometry in the animation algorithm, and\ncreating something that's visually pleasant to watch.\n\nString Art draws a single multicolored line which smoothly moves until one\nend touches a side of the enclosing window. At the point it touches a \"bounce\"\neffect is applied to change it's direction.\n\nA ripple effect is created by only retaining 10-20 images of the line as it\nmoves. Older images are progressively faded until they disappear.\n\nAnimation libraries are not allowed. Use only Vanilla HTML/CSS/JavaScript.\n\n## User Stories\n\n- [ ] Start by drawing a multicolored line at a random position within the boundary of it's enclosing window\n- [ ] 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\n- [ ] When either endpoint of the line touches the boundary of the enclosing window change it's direction and randomly alter its angle\n- [ ] 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\"\n\n## Bonus features\n\n- [ ] User can specify the length of the line and it's velocity\n- [ ] User can specify the multiple lines within the window, all moving along different trajectories and velocities\n\n## Useful links and resources\n\n- [Using Multistep Animations & Transitions](https://css-tricks.com/using-multi-step-animations-transitions/)\n- [Animation Basics](https://www.khanacademy.org/computing/computer-programming/programming/animation-basics/a/what-are-animations)\n\n## Example projects\n\nThis project is very close, but has a small enclosing window and is monochromatic.\n[Daniel Cortes](https://codepen.io/dgca/pen/dpxreO)\n" }, { "path": "Projects/2-Intermediate/This-or-That-Game.md", "content": "# This or That Game\n\n**Tier:** 2-Intermediate\n\nA game in which the user can select their favorite image between two choices.\n\n**Note**: `image`s - might be dogs (as in the example below), cats, cars, houses, pretty much anything.\n\n## User Stories\n\n- [ ] User can see two images\n- [ ] User can select it's favorite from the two images\n- [ ] After a selection is made, other 2 images are displayed\n\n## Bonus features\n\n- [ ] Add a smooth animation when switching between images\n- [ ] Save the votes in a database\n- [ ] Add a leaderboard in which the user can see the top 10 voted images\n\n## Useful links and resources\n\n- [Public APIs](https://github.com/public-apis/public-apis) - access to a lot of Public APIs\n\n## Example projects\n\n- [This or That (w/ dogs) by Florin Pop on Codepen](https://codepen.io/FlorinPop17/full/rNBRYKZ)\n" }, { "path": "Projects/2-Intermediate/Timezone-Slackbot.md", "content": "# Timezone Slackbot - TZ\n\n**Tier:** 2-Intermediate\n\nTeam members often need to find out each others timezone as the first step\nin finding times for meetings and pair programming sessions. To help with this\nthe Timezone Slack bot accepts as list of Slack user names and displays the\nthe timezone for each user in a stacked format as follows:\n\n```\n -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\nFred X\nNisha X\nMing X\n .\n .\n .\n```\n\nNote that this format is provided for descriptive purposes only. When\nimplemented a more pleasing and user-friendly format may be used.\n\n## User Stories\n\n- [ ] User can enter `/tz ...` to display tabular representation showing each users timezone\n- [ ] User can see information displayed using alternate row colors to increase clarity and readability\n\n## Bonus features\n\n- [ ] User can see the persons timezone displayed next to their name. For example, 'IST' for India Standard Time\n\n## Useful links and resources\n\nMore information about timezones can be found [here](https://www.timeanddate.com/time/current-number-time-zones.html)\n\n## Example projects\n\n[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)\n" }, { "path": "Projects/2-Intermediate/To-Do-App.md", "content": "# To-Do App\n\n**Tier:** 2-Intermediate\n\nThe classic To-Do application where a user can write down all the things he wants to accomplish.\n\n## User Stories\n\n- [ ] User can see an `input` field where he can type in a to-do item\n- [ ] 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\n- [ ] User can mark a to-do as `completed`\n- [ ] User can remove a to-do item by pressing on a button (or on the to-do item itself)\n\n## Bonus features\n\n- [ ] User can edit a to-do\n- [ ] User can see a list with all the completed to-do's\n- [ ] User can see a list with all the active to-do's\n- [ ] User can see the date when he created the to-do\n- [ ] When closing the browser window the to-do's will be stored and when the User returns, the data will be retrieved\n\n## Useful links and resources\n\n- [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage)\n\n## Example projects\n\n- [Todo App built with React](http://todomvc.com/examples/react/#/)\n- [To Do List on Codepen](https://codepen.io/yesilfasulye/pen/eJIuF) by [Burak Kaya](https://codepen.io/yesilfasulye/)\n- [Todo App in Plain JavaScript](https://safdarjamal.github.io/todo-app/)\n- [Todo App in Golang](https://github.com/schadokar/go-to-do-app)\n" }, { "path": "Projects/2-Intermediate/Typing-Practice-App.md", "content": "# Typing Practice\n\n**Tier:** 2-Intermediate\n\nSome things are so obvious they can be easily overlooked. As a developer \nyour ability to type quickly and accurately is one factor that influences \nyour development productivity. The objective of the Typing Practice app is\nto provide you with typing practice along with metrics to allow you to\nmeasure your progress.\n\nTyping practice displays a word which you must then type within a specific\ninterval of time. If the word is incorrectly typed it stays on\nscreen and the time interval remains the same. But when the word is correctly \ntyped a new word is displayed and the time interval is slightly reduced.\n\nHopefully, this repetitive practice will help you improve both your typing\nspeed and accuracy.\n\n## User Stories\n\n- [ ] User can see the time interval words must be typed in displayed in \nthe app window.\n- [ ] User can see the number of successful attempts and the number of total\nattempts in a score box.\n- [ ] User can click a 'Start Practice' button to start the practice session.\n- [ ] User can see the prompt word displayed in a text box.\n- [ ] User can begin typing the word in a text input box.\n- [ ] User can see the letters that have been typed flash if an incorrect\nletter is entered and the text input box will be cleared.\n- [ ] User can see the a message adjacent to the text input box indicating\nthe user should try again if an incorrect letter is entered.\n- [ ] User can see the number of total attempts incremented in the score box.\n- [ ] User can see a congratulations message if the word is correctly typed.\n- [ ] User can see the time interval words must be typed decremented by a\nsmall amount if the word is correctly typed.\n- [ ] User can see the number of successful attempts incremented in the score\nbox if the word was correctly typed.\n- [ ] User can click a 'Stop Practice' button to stop the practice session.\n\n## Bonus features\n\n- [ ] User can hear a unique audible tone signalling when a new word is \ndisplayed, a word is correctly entered, or an incorrect letter is typed in\nthe word.\n- [ ] User can login to the app\n- [ ] User can see cumulative performance statistics across all of his/her\npractice sessions.\n\n## Useful links and resources\n\n- [keydown](https://developer.mozilla.org/en-US/docs/Web/Events/keydown)\n- [setInterval](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval)\n\n## Example projects\n\n[Twiddler Typing Tutor](http://twiddler.tekgear.com/tutor/twiddler.html)\n" }, { "path": "Projects/2-Intermediate/Voting-App.md", "content": "# Voting App\n\n**Tier:** 2-Intermediate\n\nAllow users to vote give multiple choices\n\n## User Stories\n\n- [ ] User can see a list of items he can vote on\n- [ ] These items must have a button that the user can click on to vote\n- [ ] After the user clicked a button, the user should see all the votes\n\n## Bonus features\n\n- [ ] Store items and votes in a database\n- [ ] Only allow authenticated users to vote\n\n## Useful links and resources\n\n- [Firebase](https://firebase.google.com) for a realtime database\n\n## Example projects\n\n- [Voting App by Florin Pop on Codepen](https://codepen.io/FlorinPop17/full/NWKQWmq)\n" }, { "path": "Projects/2-Intermediate/math-editor.md", "content": "# Math Formula Editor\n\n**Tier:** 2-Intermediate\n\nAn 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.\n\nThe app will probably use a math markup system such as LaTeX.\n\n## User Stories\n\n- [ ] User can write to a text document\n- [ ] User can add a math formula to that text document\n- [ ] User can save the document either to a database or as a file locally\n- [ ] User can load the file and all the formulas should be still intact\n\n## Bonus features\n\n- [ ] User can change the font size of text\n- [ ] User can change other attributes of text (color, bold, etc.)\n- [ ] User can add images to the document\n\n## Useful links and resources\n\n- [Mathquill](http://mathquill.com/)\n\n## Example projects\n\n- [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)\n- [Online demo of a simple math editor](https://math-demo.abitti.fi)\n" }, { "path": "Projects/3-Advanced/Battleship-Bot.md", "content": "# Battleship Bot\n\n**Tier:** 3-Advanced\n\nBattleship Bot takes the [Battleship Game Engine](./Battleship-Game-Engine.md)\nto the next level. This challenge uses your Battleship Game Engine to create a\npresentation layer using Discord's bot API to allow you to play the game\nvia a Discord chat.\n\n## User Stories\n\n- [ ] User can display game rules by entering `bb help` into the chat window.\n- [ ] User can start a game by entering `bb start` into the chat\n- [ ] 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.\n- [ ] User can see the game board showing hits and misses displayed by the bot after each shot is taken\n- [ ] User can see a congratulations message after the shot that sinks the last remaining ship.\n\n## Bonus features\n\n- [ ] User can surrender a game by entering `bb surrender` in the chat window.\n- [ ] User can see a card containing a graphical representation of the hits and misses rather than a simple 2D table of characters.\n\n## Useful links and resources\n\n- [Battleship Game Engine](./Battleship-Game-Engine.md)\n- [How to Create a Discord Bot Under 15 Minutes](https://medium.freecodecamp.org/how-to-create-a-discord-bot-under-15-minutes-fb2fd0083844)\n- [Using Embeds in Messages](https://anidiots.guide/first-bot/using-embeds-in-messages)\n- [Discord Developer Portal](https://discordapp.com/developers/docs/intro)\n\n## Example projects\n\n- [Gamebot(Battleship)](https://repl.it/talk/challenge/GameBot-Battleship/8813)\n" }, { "path": "Projects/3-Advanced/Battleship-Game-Engine.md", "content": "# Battleship Game Engine\n\n**Tier:** 3-Advanced\n\nBattleship Game Engine (BGE) implements the classic turn-based board game as a\npackage that's separated from any presentation layer. This is a type of\narchitectural pattern that useful in many application since it allows\nany number of apps to utilize the same service.\n\nThe BGE itself is invoked through a series of function calls rather than\nthrough directly coupled end user actions. In this respect using the BGE is\nis similar to using an API or a series of routes exposed by a web server.\n\nThis challenge requires that you develop the BGE and a very thin, text-based\npresentation layer for testing that's separate from the engine itself. Due to\nthis the User Stories below are divided two sets - one for the BGE and one\nfor the text-based presentation layer.\n\nBGE is responsible for maintaining game state.\n\n## User Stories\n\n### BGE\n\n- [ ] 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:\n\n - Destroyer: 2 squares\n - Cruiser: 3 squares\n - Battleship: 4 squares\n\n `startGame()` will randomly place these ships on the board in any direction and will return an array representing ship placement.\n\n- [ ] 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.\n\n 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.\n\n### Text-based Presentation Layer\n\n- [ ] User can see the hits and misses array displayed as a 2 dimensional character representation of the game board returned by the `startGame()` function.\n- [ ] User can be prompted to enter the coordinates of a target square on the game board.\n- [ ] User can see an updated hits and misses array display after taking a shot.\n- [ ] User can see a message after each shot indicating whether the shot resulted in a hit or miss.\n- [ ] User can see an congratulations message after the shot that sinks the last remaining ship.\n- [ ] User can be prompted to play again at the end of each game. Declining to play again stops the game.\n\n## Bonus features\n\n### BGE\n\n- [ ] Caller can specify the number of rows and columns in the game board as a parameter to the `startGame()` function.\n- [ ] 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.\n- [ ] 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.\n\n `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.\n\n### Text-based Presentation Layer\n\n- [ ] 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)\n- [ ] 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)\n- [ ] User can see the player number in prompts associated with the inputs in each turn.\n- [ ] User can see both players boards at the end of each turn.\n\n## Useful links and resources\n\n- [Battleship Game (Wikipedia)]()\n- [Battleship Game Rules (Hasbro)](https://www.hasbro.com/common/instruct/battleship.pdf)\n\n## Example projects\n\nThis YouTube video shows how a text-based [Battleship Game](https://www.youtube.com/watch?v=TKksu3JXTTM) is played.\n\nThe 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.\n\n- [Battleship Game by Chris Brody](https://codepen.io/CodifyAcademy/pen/ByBEOz)\n" }, { "path": "Projects/3-Advanced/Boole-Bot-Game.md", "content": "# Boole Bots Game\n\n**Tier:** 3-Advanced\n\nBoole Bots is a game that is not only fun, but also an aid in helping to \nunderstand basic Boolean logic. This game has an arena of 8x8 game tiles in\nwhich your bots move at random speeds and trajectories. The Bots are assigned\nboolean values of 0 or 1 and boolean operations - AND, OR, NOR, NOT. \n\nWhen a bot collides with another bot its boolean operation is applied to both\nit and the other bots' boolean value to determine which one wins or looses, or\nif the collision results in a tie. Loosing bots disappear and winning bots \ncontinue moving about the arena until only one remains.\n\n### Requirements & Constraints\n\n- Developers may use graphics and game physics libraries to build the game.\n\n## User Stories\n\n- [ ] User can see the game window with these components\n - Game configuration input panel\n - Leaderboard showing bots ranked by their scores\n - Game controls\n - Arena of 8x8 game tiles where the bots battle\n\n### Game Configuration Panel\n- [ ] User can see a game configuration panel with these subcomponents:\n - Four bot panels with controls to allow the user to input a unique bot \n name, select its Boolean value and operation, select the bots speed using a \n slider, and a dropdown to specify its starting direction - North, South, \n East, West\n- [ ] User can enter a unique name for each bot into an input text box\n- [ ] User can see an error message if the name entered is the same name\nassigned to another bot.\n- [ ] User can select the bots Boolean value (0 or 1) from a dropdown.\n- [ ] User can select a bots Boolean operation from a dropdown - AND, OR, XOR,\nor NOT.\n- [ ] User can move the speed slider to set a bots speed\n- [ ] User can select a bots starting direction from the direction dropdown.\n- [ ] User can see the bot randomly assigned to a tile in the arena once its\nname has been defined.\n\n### Game Controls\n- [ ] User can a button in the game control panel to 'Battle!'\n- [ ] User can click the 'Battle!' button to start the bot battle in the arena.\n- [ ] User can see bots move based on the speed and direction assigned to them.\n- [ ] User can see the 'Battle!' button text change to 'Stop!' once a battle\nis started.\n- [ ] User can click the 'Stop!' button to halt gameplay\n- [ ] User can see the 'Stop!' button text change back to 'Battle!' once a\nsingle bot wins the match.\n\n### Arena\n- [ ] User can see bots bounce off the boundary walls of the arena in a new\ndirection\n- [ ] User can see bots pause for an instant when they collide.\n- [ ] User can see a bot disappear after colliding if the result of it's \nboolean operation appied to its boolean value and that of the bot is has \ncollided with result in 0.\n- [ ] User can see a bot that wins a collision resume its path at the same \nspeed and direction.\n- [ ] User can see both colliding bots resume their paths at the same speed\nand direction in the event of a tie. In other words, when the collision resulted\nin the same boolean result (0 or 1) for both.\n- [ ] User can see gameplay stop when only one bot remains.\n\n### Leaderboard\n- [ ] User can see the display of wins and losses for each bot on the\nleaderboard\n- [ ] User can see the tally of wins incremented for bots winning a collision.\n- [ ] User can see the tally of losses decremented for bots loosing a collision.\n\n## Bonus features\n\n- [ ] User can see a log panel displaying the details of game milestones.\nHint: This may be useful to the Developer during development and debugging.\n- [ ] User can see a game clock displaying current elapsed game time that is\nupdated every second.\n- [ ] User may choose a bots starting direction as North, Northeast, Southeast,\nSouth, Southwest, West, or Northwest.\n- [ ] User may specify the dimensions of the arena.\n- [ ] User may select an unique icon for a bot from a palette of icons. Icons\nin the palette are disabled once they are assigned.\n- [ ] User can see the bot with the most wins highlighted in some way in the\nLeaderboard.\n\n## Useful links and resources\n\n- [George Boole (Wikipedia)](https://en.wikipedia.org/wiki/George_Boole)\n- [Boolean Algebra (Wikipedia)](https://en.wikipedia.org/wiki/Boolean_algebra)\n- [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)\n\n## Example projects\n\n- N/a\n" }, { "path": "Projects/3-Advanced/Bug-Race-Game.md", "content": "# Bug Race\n\n**Tier:** 3-Advanced\n\nIn this project you will test your animation skills by creating a game that\nlets the user race bugs while trying to guess the winner. As part of this\nyou'll need to provide the user with various controls that allow the game to\nbe customized including bug icons, assigning names to the bugs, making a choice \nof who the winner might be, and bug speed.\n\n### Constraints\n- The developer will need to select the bug icons to be used in the game\n- The developer should randomly adjust the speed of each bug before a race\nstarts so they travel at different rates within the speed selected by the\nuser (slow, normal, or fast).\n- It is up to the developer to define the speed ranges associated with the slow,\nnormal, and fast speed setting.\n- You may use an animation library, but you'll get more out of this project\nif you try to implement it using native language features.\n\n## User Stories\n\n- [ ] User can see: \n - An input panel containing controls to configure the game's UI and \n operation.\n - A race track consisting of four horizontal lanes the bugs will travel in\n - A radio button associated with each lane to allow the user to select a \n potential winner\n - A 'Start' button.\n\n### Game Controls\n- [ ] User can see the following controls in the input panel.\n - A list of race lane numbers with radio buttons for each showing\n thumbnails for three unique bugs, and a text box the user can use to \n give the bug a name.\n - An Speed selection control with three radio buttons - Slow, Normal, Fast\n- [ ] User can click a radio button to select the bug icon to be assigned\nto a lane. \n- [ ] User can see an warning message if the same icon is selected for more\nthan one lane.\n- [ ] User can enter a name for the bug in each lane.\n- [ ] User can see an error message if the same name is repeated for more than\none bug.\n- [ ] User can select the bug speed by clicking one of the Speed radio buttons\n\n### Racing\n\n- [ ] User can select a potential winner by clicking on the radio button on\nany lane.\n- [ ] User can start a race by clicking on the 'Start' button\n- [ ] User can see the 'Start' button is disabled until the race is over\n- [ ] User can see an error message if no winner was selected.\n- [ ] User can see bugs race across their assigned lane to the finish line\n- [ ] User can see all bugs stop moving when the first one reaches the finish\nline\n- [ ] User can see game metrics updated to show the number of races run in\nthis session.\n\n## Bonus features\n\n- [ ] User can see race metrics for each bug showing the number of races\nrun, number of wins, and number of losses.\n- [ ] User can see the winning bug bounce when it wins a race\n- [ ] User can see loosing bugs flip on their backs when they loose a race\n- [ ] User can hear unique sounds played when the race starts and ends.\n\n## Useful links and resources\n\n- [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)\n- [Basic Animations (MDN)](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations\n)\n- [How to build a simple Sprite animation in Javascript](https://medium.com/dailyjs/how-to-build-a-simple-sprite-animation-in-javascript-b764644244aa)\n- [Javascript Animations](https://javascript.info/animation)\n\n## Example projects\n\n- [Arcade Game](https://jdmedlock.github.io/arcadegame/)\n- [Drag Race Animation](https://codepen.io/Delime/pen/IyuAr)\n- [Horse Race](https://codepen.io/nathanielzanzouri/pen/jVgEZY)" }, { "path": "Projects/3-Advanced/Calorie-Counter-App.md", "content": "# Calorie Counter\n\n**Tier:** 3-Advanced\n\nGetting and staying healthy requires a combination of mental balance, \nexercise, and nutrition. The goal of the Calorie Counter app is to help the\nuser address nutritional needs by counting calories for various foods.\n\nThis app provides the number of calories based on the result of a user search\nfor a type of food. The U.S. Department of Agriculture MyPyramid Food Raw Data\nwill be searched to determine the calorie values.\n\nCalorie Counter also provides you, the developer, with experience in transforming\nraw data into a format that will make it easier to search. In this case, the\nMyPyramid Food Raw Data file, which is an MS Excel spreadsheet, must be \ndownloaded and transformed into a JSON file that will be easier to load and\nsearch at runtime (hint: take a look at the CSV file format).\n\n## User Stories\n\n- [ ] Developer will create a JSON file containing the food items to be\nsearched. This will be loaded when the app is started.\n- [ ] User can see an panel containing a food description input text box, \na 'Search' button, and a 'Clear' button.\n- [ ] User can enter search terms into the food description input text box.\n- [ ] User can click on the 'Search' button to search for the matching food.\n- [ ] User can see a warning message if no search terms were entered.\n- [ ] User can see a warning message if no matches were found.\n- [ ] User can see a list of the matching food items, portion sizes, and\ncalories in a scrollable results panel that is limited to 25 entries.\n- [ ] User can click on the 'Clear' button to clear the search terms and \nresults list. \n\n## Bonus features\n\n- [ ] User can see the count of the number of matching food items adjacent to\nthe results list.\n- [ ] User can use a wildcard character in search terms.\n- [ ] User can see more than 25 entries from a search by clicking a Down\nicon button to add more matching food items to the search results list.\n- [ ] Developer will implement load the MyPyramid data into a database or a\ndata structure other than an array for faster searching. \n\n## Useful links and resources\n\n[MyPyramid Food Raw Data](https://catalog.data.gov/dataset/mypyramid-food-raw-data)\n\n## Example projects\n\n[Food Calculator](https://www.webmd.com/diet/healthtool-food-calorie-counter)\n" }, { "path": "Projects/3-Advanced/Chat-App.md", "content": "# Chat App\n\n**Tier:** 3-Advanced\n\nReal-time chat interface where multiple users can interact with each other by sending messages.\n\nAs a MVP(Minimum Viable Product) you can focus on building the Chat interface. Real-time functionality can be added later (the bonus features).\n\n## User Stories\n\n- [ ] User is prompted to enter a username when he visits the chat app. The username will be stored in the application\n- [ ] User can see an `input field` where he can type a new message\n- [ ] 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!`)\n\n## Bonus features\n\n- [ ] The messages will be visible to all the Users that are in the chat app (using WebSockets)\n- [ ] When a new User joins the chat, a message is displayed to all the existing Users\n- [ ] Messages are saved in a database\n- [ ] User can send images, videos and links which will be displayed properly\n- [ ] User can select and send an emoji\n- [ ] Users can chat in private\n- [ ] Users can join `channels` on specific topics\n\n## Useful links and resources\n\n- [Socket.io](https://socket.io)\n- [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)\n- [Build a chat application like Slack - React / JavaScript Tutorial - Youtube](https://www.youtube.com/watch?v=a-JKj7m2LIo)\n- [Socket.io Chat App Using Websockets - Youtube Tutorial](https://www.youtube.com/watch?v=tHbCkikFfDE)\n\n## Example projects\n\n- [Chatty2](https://web-chatty.herokuapp.com/)\n- [Simple TCP Socket based Chat application](https://github.com/dularish/Simple-TCP-Socket-based-Chat-App)\n" }, { "path": "Projects/3-Advanced/Contribution-Tracker-App.md", "content": "# Contribution Tracker\n\n**Tier:** 3-Advanced\n\nIn the [Charity Finder](../2-Intermediate/Charity-Finder-App.md) project you created an app to\nhelp you locate a charity worthy of your contributions. Once a contribution\nhas been made the goal of the Contribution Tracker app is to track it so to\nprovide users with a record of all contributions for use in monitoring how\nfunds are being directed and to provide records for financial reporting \npurposes. For example, for tax reporting.\n\n### Constraints\n\n- Developers may use Vanilla JS, or a framework of their choice (like React,\nVueJS, etc.).\n\n- Developers should not use libraries for calculating and manipulating monetary\namounts. All calculation and formatting should be done in the language chosen\nto develop the application.\n\n- Developers may use a graphics presentation library or service of their choice,\nlike [AMCharts](https://www.amcharts.com/).\n\n- Developers may choose to have transactions persist across sessions using\neither files or databases. Sensitive data, like transactions, must not be \nmaintained in local storage. Remember that although you can implement\nprotections it is impossible to totally secure browser applications.\n\n## User Stories\n\n- [ ] User can see a Navigation Bar at the top of each page containing the\napplication name and a \"hamburger\" menu with these option:\n - Dashboard\n - Transactions\n- [ ] User can see a Footer Bar at the bottom of each page containing an\nAbout link\n\n### Dashboard Page\n- [ ] User can see the Dashboard page when the app is started containing \ngraphical summaries of the following key metrics. The graphical representation\nfor each is left up to the Developer.\n - Contributions by month for the current year\n - Total contributions by year\n - Contribution increase/decrease by year\n - Average contribution amount by month and year\n- [ ] User can return to the Dashboard page, if currently on another page, by\nclicking on the 'Dashboard' option in the hamburger menu in the Navigation Bar.\n\n### Transactions Page\n- [ ] User can see a transaction input panel containing the following:\n - Transaction date\n - Payee name\n - Amount\n - Memo\n - Action buttons - 'Clear', 'Add'\n- [ ] User can see a tabular transaction ledger containing previously \nentered transactions. Each row will also contain a 'Modify' and a 'Delete' \nbutton.\n- [ ] User can enter values describing the transaction into the input fields\n- [ ] User can click the 'Clear' button to reset all input fields to an\nempty state.\n- [ ] User can click the 'Add' button to validate the input that has been\nentered, add the validated entry to the transaction ledger, and clear the input\nfields.\n- [ ] User can see a consolidated error message detailing any errors detected\nin input fields, including:\n - Invalid date \n - Blank Payee name\n - Non-numeric amount field\n- [ ] User can click on the 'Update' button to modify a previously entered\ntransaction. The transaction details will be copied to the transaction input\npanel and the 'Add' button will change to 'Modify'.\n- [ ] User can change values in the input fields and click the 'Modify' to\nvalidate the input and update that transactions entry in the ledger. If\nsuccessful the 'Modify' button will change back to 'Add' and the input fields\nwill be cleared.\n- [ ] User can click the 'Delete' button to remove a previously entered\ntransaction. A popup dialog will be displayed containing 'Cancel' and 'Okay'\nbuttons to cancel or confirm the delete. If the delete is confirmed the \ntransaction will be removed from the ledger.\n- [ ] User can return to the Transactions page, if currently on another page,\nby clicking on the 'Transactions' option in the hamburger menu in the Navigation\nBar.\n\n### About Page\n- [ ] User can click the About link in the Footer Bar to display information\nabout the Developer.\n- [ ] User can see links to the Developers GitHub and social media accounts \nincluding social media icons (like the Twitter icon).\n\n## Bonus features\n\n- [ ] User can click in the transaction date field to display a calendar\nthe date can be selected from rather than manually entering it.\n- [ ] User can see alternating row background colors in the transaction ledger.\n- [ ] User can click on a column heading in the transaction ledger to toggle\nthe sort sequence on the values in that column.\n- [ ] User can see a PDF option near the Transaction Ledger to create a PDF\nof all transactions (Hint: checkout how this capability can be implemented via \n[Puppeteer](https://github.com/GoogleChrome/puppeteer)).\n\n## Useful links and resources\n\n- [How to Handle Monetary Values in Javascript](https://frontstuff.io/how-to-handle-monetary-values-in-javascript)\n- [How to Format Number as Currency](https://flaviocopes.com/how-to-format-number-as-currency-javascript/)\n- [Mintable (GitHub)](https://github.com/kevinschaich/mintable)\n\n## Example projects\n\nN/a\n" }, { "path": "Projects/3-Advanced/Elevator-App.md", "content": "# Elevator\n\n**Tier:** 3-Advanced\n\nIt's tough to think of a world without elevators. Especially if you have to\nwalk up and down 20 flights of stairs each day. But, if you think about it \nelevators were one of the original implementations of events and event handlers\nlong before web applications came on the scene.\n\nThe objective of the Elevator app is to simulate the operation of an elevator\nand more importantly, how to handle the events generated when the buildings\noccupants use it. This app simulates occupants calling for an elevator from\nany floor and pressing the buttons inside the elevator to indicate the floor\nthey wish to go to. \n\n### Constraints\n\n- You must implement a single event handler for the up and down buttons on\neach floor. For example, if there are 4 floors a single event handler should\nbe implemented rather than 8 (two buttons per floor).\n- Similarly, a single event handler should be implemented for all buttons on\nthe control panel in the elevator rather than a unique event handler for each\nbutton.\n\n## User Stories\n\n- [ ] User can see a cross section diagram of a building with four floors,\nan elevator shaft, the elevator, and an up button on the first floor, up and \ndown buttons on the second and third floors, and a down button on the fourth\nfloor.\n- [ ] User can see the elevator control panel with a button for each of the\nfloors to the side of the diagram.\n- [ ] User can click the up and down button on any floor to call the \nelevator.\n- [ ] User can expect that clicking the up and down buttons on any floor\nto request the elevator will be queued and serviced in the sequence they were\nclicked.\n- [ ] User can see the elevator move up and down the shaft to the floor it\nwas called to.\n- [ ] User can click the elevator control panel to select the floor it\nshould travel to.\n- [ ] User can expect the elevator to pause for 5 seconds waiting for a\nfloor button on the control panel to be clicked. If a floor button isn't\nclicked within that time the elevator will process the next call request.\n- [ ] User can expect the elevator to return to the first floor when there\nare no requests to process.\n\n## Bonus features\n\n- [ ] User can see a warning sound if the number of elevator requests\nexceeds the maximum number allowed. This limit is left to the developer.\n- [ ] User can hear a sound when the elevator arrives at a floor.\n- [ ] User can see an occupant randomly arrive at a floor to indicate when\nthe user should click the up or down elevator call button on that floor.\n- [ ] User can specify the time interval between new occupants arriving to\ncall an elevator.\n\n## Useful links and resources\n\n[First-in, first out queue (Wikipedia)](https://en.wikipedia.org/wiki/FIFO_(computing_and_electronics))\n\n## Example projects\n\n[Elevator](https://codepen.io/nibalAn/pen/prWdjq)\n" }, { "path": "Projects/3-Advanced/FastFood-App.md", "content": "# Fast Food Simulator App\n\n**Tier:** 3-Advanced\n\nFast Food simulates the operation of a simple take-away restaurant and is\ndesigned to help the developer put his or her knowledge of Promises and SOLID\ndesign principles to work.\n\nThis app simulates customers of a take-away restaurant placing orders and\nand waiting for them to be prepared and delivered to a pickup counter. After\nplacing the order the customer waits on the order to be announced before\npicking it up and proceeding to the dining area.\n\nThe user stories that make up this app center around four distinct roles:\n\n- User - the end user using the application\n- Customer - the simulated Customer\n- Order Taker - the simulated Order Taker\n- Cook - the simulated Cook\n- Server - the simulated Server\n\nThis app has quite a few User Stories. Don't be overwhelmed though. Take the \ntime to sketch out not just the UI, but how the different actors (roles) \ninteract and incrementally build the app following Agile principles.\n\n### Constraints\n\n- Order tickets can be represented as two different types of Promises - one\nthe Server waits on while the Cook prepares the order and another the Customer\nwaits on while in the serving line.\n- Use the native equivalent of JS Promises in whichever language you choose\nto develop in. JS developers should use native Promises and not `async/await`.\n- Create this app using native language features. You may NOT use a simulation\npackage or library.\n- New customers arrive in the order line at a fixed interval of time. In other\nwords, new customers arrive at a constant rate.\n- Order tickets are fulfilled at a fixed interval of time as well. They are\ncompleted at a constant rate.\n\n## User Stories\n\n### Application Operation\n- [ ] User can see an input area that allows the entry of the time interval\nfor customer arrival and a time interval for the fulfilment of an \n_order ticket_ by the cook.\n- [ ] User can see a customized warning message if the customer arrival\ninterval or the order fulfilment interval is incorrectly entered.\n- [ ] User can start the simulation by clicking on a Start button. \n- [ ] User can see an order line area containing a text box showing the \nnumber of customers waiting to place orders.\n- [ ] User can see an order area containing text boxes showing the\n_order number_ currently being taken. \n- [ ] User can see a kitchen area containing a text box showing the \n_order number_ that's being prepared and a text box listing the waiting \norders in sequence, along with a count of the number of waiting orders.\n- [ ] User can see a Pickup area containing a text box showing the \n_order number_ that's currently available for pickup by the Customer and a\ntext box showing the number of Customers waiting in the serving line.\n- [ ] User can stop the simulation at any time by clicking a Stop button. \n\n## Bonus features\n\n- [ ] User can specify how long it takes for an Order Taker to create an\n_order ticket_.\n- [ ] User can specify how long it takes for the Server to deliver an order\nto the customer.\n- [ ] User can specify the total amount of time the simulation is to run\nonce the Start button has been clicked. \n- [ ] User can see an animated view of Customers and orders as they move\nthrough the workflow.\n\n## Useful links and resources\n\n- [Fast Food Simulator - Logical Workflow](https://drive.google.com/file/d/1Thfm5cFDm1OjTg_0LsIt2j1uPL5fv-Dh/view?usp=sharing)\n- [Agile Manifesto & 12 Principles of Agile Software](http://agilemanifesto.org/)\n- [SOLID Principles Every Developer Should Know](https://blog.bitsrc.io/solid-principles-every-developer-should-know-b3bfa96bb688)\n- [Using Promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises)\n- [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)\n\n## Example projects\n\n- N/a\n" }, { "path": "Projects/3-Advanced/GitHub-Timeline-App.md", "content": "# GitHub Timeline\n\n**Tier:** 3-Advanced\n\nAPI's and graphical representation of information are hallmarks of modern\nweb applications. GitHub Timeline combines the two to create a visual history\nof a users GitHub activity.\n\nThe goal of GitHup Timeline is accept a GitHub user name and produce a\ntimeline containing each repo and annotated with the repo names, the date\nthey were created, and their descriptions. The timeline should be one that\ncould be shared with a prospective employer. It should be easy to read and\nmake effective use of color and typography.\n\nOnly public GitHub repos should be displayed.\n\n## User Stories\n\n- [ ] User can enter a GitHub user name\n- [ ] User can click a 'Generate' button to create and display the named\n users repo timeline\n- [ ] User can see a warning message if the GitHub user name is not a valid\n GitHub user name.\n\n## Bonus features\n\n- [ ] User can see a summary of the number of repos tallied by the year they\n were created\n\n## Useful links and resources\n\nGitHub offers two API's you may use to access repo data. You may also choose\nto use an NPM package to access the GitHub API.\n\nDocumentation for the GitHub API can be found at:\n\n- [GitHub REST API V3](https://developer.github.com/v3/)\n- [GitHub GraphQL API V4](https://developer.github.com/v4/)\n\nSample code showing how to use the GitHub API's are:\n\n- [GitHub REST API client for JavaScript ](https://github.com/octokit/rest.js/)\n- [GitHub GraphQL API client for browsers and Node](https://github.com/octokit/graphql.js)\n\nYou can use this CURL command to see the JSON returned by the V3 REST API for\nyour repos:\n\n```\ncurl -u \"user-id\" https://api.github.com/users/user-id/repos\n```\n\n## Example projects\n\n- [CSS Timeline](https://codepen.io/NilsWe/pen/FemfK)\n- [Building a Vertical Timeline With CSS and a Touch of JavaScript](https://codepen.io/tutsplus/pen/QNeJgR)\n" }, { "path": "Projects/3-Advanced/GitTweet-App.md", "content": "# GitTweet\n\n**Tier:** 3-Advanced\n\nIn the [GitHub Timeline](./GitHub-Timeline-App.md) app you used GitHub's API to\ncreate a timeline of your repos. What could be more powerful that using an API\nsuch as this? Why using two API's, of course.\n\nThe goal of GitTweet is to create a GitHub app to tweet when a pull request\nis created for one of your repos. \n\n## User Stories\n\n- [ ] User can see an input area tabular display prepopulated with rows for \neach of the GitHub repos she owns and a selection checkbox next to each repo \nname, a single input date field, and a 'Scan' button.\n- [ ] User can click the checkboxes in the repo list to select or deselect\nrepos for processing.\n- [ ] User can enter a date into the date field. This defines the point after\nwhich any new PR requests will be tweeted.\n- [ ] User can click the 'Scan' button to identify repos that have had a new\nPR created that has not been previously tweeted. In other words. Consecutively\nentering the same date to scan from should only generate tweets for PR's that\nhave not yet been tweeted.\n- [ ] User can see an error message if no date was entered, if it is not a\nvalid date, or if it is a future date.\n- [ ] User can see repos highlighted if a tweet will be generated for them\nand the 'Scan' button will change to 'Tweet'.\n- [ ] User may deselect a repo by clicking on its checkbox. Doing this will\nchange the button back to 'Scan' and clicking it will repeat the search for\nrepos that have had new PR's (not yet tweeted) created since the scan date \nentered by the user.\n- [ ] User may enter an new scan date at this point which also changes the\nbutton back to 'Scan'.\n- [ ] User may click the 'Tweet' button to send a tweet bearing the following\nmessage - `Pull Requst # created for repo - `.\n- [ ] User can see this tweet send from her Twitter account.\n\n## Bonus features\n\n- [ ] User does not need to manually enter a scan date. If omitted the scan\nwill resume from the last scan date which must persist across sessions.\n- [ ] User may enter a custom tweet message\n- [ ] User repo selections will persist across sessions so they do not have \nto be reselected each time.\n\n## Useful links and resources\n\n- [Twitter Developer Docs](https://developer.twitter.com/en.html)\n- [GitHub Apps](https://developer.github.com/apps//)\n- GitHub offers two API's you may use to access repo data. You may also choose\n to use an NPM package to access the GitHub API. Documentation for the GitHub \n API can be found at:\n\n - [GitHub REST API V3](https://developer.github.com/v3/)\n - [GitHub GraphQL API V4](https://developer.github.com/v4/)\n\n Sample code showing how to use the GitHub API's are:\n\n - [GitHub REST API client for JavaScript ](https://github.com/octokit/rest.js/)\n - [GitHub GraphQL API client for browsers and Node](https://github.com/octokit/graphql.js)\n\n You can use this CURL command to see the JSON returned by the V3 REST API for\n your repos:\n\n ```\n curl -u \"user-id\" https://api.github.com/users/user-id/repos\n ```\n\n## Example projects\n\n[Zapier GitHub Integration](https://zapier.com/apps/github/integrations/twitter)\n" }, { "path": "Projects/3-Advanced/Instagram-Clone-App.md", "content": "# Instagram Clone\n\n**Tier:** 3-Advanced\n\nA clone of Facebook's Instagram app where you can login/register, create new posts, follow other users and see other people you follows posts\n\nYou 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.\n\n## User Stories\n\n- [ ] User can register for an account storing their name, email/username and password then login to the app using their credentials\n- [ ] User can create a post and store images to the server (Preferably in a database)\n- [ ] User has a profile that displays all the images they have uploaded\n- [ ] User can follow other users\n- [ ] User can see other users posts (people who the user follows)\n\n## Bonus features\n\n- [ ] User can see a global feed of images\n- [ ] The feed auth refreshes when a new post is added (You can use Web Sockets)\n- [ ] User can send messages to other users\n- [ ] User can create a story for followers\n\n## Useful links and resources\n\n- [How to make an Instagram clone](https://www.youtube.com/watch?v=9dRSNQe7PWw)\n- [Node & Mongo Basic CRUD Operations](https://codeburst.io/writing-a-crud-app-with-node-js-and-mongodb-e0827cbbdafb)\n- [Socket.io](https://socket.io)\n- [MERN Stack](http://mern.io/)\n- [MEAN Stack](http://mean.io/)\n- [User Authentication with Node](https://medium.com/silibrain/using-passport-bcrypt-for-full-stack-app-user-authentication-fe30a013604e)\n- [Express File Uploads with Multer](https://scotch.io/tutorials/express-file-uploads-with-multer)\n\n## Example projects\n\n- [Instagram](https://www.instagram.com/)\n" }, { "path": "Projects/3-Advanced/Kudos-Slackbot.md", "content": "# Kudo's Slackbot\n\n**Tier:** 3-Advanced\n\nHave you ever recognized a team mate's contributions or assistance in a Slack\nchannel only to find that it's lost after a few days? Let _*Kudo's*_ come to\nthe rescue.\n\nKudo's is a Slackbot that allows you to create a recognition of someone else's\nefforts and to make it available through a simple Slack command.\n\n## User Stories\n\n- [ ] User can create a kudu using the Slack command: `/kudo add ` where:\n\n - `` defines the individual receiving the recognition\n - `` is your kudo for that person\n\n- [ ] User can modify a kudu using the Slack command: `/kudo replace ` where:\n\n - `` is 'replace' or 'delete'\n - `` is the kudo identifier\n - `` is your kudo for that person\n\n- [ ] User can delete a kudu using the Slack command: `/kudo delete `\n\n- [ ] User may display the most recent _n_ kudos using the Slack command: `/kudo list ` where `n` is an integer or `*` for all kudos\n\n- [ ] User may display all kudos for an individual with the Slack command: `/kudo user `\n\n## Bonus features\n\n- [ ] User may list the individual having the most kudos, in descending order, user the Slack command: `/kudo top ` where `n` is an integer or `*` for all individuals who have received a kudo\n\n## Useful links and resources\n\n- [Slack API](https://api.slack.com/)\n\n## Example project\n\n- [Kudos Slackbot Example](https://cubic-quince.glitch.me/)\n- \n" }, { "path": "Projects/3-Advanced/Movie-App.md", "content": "# Movie Database App\n\n**Tier:** 3-Advanced\n\nFind your next movie or create your watchlist with this App. It include reviews, rating, actors and anything you need to know about the movie.\n\n- This application will help users find their next movie to watch by showing helpful stats\n- Resource needed for the project is movie api, examples include Imdb, MovieDB etc.\n\n## User Stories\n\n- [ ] User can see all the latest movie on the front page\n- [ ] User scroll down to see all other movies according to release date\n- [ ] User can click on any of the movie to go to their own separate page\n- [ ] User can then see all about the movie ratings, about, actors present on each separate movie page\n\n## Bonus features\n\n- [ ] User can create an account\n- [ ] User can create their own watch list\n- [ ] User can review movies\n\n## Useful links and resources\n\n- [MovieDB Api](https://developers.themoviedb.org/3)\n\n## Example projects\n\n[Movie Database App w/ React by Oliver Gomes](http://phobic-heat.surge.sh/) \n[Movie Browser App w/ React&Redux&Bootstrap by Nataliia Pylypenko](https://api-cinema-10d15.firebaseapp.com/)\n" }, { "path": "Projects/3-Advanced/MyPodcast-Library-app.md", "content": "# My Podcast Library\n\n**Tier:** 3-Advanced\n\nIn 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\nuse it as an alternative data source when API's and backend databases aren't\navailable. The _My Podcast Library_ app merges your newfound knowledge of \nweb scraping with your frontend skills to extend the simple Podcast Directory\napp into something more complex and useful.\n\nThe goal of _My Podcast Library_ is to build a more personalized library of\nyour favorite podcasts and episodes. In this app you'll use\n[Puppeteer](https://github.com/GoogleChrome/puppeteer) and\n[Podbean](https://www.podbean.com) to create an app to maintain your\npersonal library of podcasts.\n\nThis project is described in detail by the following user stories, but feel\nfree to use your imagination.\n\n## User Stories\n\n### Favorite Podcast Display\n\n- [ ] User can see their favorite podcasts in a tabular display area\n- [ ] User can see the message 'No podcasts added yet' in watermark format\nin this area if no podcasts have been added.\n- [ ] User can see an overview of each favorite podcast that has been added\nin this area. This includes the podcast icon, it's name, and the number of \nmost recent episodes.\n- [ ] User can click on the podcast icon to display a page containing a list\nof the most recent episodes.\n\n### Favorite Podcast Entry\n- [ ] User can see a '+' button at the top of the favorite podcast area with\nthe hover text 'Add a new podcast'\n- [ ] User can click the '+' button to display a popup panel to allow a new\nfavorite podcast added. This panel contains an input area containing a text\ninput box for the podcasts page on Podbean (e.g. \n[Techpoint Charlie](https://www.podbean.com/podcast-detail/k76vd-8adc7/Techpoint-Charlie-Podcast)), a 'Save' button, and a 'Cancel' button.\n- [ ] User can click the 'Save' button to validate the URL and add the \npodcast to the favorite podcast area.\n- [ ] User can see a warning message if the url doesn't start with \n```https://www.podbean.com/podcast-detail/``` or if navigating to the page\nresults in a 404 error.\n- [ ] User can see valid URLs for favorite podcasts retained across sessions.\n- [ ] User can click the 'Cancel' button to discard any data and dismiss the\npopup.\n\n### Most Recent Episodes for a Podcast Page\n- [ ] User can see a table of podcast episodes\n- [ ] User can see rows in this table showing a clickable episode icon, the\ntitle of the episode, the date it was originally broadcast, and a heart icon\nbutton to mark it as a favorite.\n- [ ] User can scroll through the list\n- [ ] User can click on the episode icon to display that episodes page on\nthe Podbean web site.\n- [ ] User can click on an episode's heart icon to mark it as a favorite.\n- [ ] User can click on an episode's heart icon to remove it as a favorite.\n- [ ] User can see the table sorted with most recent episodes at the top, \nfollowed by those previously marked as favorites.\n- [ ] User can see favorite episodes persist across sessions.\n\n## Bonus features\n\n### Episode Ratings\n- [ ] User can see 5 star icons with each episode that denotes how the user\nrates it. \n- [ ] User may click stars from left-to-right to rate an episode. Stars are\nfilled or changed to a new color when clicked.\n- [ ] User may change a rating by clicking on the stars from right-to-left\nto deselect them.\n- [ ] User can see the list of favorite episodes on the page sorted in\ndescending rating sequence.\n\n### Searching & Hashtags\n- [ ] User can enter a freeform hashtag with an episode on the most recent\nepisodes page. This hashtag does not need to be predefined.\n- [ ] User can see a search box on the main page and a 'Search' button\n- [ ] User can enter hashtags in the search box to display a page of episodes\nfrom any podcast with the same format as the most recent episodes page.\n- [ ] User can click on a cancel button on the search results page to return\nto the main page.\n \n## Useful links and resources\n\n- [Puppeteer](https://github.com/GoogleChrome/puppeteer)\n- [Web Scraping with a Headless Browser: A Puppeteer Tutorial](https://www.toptal.com/puppeteer/headless-browser-puppeteer-tutorial)\n- [querySelectorAll](https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/querySelectorAll)\n\n## Example projects\n\nN/a\n" }, { "path": "Projects/3-Advanced/NASA-Exoplanet-Query.md", "content": "# NASA Exoplanet Query\n\n**Tier:** 3-Advanced\n\nSince 1992 over 4,000 exoplanets have been discovered outside our solar\nsystem. The United States National Aeronautics and Space Administration (NASA)\nmaintains a publicly accessible archive of the data collected on these in\ncomma separated value (CSV) format.\n\nThe objective of the NASA Exoplanet Query app is to make this data available \nfor simple queries by its users. \n\n### Requirements & Constraints\n\n- The Developer should implement a means of efficiently loading the exoplanet\nCSV data obtained from NASA to minimize any delays when the application starts.\n- Similarly, the Developer should utilize a data structure and search mechanism\nthat minimizes the time required to query the exoplanet data and display the\nresults.\n- The Developer will need to review the Exoplanet Archive documentation to\nunderstand the format of the data fields.\n\n## User Stories\n\n- [ ] User can see an query input panel containing dropdowns allowing the\nuser to query on year of discovery, discovery method, host name, and discovery\nfacility.\n- [ ] User can also see 'Clear' and 'Search' buttons in the query input panel.\n- [ ] User can select a single value from any one or all of the query\ndropdowns.\n- [ ] User can click the 'Search' button to search for exoplanets matching\nall of the selected query values.\n- [ ] User can see an error message if the 'Search' button was clicked, but\nno query values were selected.\n- [ ] User can see the matching exoplanet data displayed in tabular format \nin an results panel below the query panel. Only the queriable fields should\nbe displayed.\n- [ ] User can click the 'Clear' button to reset the query selections and\nclear any data displayed in the results panel, if a search had been performed.\n\n## Bonus features\n\n- [ ] User can see the host name as a hyperlink to NASA's Confirmed Planet\nOverview Page for that planet\n- [ ] User can click on the host name to display the Confirmed Planet Overview\nPage in a new browser tab. \n- [ ] User can see icons (such as up and down symbols) in the column headers\n- [ ] User can click on the up symbol to sort the rows in the results panel\nin ascending order on the values in that column.\n- [ ] User can click on the down symbol to sort the rows in the results panel\nin descending order on the values in the column. \n\n## Useful links and resources\n\n- [Big O Notation (Wikipedia)](https://en.wikipedia.org/wiki/Big_O_notation)\n- [CSV2JSON](../1-Beginner/CSV2JSON-App.md)\n- [Exoplanet (Wikipedia)](https://en.wikipedia.org/wiki/Exoplanet)\n- [NASA Exoplanet Archive](https://exoplanetarchive.ipac.caltech.edu/cgi-bin/TblView/nph-tblView?app=ExoTbls&config=planets)\n\n## Example projects\n\nN/a\n" }, { "path": "Projects/3-Advanced/Shell-Game.md", "content": "# Shell Game\n\n**Tier:** 3-Advanced\n\nA Shell game is a classic gambling game that dates back to ancient Greece.\nPlaying it requires three shells, a pea, hand dexterity by the operator, and \nkeen observation skills on the part of the player. It's also a classic con\ngame since its easy for the operator to swindle the player. Thank goodness\nthe latter isn't our intent with this app.\n\nThis Shell game is intended to provide a graphical interface to the classical\nshell game and to provide the player with an honest game to play. Our game\ndraws three shells on the canvas along with the pea, moves the pea under one,\nof the shells, and shuffles the shells for a specific interval of time. The\nuser must then click on the shell she thinks the pea is hidden under. The user\nis allowed to continue guessing until the pea is located.\n\n## User Stories\n\n- [ ] User can see the canvas with three shells and the pea.\n- [ ] User can click the shell the pea is to be hidden under.\n- [ ] User can see the pea move under the shell that's been clicked.\n- [ ] User can click on a 'Shuffle' button to start an animated shuffling of\nthe shells for 5 seconds.\n- [ ] User can click on the shell she believes the pea is hidden under when\nthe animation stops.\n- [ ] User can see the shell that has been clicked rise to reveal if the pea\nis hidden under it. \n- [ ] User can continue clicking shells until the pea is found.\n- [ ] User can see a congratulations message when the pea is located\n- [ ] User can start a new game by clicking a shell the pea is to be hidden\nunder (step #2 above). The steps above are then repeated.\n\n## Bonus features\n\n- [ ] User can see a score panel containing the number of wins and the\nnumber of games played.\n- [ ] User can see the number of games played increase when the pea is hidden\nunder a shell\n- [ ] User can see the number of wins incremented when the pea is found on \nthe first guess.\n- [ ] User can see the shell hiding the pea to animate (color, size, or \nsome other effect) when it is clicked (a correct guess).\n\n## Useful links and resources\n\n- [Shell Game (Wikipedia)](https://en.wikipedia.org/wiki/Shell_game)\n- [Javascript HTML DOM Animation](https://www.w3schools.com/js/js_htmldom_animate.asp)\n- [p5js Animation Library](https://p5js.org/)\n\n## Example projects\n\n[Shell Game](https://codepen.io/RedCactus/pen/dwEjXy)\n" }, { "path": "Projects/3-Advanced/Shuffle-Deck-App.md", "content": "# Shuffle Card Deck\n\n**Tier:** 3-Advanced\n\nAs a Web Developer you'll be asked to come up with innovative applications that\nsolve real world problems for real people. But something you'll quickly learn\nis that no matter how many wonderful features you pack into an app users won't\nuse it if it isn't performant. In other words, there is a direct link between\nhow an app performs and whether users perceive it as usable.\n\nThe objective of the Shuffle Card Deck app is to find the fastest technique for\nshuffling a deck of cards you can use in game apps you create. But, more\nimportant it will provide you with experience at measuring and evaluating app\nperformance.\n\nYour task is to implement the performance evaluation algorithm, the Xorshift\npseudorandom number generator, as well as the WELL512a.c algorithm if you \nchoose to attempt the bonus feature.\n\n## User Stories\n\n- [ ] User can see a panel containing a text box the user can enter the \nnumber of rounds into, three output text boxes to contain the starting time,\nending time, and total time of the test, and two buttons - 'JS Random',\n'Xorshift'.\n- [ ] User can enter a number from 1 to 10,000 to specify the number of\ntimes (or rounds) the selected random number is to be executed.\n- [ ] User can click one of the three buttons to start the evaluation of the\nselected random number algorithm. The random number algorithm will be executed\nfor the number of rounds entered by the user above.\n- [ ] User can see a warning message if number of rounds has not been entered,\nif it is not within the range 1 to 10,000, or if it is not a valid integer.\n- [ ] User can see a tabular output area where the results of each algorithm\nare displayed - algorithm name, time started, time ended, and total time.\n- [ ] User can see a warning dialog with a 'Cancel' and a 'OK' button if the\nnumber of rounds is changed before all three tests have been run. \n- [ ] User can click the 'Cancel' button in the warning dialog to dismiss\nthe dialog with no changes.\n- [ ] User can click the 'OK' button in the warning dialog to clear the\noutput area and close the warning dialog.\n \n## Bonus features\n\n- [ ] User can see a third algorithm button - 'WELL512a.c'.\n- [ ] Developer should review the output and determine why the fastest\nalgorithm is faster than the slowest algorithm. \n\n## Useful links and resources\n\n- [Random Number Generation (Wikipedia)](https://en.wikipedia.org/wiki/Random_number_generation)\n- [Math.random (MDN)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random)\n- [Xorshift (Wikipedia)](https://en.wikipedia.org/wiki/Xorshift)\n- [WELL512a.c](http://www.iro.umontreal.ca/~panneton/well/WELL512a.c)\n- [console.time (MDN)](https://developer.mozilla.org/en-US/docs/Web/API/Console/time)\n- [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)\n- [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)\n\n## Example projects\n\nAdd one or more examples of projects that have similar functionalities to this application. This will act as a guide for the developer.\n" }, { "path": "Projects/3-Advanced/Slack-Archiver.md", "content": "# Slack Archiver\n\n**Tier:** 3-Advanced\n\nSlack is a tool many teams rely on for collaboration not only between\ndevelopers, but also between developers and their users. It's especially\nattractive to Open Source Software (OSS) teams since it supports a highly\nfunctional free tier.\n\nOne problem is the free tier is limited to a maximum of 10K messages. When\nthis limit is reached older messages become unavailable since they are\npurged. This is very impactful to active Slack teams and communities since\nolder messages quite often hold a great deal of \"institutional knowledge\"\nthat's lost when the message limit is reached.\n\nThe Slack Archiver seeks to remedy this situation by extracting the history\nfor specific channels to an database or file. Messages could be extracted up to\nthe maximum allowed limit of 50 messages per minute for the `channels.history`\nAPI method. At this rate (tier 4) 86.4K messages could be theoretically\nretrieved per day.\n\nImplementers are cautioned that further research will be required to\ndetermine the best extraction method to use prior to attempting any\ndevelopment of this application.\n\n## User Stories\n\n- [ ] Allow the user to specify the channels to be archived. This includes both adding and removing channels from the list\n- [ ] Only the owners of the Slack Team should be allowed to archive messages\n- [ ] 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\n- [ ] Allow the user to copy and extracted channel to a file\n- [ ] Archiving should be an automatic process. Unlike a Slack 'bot, no manual intervention should be required to start or stop and archive operation\n\n## Bonus features\n\n- [ ] Implement an API that allows an application to extract archived messages from the archive database\n\n## Useful links and resources\n\nDetails of the Slack API can be found [here](https://api.slack.com/).\n\n## Example projects\n\nFor an example of a commercial archiving application for Slack see\n[Chronicle](https://chingu-prework.slack.com/apps/A47KWM6Q4-chronicle)\n" }, { "path": "Projects/3-Advanced/SpellIt-App.md", "content": "# Spell-It\n\n**Tier:** 3-Advanced\n\nKnowing how to spell is a fundamental part of being fluent in any language.\nWhether you are a youngster learning how to spell or an individual learning a\nnew language being able to practice helps to solidify your language skills.\n\nThe Spell-It app helps users practice their spelling by playing the audio\nrecording of a word the user must then spell using the computer keyboard.\n\n## User Stories\n\n- [ ] User can click the 'Play' button to hear the word that's to be entered\n- [ ] User can see letters displayed in the word input text box as they are\n entered on the keyboard\n- [ ] User can click the 'Enter' button to submit the word that has been\n typed in the word input text box\n- [ ] User can see a confirmation message when the correct word is typed\n- [ ] User can see a message requesting the word be typed again when it is\n spelled incorrectly\n- [ ] User can see a tally of the number of correct spellings, total number\n of words attempted, and a percentage of successful entries.\n\n## Bonus features\n\n- [ ] User can hear an confirmation sound when the word is correctly spelled\n- [ ] User can hear a warning sound when the word is incorrectly spelled\n- [ ] User can click the 'Hint' button to highlight the incorrect letters\n in the word input text box\n- [ ] User can press the 'Enter' key on the keyboard to submit a typed word\n or click the 'Enter' button in the app window\n\n## Useful links and resources\n\n- [Texas Instruments Speak and Spell]()\n- [Web Audio API](https://codepen.io/2kool2/pen/RgKeyp)\n- [Click and Speak](https://codepen.io/shangle/pen/Wvqqzq)\n\n## Example projects\n\n- [Speak N Spell on Google Play](https://play.google.com/store/apps/details?id=au.id.weston.scott.SpeakAndSpell&hl=en_US)\n- [Word Wizard for iOS](https://itunes.apple.com/app/id447312716)\n" }, { "path": "Projects/3-Advanced/Survey-App.md", "content": "# Survey App\n\n**Tier:** 3-Advanced\n\nSurveys are a valuable part of any developers toolbox. They are useful for\ngetting feedback from your users on a variety of topics including application\nsatisfaction, requirements, upcoming needs, issues, priorities, and just plain\naggravations to name a few.\n\nThe Survey app gives you the opportunity to learn by developing a full-featured\napp that will you can add to your toolbox. It provides the ability to define a\nsurvey, allow users to respond within a predefined timeframe, and tabulate\nand present results.\n\nUsers of this app are divided into two distinct roles, each having different\nrequirements:\n\n- _Survey Coordinators_ define and conduct surveys. This is an administrative\n function not available to normal users.\n- _Survey Respondents_ Complete surveys and view results. They have no\n administrative privileges within the app.\n\nCommercial survey tools include distribution functionality that mass emails\nsurveys to Survey Respondents. For simplicity, this app assumes that surveys\nopen for responses will be accessed from the app's web page.\n\n## User Stories\n\n### General\n\n- [ ] Survey Coordinators and Survey Respondents can define, conduct, and\n view surveys and survey results from a common website\n- [ ] Survey Coordinators can login to the app to access administrative\n functions, like defining a survey.\n\n### Defining a Survey\n\n- [ ] Survey Coordinator can define a survey containing 1-10 multiple choice\n questions.\n- [ ] Survey Coordinator can define 1-5 mutually exclusive selections to each\n question.\n- [ ] Survey Coordinator can enter a title for the survey.\n- [ ] Survey Coordinator can click a 'Cancel' button to return to the home\n page without saving the survey.\n- [ ] Survey Coordinator can click a 'Save' button save a survey.\n\n### Conducting a Survey\n\n- [ ] Survey Coordinator can open a survey by selecting a survey from a\n list of previously defined surveys\n- [ ] Survey Coordinators can close a survey by selecting it from a list of\n open surveys\n- [ ] Survey Respondent can complete a survey by selecting it from a list of\n open surveys\n- [ ] Survey Respondent can select responses to survey questions by clicking\n on a checkbox\n- [ ] Survey Respondents can see that a previously selected response will\n automatically be unchecked if a different response is clicked.\n- [ ] Survey Respondents can click a 'Cancel' button to return to the home\n page without submitting the survey.\n- [ ] Survey Respondents can click a 'Submit' button submit their responses\n to the survey.\n- [ ] Survey Respondents can see an error message if 'Submit' is clicked,\n but not all questions have been responded to.\n\n### Viewing Survey Results\n\n- [ ] Survey Coordinators and Survey Respondents can select the survey to\n display from a list of closed surveys\n- [ ] Survey Coordinators and Survey Respondents can view survey results as\n in tabular format showing the number of responses for each of the possible\n selections to the questions.\n\n## Bonus features\n\n- [ ] Survey Respondents can create a unique account in the app\n- [ ] Survey Respondents can login to the app\n- [ ] Survey Respondents cannot complete the same survey more than once\n- [ ] Survey Coordinators and Survey Respondents can view graphical\n representations of survey results (e.g. pie, bar, column, etc. charts)\n\n## Useful links and resources\n\nLibraries for building surveys:\n\n- [SurveyJS](https://surveyjs.io/Overview/Library/)\n\nSome commercial survey services include:\n\n- [Survey Monkey](https://www.surveymonkey.com/)\n- [Traversy](https://youtu.be/SSDED3XKz-0)\n- [Typeform](https://www.typeform.com/)\n\n## Example projects\n\n[Javascript Questionnaire](https://codepen.io/amyfu/pen/oLChg)\n\n[React Survey App](https://chamatt.github.io/survey-web-app/#/) ([Code](https://github.com/chamatt/survey-web-app))" }, { "path": "README.md", "content": "[![CodeRabbit](./coderabbit.jpg)](https://www.coderabbit.ai/?ref=app-ideas)\nThank you [CodeRabbit](https://www.coderabbit.ai/?ref=app-ideas) for sponsoring this repository! šŸ™\n\n# :ledger: App Ideas Collection\n\nHave you ever wanted to build something but you had no idea what to do? Just as\nauthors sometimes have \"writers block\" it's also true for developers. This list is intended to solve this issue once and for all! šŸ‘\n\nThese applications are:\n\n- great for improving your coding skills :muscle:;\n- great for experimenting with new technologies šŸ†•;\n- great for adding to your portfolio to impress your next employer/client :file_folder:;\n- great for using as examples in tutorials (articles or videos) :page_with_curl:;\n- easy to complete and also easily extendable with new features :ok_hand:;\n\nThis is not just a simple list of projects, but a collection that describes each project in enough detail so that you can develop it from the ground up!\n\nEach project has the following **features**:\n\n1. A clear and descriptive objective;\n2. A list of _User Stories_ which should be implemented (these stories act more as a guideline than a forced list of _To-Do's_. Feel free to add your own stories if you want);\n3. A list of bonus features that not only improve the base project, but also your skills at the same time (these are optional and should be attempted only after you have completed the required user stories)\n4. All the resources and links to help you find what you need to complete the project\n\nHere you can [watch a video about this repository](https://www.youtube.com/watch?v=TNzCfgwIDCY).\n\n## Projects\n\nProjects are divided into three tiers based on the knowledge and experience\nrequired to complete them.\n\n| Tier | Developer Profile |\n| :--: | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| 1 | Developers in the early stages of their learning journey. Those who are typically focused on creating user-facing applications. |\n| 2 | Developers at an intermediate stage of learning and experience. They are comfortable in UI/UX, using development tools, and building apps that use API services. |\n| 3 | Developers who have all of the above, and are learning more advanced techniques like implementing backend applications and database services. |\n\nšŸŒŸ - New Project\n\n### Tier-1: Beginner Projects\n\n| Name | Short Description | Tier |\n| --------------------------------------------------------------------------------- | ---------------------------------------------------------- | ---------- |\n| [Bin2Dec](./Projects/1-Beginner/Bin2Dec-App.md) | Binary-to-Decimal number converter | 1-Beginner |\n| [Border Radius Previewer](./Projects/1-Beginner/Border-Radius-Previewer.md) | Preview how CSS3 border-radius values affect an element | 1-Beginner |\n| [Calculator](./Projects/1-Beginner/Calculator-App.md) | Calculator | 1-Beginner |\n| [Christmas Lights](./Projects/1-Beginner/Christmas-Lights-App.md) | Simulate a string of Christmas lights | 1-Beginner |\n| [Cause Effect App](./Projects/1-Beginner/Cause-Effect-App.md) | Click list item to display item details | 1-Beginner |\n| [Color Cycle](./Projects/1-Beginner/Color-Cycle-App.md) | Cycle a color value through incremental changes | 1-Beginner |\n| [Countdown Timer](./Projects/1-Beginner/Countdown-Timer-App.md) | Event Countdown timer | 1-Beginner |\n| [CSV2JSON App](./Projects/1-Beginner/CSV2JSON-App.md) | CSV to JSON converter | 1-Beginner |\n| [Dollars to Cents](./Projects/1-Beginner/Dollars-To-Cents-App.md) | Convert dollars to cents | 1-Beginner |\n| [Dynamic CSS Variables](./Projects/1-Beginner/Dynamic-CSSVar-app.md) | Dynamically change CSS variable settings | 1-Beginner |\n| [First DB App](./Projects/1-Beginner/First-DB-App.md) | Your first Database app! | 1-Beginner |\n| [Flip Image](./Projects/1-Beginner/Flip-Image-App.md) | Change the orientation of images across two axes | 1-Beginner |\n| [GitHub Status](./Projects/1-Beginner/GitHub-Status-App.md) | Display Current GitHub Status | 1-Beginner |\n| [Hello](./Projects/1-Beginner/Hello-App.md) | User native language greeting | 1-Beginner |\n| [IOT Mailbox Simulator](./Projects/1-Beginner/IOT-Mailbox-App.md) | Use callbacks to check your snail mail | 1-Beginner |\n| [JS Input Validation](./Projects/1-Beginner/Javascript-Validation-With-Regex.md) | Script to validate inputs entered by a user using RegEx | 1-Beginner |\n| [JSON2CSV App](./Projects/1-Beginner/JSON2CSV-App.md) | JSON to CSV converter | 1-Beginner |\n| [Key Value](./Projects/1-Beginner/Key-Value-App.md) | Keyboard Event Values | 1-Beginner |\n| [Lorem Ipsum Generator](./Projects/1-Beginner/Lorem-Ipsum-Generator.md) | Generate lorem ipsum placeholder text | 1-Beginner |\n| [Notes App](./Projects/1-Beginner/Notes-App.md) | Create an online note pad | 1-Beginner |\n| [Pearson Regression](./Projects/1-Beginner/Pearson-Regression-App.md) | Calculate the correlation coefficient for two sets of data | 1-Beginner |\n| [Pomodoro Clock](./Projects/1-Beginner/Pomodoro-Clock.md) | Task timer to aid personal productivity | 1-Beginner |\n| [Product Landing Page](./Projects/1-Beginner/Product-Landing-Page.md) | Showcase product details for possible buyers | 1-Beginner |\n| [Quiz App](./Projects/1-Beginner/Quiz-App.md) | Test your knowledge by answering questions | 1-Beginner |\n| [Recipe App](./Projects/1-Beginner/Recipe-App.md) | Recipe | 1-Beginner |\n| [Random Meal Generator](./Projects/1-Beginner/Random-Meal-Generator.md) | Generate random meals | 1-Beginner |\n| [Random Number Generator](./Projects/1-Beginner/Random-Number-Generator.md) | Generate random number between range. | 1-Beginner |\n| [Roman to Decimal Converter](./Projects/1-Beginner/Roman-to-Decimal-Converter.md) | Convert Roman to Decimal numbers | 1-Beginner |\n| [Slider Design](./Projects/1-Beginner/Slider-Design.md) | Display images using a slider control | 1-Beginner |\n| [Stopwatch App](./Projects/1-Beginner/Stopwatch-App.md) | Count time spent on activities | 1-Beginner |\n| [TrueOrFalse](./Projects/1-Beginner/True-or-False-App.md) | Identify the result of a conditional comparison | 1-Beginner |\n| [Vigenere Cipher](./Projects/1-Beginner/Vigenere-Cipher.md) | Encrypt text using the Vigenere Cypher | 1-Beginner |\n| [Wind Chill](./Projects/1-Beginner/Windchill-App.md) | Calculate the windchill factor from an actual temperature | 1-Beginner |\n| [Word Frequency](./Projects/1-Beginner/Word-Frequency-App.md) | Calculate word frequency in a block of text | 1-Beginner |\n| [Weather App](./Projects/1-Beginner/Weather-App.md) | Get the temperature, weather condition of a city. | 1-Beginner |\n\n### Tier-2: Intermediate Projects\n\n| Name | Short Description | Tier |\n| --------------------------------------------------------------------------------- | -------------------------------------------------- | -------------- |\n| [Bit Masks](./Projects/2-Intermediate/Bit-Masks-App.md) | Using Bit Masks for Conditions | 2-Intermediate |\n| [Book Finder App](./Projects/2-Intermediate/Book-Finder-App.md) | Search for books by multiple criteria | 2-Intermediate |\n| [Calculator CLI](./Projects/2-Intermediate/Calculator-CLI.md) | Create a basic calculator cli. | 2-Intermediate |\n| [Card Memory Game](./Projects/2-Intermediate/Card-Memory-Game.md) | Memorize and match hidden images | 2-Intermediate |\n| [Charity Finder App](./Projects/2-Intermediate/Charity-Finder-App.md) | Find a Global Charity to donate to | 2-Intermediate |\n| [Chrome Theme Extension](./Projects/2-Intermediate/Chrome-Theme-Extension.md) | Build your own chrome theme extention. | 2-Intermediate |\n| [Currency Converter](./Projects/2-Intermediate/Currency-Converter.md) | Convert one currency to another. | 2-Intermediate |\n| [Drawing App](./Projects/2-Intermediate/Drawing-App.md) | Create digital artwork on the web | 2-Intermediate |\n| [Emoji Translator App](./Projects/2-Intermediate/Emoji-Translator-App.md) | Translate sentences into Emoji | 2-Intermediate |\n| [Flashcards App](./Projects/2-Intermediate/FlashCards-App.md) | Review and test your knowledge through Flash Cards | 2-Intermediate |\n| [Flip Art App](./Projects/2-Intermediate/Flip-Art-App.md) | Animate a set of images | 2-Intermediate |\n| [Game Suggestion App](./Projects/2-Intermediate/Game-Suggestion-App.md) | Create polls to decide what games to play | 2-Intermediate |\n| [GitHub Profiles](./Projects/2-Intermediate/GitHub-Profiles.md) | A GitHub user search App | 2-Intermediate |\n| [HighStriker Game](./Projects/2-Intermediate/HighStriker-Game.md) | Highstriker strongman carnival game | 2-Intermediate |\n| [Image Scanner](./Projects/2-Intermediate/Image-Scaner.md) | Image Scanner App | 2-Intermediate |\n| [Markdown Previewer](./Projects/2-Intermediate/Markdown-Previewer.md) | Preview text formatted in GitHub flavored markdown | 2-Intermediate |\n| [Markdown Table Generator](./Projects/2-Intermediate/Markdown-Table-Generator.md) | Convert a table into Markdown-formatted text | 2-Intermediate |\n| [Math Editor](./Projects/2-Intermediate/math-editor.md) | A math editor for students to use | 2-Intermediate |\n| [Meme Generator App](./Projects/2-Intermediate/Meme-Generator-App.md) | Create custom memes | 2-Intermediate |\n| [Name Generation using RNNs](./Projects/2-Intermediate/Name-Generator.md) | Generate names using names dataset | 2-Intermediate |\n| [Password Generator](./Projects/2-Intermediate/Password-Generator.md) | Generate random passwords | 2-Intermediate |\n| [Podcast Directory](./Projects/2-Intermediate/Podcast-Directory-App.md) | Directory of favorite podcasts | 2-Intermediate |\n| [QR Code Badge Generator](./Projects/2-Intermediate/QRCode-Badge-App.md) | Encode badge info in a QRcode | 2-Intermediate |\n| [Regular Expression Helper](./Projects/2-Intermediate/RegExp-Helper-App.md) | Test Regular Expressions | 2-Intermediate |\n| [Sales Reciepts App](./Projects/2-Intermediate/Sales-DB-App.md) | Record Sales Receipts in a DB | 2-Intermediate |\n| [Simple Online Store](./Projects/2-Intermediate/Simple-Online-Store.md) | Simple Online Store | 2-Intermediate |\n| [Sports Bracket Generator](./Projects/2-Intermediate/Sports-Bracket-Generator.md) | Generate a sports bracket diagram | 2-Intermediate |\n| [String Art](./Projects/2-Intermediate/String-Art.md) | An animation of moving, colored strings | 2-Intermediate |\n| [This or That Game](./Projects/2-Intermediate/This-or-That-Game.md) | This or That Game | 2-Intermediate |\n| [Timezone Slackbot](./Projects/2-Intermediate/Timezone-Slackbot.md) | Display Team Timezones | 2-Intermediate |\n| [To-Do App](./Projects/2-Intermediate/To-Do-App.md) | Manage personal to-do tasks | 2-Intermediate |\n| [Typing Practice](./Projects/2-Intermediate/Typing-Practice-App.md) | Typing Practice | 2-Intermediate |\n| [Voting App](./Projects/2-Intermediate/Voting-App.md) | Voting App | 2-Intermediate |\n\n### Tier-3: Advanced Projects\n\n| Name | Short Description | Tier |\n| ----------------------------------------------------------------------------- | ------------------------------------------------------------------- | ---------- |\n| [Battleship Bot](./Projects/3-Advanced/Battleship-Bot.md) | Create a Discord bot that plays Battleship | 3-Advanced |\n| [Battleship Game Engine](./Projects/3-Advanced/Battleship-Game-Engine.md) | Create a callable engine to play the Battleship game | 3-Advanced |\n| [Boole Bots Game](./Projects/3-Advanced/Boole-Bot-Game.md) | Battling Bots driven by Boolean algebra | 3-Advanced |\n| [Calendar](./Projects/1-Beginner/Calendar-App.md) | Create your own Calendar | 3-Advanced |\n| [Calorie Counter](./Projects/3-Advanced/Calorie-Counter-App.md) | Calorie Counter Nutrition App | 3-Advanced |\n| [Chat App](./Projects/3-Advanced/Chat-App.md) | Real-time chat interface | 3-Advanced |\n| [Contribution Tracker App](./Projects/3-Advanced/Contribution-Tracker-App.md) | Track funds donated to charity | 3-Advanced |\n| [Elevator](./Projects/3-Advanced/Elevator-App.md) | Elevator simulator | 3-Advanced |\n| [Fast Food Simulator](./Projects/3-Advanced/FastFood-App.md) | Fast Food Restaurant Simulator | 3-Advanced |\n| [Instagram Clone](./Projects/3-Advanced/Instagram-Clone-App.md) | A clone of Facebook's Instagram app | 3-Advanced |\n| [GitHub Timeline](./Projects/3-Advanced/GitHub-Timeline-App.md) | Generate a timeline of a users GitHub Repos | 3-Advanced |\n| [Kudos Slackbot](./Projects/3-Advanced/Kudos-Slackbot.md) | Give recognition to a deserving peer | 3-Advanced |\n| [Movie App](./Projects/3-Advanced/Movie-App.md) | Browse, Find Ratings, Check Actors and Find you next movie to watch | 3-Advanced |\n| [MyPodcast Library](./Projects/3-Advanced/MyPodcast-Library-app.md) | Create a library of favorite podcasts | 3-Advanced |\n| [NASA Exoplanet Query](./Projects/3-Advanced/NASA-Exoplanet-Query.md) | Query NASA's Exoplanet Archive | 3-Advanced |\n| [Shell Game](./Projects/3-Advanced/Shell-Game.md) | Animated shell game | 3-Advanced |\n| [Shuffle Deck](./Projects/3-Advanced/Shuffle-Deck-App.md) | Evaluate different algorithms for shuffling a card deck | 3-Advanced |\n| [Slack Archiver](./Projects/3-Advanced/Slack-Archiver.md) | Archive Slack Messages | 3-Advanced |\n| [Spell-It App](./Projects/3-Advanced/SpellIt-App.md) | A twist on the classic Speak N Spell game | 3-Advanced |\n| [Survey App](./Projects/3-Advanced/Survey-App.md) | Define, conduct, and view a survey | 3-Advanced |\n\n## Plans for the future\n\nWe are planning to add more and more projects to this repository. For this, we need your help! Find out how to contribute below. šŸ‘‡\n\nWe are also planning to create a website where you can easily browse through all of the projects.\n\n## Contribution\n\nAny contributions are highly appreciated. :pray: You can contribute in two ways:\n\n1. create an issue and tell us your idea :bulb:. Make sure that you use the **new idea** label in this case;\n2. fork the project and submit a PR with your new idea. Before doing that, please make sure that you read and follow the [Contribution Guide](./CONTRIBUTING.md);\n\n### Examples\n\nYou can also add your own examples to the projects after you have completed them. I highly encourage you to do this as it will show others what amazing things were built! šŸ‘\n\n## Spread the word!\n\nIf the information from this repo was useful to you in any way, make sure you give it a star šŸŒŸ, this way others can find it and benefit too! Together we can grow and make our community better! :smiley:\n\nDo you have any suggestions on how we could improve this project overall? Let us know! We'd love to hear your feedback!\n\n### Main Contributors šŸ™‚šŸ™‚\n\n- **Florin Pop**: [Twitter](https://twitter.com/florinpop1705) - [YouTube Channel](https://youtube.com/florinpop) - [website](https://florin-pop.com).\n- **Jim Medlock**: [Twitter](https://twitter.com/jd_medlock) - [articles](https://medium.com/@jdmedlock)\n\n## 100Days100Projects šŸš€\n\nAs a bonus, I created the [#100Days100Projects challenge](https://www.florin-pop.com/blog/2019/09/100-days-100-projects). You can find in there 100 more ideas of smaller projects. Enjoy! šŸ˜„\n\n## Stars history\n\n[![Stargazers over time](https://starchart.cc/florinpop17/app-ideas.svg)](https://starchart.cc/florinpop17/app-ideas)\n" } ]