diff --git a/Projects/1-Beginner/Bin2Dec-App.md b/Projects/1-Beginner/Bin2Dec-App.md index 133699a5..1e50f2fe 100644 --- a/Projects/1-Beginner/Bin2Dec-App.md +++ b/Projects/1-Beginner/Bin2Dec-App.md @@ -1,3 +1,9 @@ +--- +path: '/bin2dec' +title: 'Bin2Dec' +tier: 'beginner' +--- + # Bin2Dec **Tier:** 1-Beginner @@ -13,21 +19,21 @@ and 1's, in any sequence and then displays its decimal equivalent. This challenge requires that the developer implementing it follow these constraints: -- Arrays may not be used to contain the binary digits entered by the user -- Determining the decimal equivalent of a particular binary digit in the - sequence must be calculated using a single mathematical function, for - example the natural logarithm. It's up to you to figure out which function - to use. +- Arrays may not be used to contain the binary digits entered by the user +- Determining the decimal equivalent of a particular binary digit in the + sequence must be calculated using a single mathematical function, for + example the natural logarithm. It's up to you to figure out which function + to use. ## User Stories -- [ ] User can enter up to 8 binary digits in one input field -- [ ] User must be notified if anything other than a 0 or 1 was entered -- [ ] User views the results in a single output field containing the decimal (base 10) equivalent of the binary number that was entered +- [ ] User can enter up to 8 binary digits in one input field +- [ ] User must be notified if anything other than a 0 or 1 was entered +- [ ] User views the results in a single output field containing the decimal (base 10) equivalent of the binary number that was entered ## Bonus features -- [ ] User can enter a variable number of binary digits +- [ ] User can enter a variable number of binary digits ## Useful links and resources @@ -37,5 +43,5 @@ constraints: Try not to view this until you've developed your own solution: -- [Binary to decimal conversion program for beginners](https://www.youtube.com/watch?v=YMIALQE26KQ) -- [Binary to Decimal converter using React](https://github.com/email2vimalraj/Bin2Dec) +- [Binary to decimal conversion program for beginners](https://www.youtube.com/watch?v=YMIALQE26KQ) +- [Binary to Decimal converter using React](https://github.com/email2vimalraj/Bin2Dec) diff --git a/Projects/1-Beginner/Border-Radius-Previewer.md b/Projects/1-Beginner/Border-Radius-Previewer.md index 2e925045..69566848 100644 --- a/Projects/1-Beginner/Border-Radius-Previewer.md +++ b/Projects/1-Beginner/Border-Radius-Previewer.md @@ -1,3 +1,9 @@ +--- +path: '/border-radius-previewer' +title: 'Border-radius Previewer' +tier: 'beginner' +--- + # Border-radius Previewer **Tier:** 1-Beginner @@ -6,21 +12,21 @@ The border-radius property can have multiple values changed. Preview how the sha ## User Stories -- [ ] User can see a box which has a `border-radius` property applied to it -- [ ] User can change the 4 `border-radius` values that are applied to the box (top-left, top-right, bottom-left, bottom-right) -- [ ] User can copy the resulting CSS to the clipboard +- [ ] User can see a box which has a `border-radius` property applied to it +- [ ] User can change the 4 `border-radius` values that are applied to the box (top-left, top-right, bottom-left, bottom-right) +- [ ] User can copy the resulting CSS to the clipboard ## Bonus features -- [ ] User can change all 8 possible values of the border-radius in order to create a complex shape +- [ ] User can change all 8 possible values of the border-radius in order to create a complex shape ## Useful links and resources -- [CSS3 Borders](https://www.w3schools.com/css/css3_borders.asp) -- [Copy to Clipboard](https://www.w3schools.com/howto/howto_js_copy_clipboard.asp) +- [CSS3 Borders](https://www.w3schools.com/css/css3_borders.asp) +- [Copy to Clipboard](https://www.w3schools.com/howto/howto_js_copy_clipboard.asp) ## Example projects -- [9elements Fancy Border Radius](https://9elements.github.io/fancy-border-radius/) -- [Border Radius](https://border-radius.com/) -- [CSS Gradient Border](https://codepen.io/thebabydino/pen/zbqPVd) +- [9elements Fancy Border Radius](https://9elements.github.io/fancy-border-radius/) +- [Border Radius](https://border-radius.com/) +- [CSS Gradient Border](https://codepen.io/thebabydino/pen/zbqPVd) diff --git a/Projects/1-Beginner/CSV2JSON-App.md b/Projects/1-Beginner/CSV2JSON-App.md index 042ca9a6..81143759 100644 --- a/Projects/1-Beginner/CSV2JSON-App.md +++ b/Projects/1-Beginner/CSV2JSON-App.md @@ -1,9 +1,15 @@ +--- +path: '/csv-2-json' +title: 'CSV2JSON' +tier: 'beginner' +--- + # CSV2JSON **Tier:** 1-Beginner -In the [JSON2CSV](./JSON2CSV-App.md) application you translated JSON -to a comma separated value (CSV) format. The objective of CSV2JSON is to +In the [JSON2CSV](./JSON2CSV-App.md) application you translated JSON +to a comma separated value (CSV) format. The objective of CSV2JSON is to reverse that process by converting a block of CSV text to JSON. In CSV2JSON you'll start by copying the JSON2CSV app you created and then @@ -12,39 +18,40 @@ that's already present. In additional to providing a useful function, this challenge will also give you practice in modifying existing applications to add new functionality. -### Constraints ### +### Constraints - Read the user stories below carefully. Some of the functionality created -for JSON2CSV will need to be modified. + for JSON2CSV will need to be modified. - You may not use any libraries or packages designed to perform this type of -conversion. + conversion. - Nested JSON structures are not supported. ## User Stories -- [ ] User can paste CSV syntax into a text box -- [ ] User can click a 'Convert to JSON' button to validate the CSV text box and convert it to JSON -- [ ] User can see an warning message if the CSV text box is empty or if it doesn't contain valid CSV -- [ ] User can see the converted CSV in the JSON text box +- [ ] User can paste CSV syntax into a text box +- [ ] User can click a 'Convert to JSON' button to validate the CSV text box and convert it to JSON +- [ ] User can see an warning message if the CSV text box is empty or if it doesn't contain valid CSV +- [ ] User can see the converted CSV in the JSON text box + +### Stories already implemented in JSON2CSV -### Stories already implemented in JSON2CSV -- [ ] User can paste JSON syntax into a text box -- [ ] User can click a 'Convert to CSV' button to validate the JSON text box and convert it to CSV -- [ ] User can see an warning message if the JSON text box is empty or if it doesn't contain valid JSON -- [ ] User can click a 'Clear' button to clear the contents of both the JSON and CSV text boxes. +- [ ] User can paste JSON syntax into a text box +- [ ] User can click a 'Convert to CSV' button to validate the JSON text box and convert it to CSV +- [ ] User can see an warning message if the JSON text box is empty or if it doesn't contain valid JSON +- [ ] User can click a 'Clear' button to clear the contents of both the JSON and CSV text boxes. ## Bonus features -- [ ] User can enter the path to the CSV file on the local file system in a text box -- [ ] User can click a 'Open CSV' button to load file containing the CSV into the text box -- [ ] User can see a warning message if the CSV file is not found -- [ ] 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 -- [ ] User can see a warning message if the CSV text box is empty or if the save operation failed. -- [ ] User can enter the path to the JSON file on the local file system in a text box -- [ ] User can click a 'Open JSON' button to load file containing the JSON into the text box -- [ ] User can see a warning message if the JSON file is not found -- [ ] 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 -- [ ] User can see a warning message if the JSON text box is empty or if the save operation failed. +- [ ] User can enter the path to the CSV file on the local file system in a text box +- [ ] User can click a 'Open CSV' button to load file containing the CSV into the text box +- [ ] User can see a warning message if the CSV file is not found +- [ ] 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 +- [ ] User can see a warning message if the CSV text box is empty or if the save operation failed. +- [ ] User can enter the path to the JSON file on the local file system in a text box +- [ ] User can click a 'Open JSON' button to load file containing the JSON into the text box +- [ ] User can see a warning message if the JSON file is not found +- [ ] 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 +- [ ] User can see a warning message if the JSON text box is empty or if the save operation failed. ## Useful links and resources diff --git a/Projects/1-Beginner/Calculator-App.md b/Projects/1-Beginner/Calculator-App.md index c9a8fe1d..b85bdced 100644 --- a/Projects/1-Beginner/Calculator-App.md +++ b/Projects/1-Beginner/Calculator-App.md @@ -1,3 +1,9 @@ +--- +path: '/calculator' +title: 'Calculator' +tier: 'beginner' +--- + # Calculator **Tier:** 1-Beginner @@ -5,7 +11,7 @@ Calculators are not only one of the most useful tools available, but they are also a great way to understand UI and event processing in an application. In this problem you will create a calculator that supports basic arithmetic -calculations on integers. +calculations on integers. The styling is up to you so use your imagination and get creative! You might also find it worth your time to experiment with the calculator app on your @@ -17,34 +23,33 @@ mobile device to better understand basic functionality and edge cases. ## User Stories -- [ ] User can see a display showing the current number entered or the -result of the last operation. -- [ ] User can see an entry pad containing buttons for the digits 0-9, -operations - '+', '-', '/', and '=', a 'C' button (for clear), and an 'AC' -button (for clear all). -- [ ] User can enter numbers as sequences up to 8 digits long by clicking on -digits in the entry pad. Entry of any digits more than 8 will be ignored. -- [ ] User can click on an operation button to display the result of that -operation on: - * the result of the preceding operation and the last number entered OR - * the last two numbers entered OR - * the last number entered -- [ ] User can click the 'C' button to clear the last number or the last -operation. If the users last entry was an operation the display will be -updated to the value that preceded it. -- [ ] User can click the 'AC' button to clear all internal work areas and -to set the display to 0. -- [ ] User can see 'ERR' displayed if any operation would exceed the -8 digit maximum. +- [ ] User can see a display showing the current number entered or the + result of the last operation. +- [ ] User can see an entry pad containing buttons for the digits 0-9, + operations - '+', '-', '/', and '=', a 'C' button (for clear), and an 'AC' + button (for clear all). +- [ ] User can enter numbers as sequences up to 8 digits long by clicking on + digits in the entry pad. Entry of any digits more than 8 will be ignored. +- [ ] User can click on an operation button to display the result of that + operation on: + _ the result of the preceding operation and the last number entered OR + _ the last two numbers entered OR \* the last number entered +- [ ] User can click the 'C' button to clear the last number or the last + operation. If the users last entry was an operation the display will be + updated to the value that preceded it. +- [ ] User can click the 'AC' button to clear all internal work areas and + to set the display to 0. +- [ ] User can see 'ERR' displayed if any operation would exceed the + 8 digit maximum. ## Bonus features -- [ ] User can click a '+/-' button to change the sign of the number that is -currently displayed. -- [ ] User can see a decimal point ('.') button on the entry pad to that -allows floating point numbers up to 3 places to be entered and operations to -be carried out to the maximum number of decimal places entered for any one -number. +- [ ] User can click a '+/-' button to change the sign of the number that is + currently displayed. +- [ ] User can see a decimal point ('.') button on the entry pad to that + allows floating point numbers up to 3 places to be entered and operations to + be carried out to the maximum number of decimal places entered for any one + number. ## Useful links and resources diff --git a/Projects/1-Beginner/Calendar-App.md b/Projects/1-Beginner/Calendar-App.md index 10f54eaf..dffedd0d 100644 --- a/Projects/1-Beginner/Calendar-App.md +++ b/Projects/1-Beginner/Calendar-App.md @@ -1,3 +1,9 @@ +--- +path: '/my-calendar' +title: 'My Calendar' +tier: 'beginner' +--- + # My calendar **Tier:** 3-Advanced diff --git a/Projects/1-Beginner/Cause-Effect-App.md b/Projects/1-Beginner/Cause-Effect-App.md index d6659343..2e7d45bf 100644 --- a/Projects/1-Beginner/Cause-Effect-App.md +++ b/Projects/1-Beginner/Cause-Effect-App.md @@ -1,3 +1,9 @@ +--- +path: '/cause-effect' +title: 'CauseEffect' +tier: 'beginner' +--- + # CauseEffect **Tier:** 1-Beginner @@ -19,37 +25,37 @@ page. This challenge requires that the developer implementing it follow these constraints: -- You are responsible for creating your own test data. Use a hardcoded - Javascript object to define your test data (see below). -- Use only native HTML/CSS/Javascript in your first version of this app -- You may use other packages or libraries when implementing subsequent - versions. +- You are responsible for creating your own test data. Use a hardcoded + Javascript object to define your test data (see below). +- Use only native HTML/CSS/Javascript in your first version of this app +- You may use other packages or libraries when implementing subsequent + versions. ## User Stories -- [ ] User can see a list of person names arranged vertically in a summary - pane on the page. -- [ ] User can click on a name in the list to update an adjacent pane on the - page with that individuals full name, address, telephone number, and - birthday. -- [ ] User can click on another name in the list to refresh the detail pane - with that individuals information. +- [ ] User can see a list of person names arranged vertically in a summary + pane on the page. +- [ ] User can click on a name in the list to update an adjacent pane on the + page with that individuals full name, address, telephone number, and + birthday. +- [ ] User can click on another name in the list to refresh the detail pane + with that individuals information. ## Bonus features -- [ ] User can see the person name in the summary pane highlighted when the - cursor is hovered over it. -- [ ] User can see the person name in the summary pane highlighted - using a selection effect (color, size, etc.) when it is clicked. This is a - different effect from the hover effect -- [ ] User can see the selection effect removed from a name in the summary - list when a new name is clicked. +- [ ] User can see the person name in the summary pane highlighted when the + cursor is hovered over it. +- [ ] User can see the person name in the summary pane highlighted + using a selection effect (color, size, etc.) when it is clicked. This is a + different effect from the hover effect +- [ ] User can see the selection effect removed from a name in the summary + list when a new name is clicked. ## Useful links and resources -- [DOM Events](https://developer.mozilla.org/en-US/docs/Web/API/Event) -- Consider defining your test data in a JavaScript object having a format - such as this: +- [DOM Events](https://developer.mozilla.org/en-US/docs/Web/API/Event) +- Consider defining your test data in a JavaScript object having a format + such as this: ``` const people = [ diff --git a/Projects/1-Beginner/Christmas-Lights-App.md b/Projects/1-Beginner/Christmas-Lights-App.md index eb6a1e12..4b825a9b 100644 --- a/Projects/1-Beginner/Christmas-Lights-App.md +++ b/Projects/1-Beginner/Christmas-Lights-App.md @@ -1,3 +1,9 @@ +--- +path: '/christmas-lights' +title: 'Christmas Lights' +tier: 'beginner' +--- + # Christmas Lights **Tier:** 1-Beginner @@ -12,21 +18,21 @@ displayed during the Christmas Holidays. ## User Stories -- [ ] User can press a button to start and stop the display -- [ ] User can change the interval of time controlling the change in intensity +- [ ] User can press a button to start and stop the display +- [ ] User can change the interval of time controlling the change in intensity ## Bonus features -- [ ] User can select the color used to fill each circle -- [ ] User can specify the intensity value -- [ ] User can change the size of any circle in the row -- [ ] User can specify the number of rows to be included in the display. From - one to seven rows can be chosen +- [ ] User can select the color used to fill each circle +- [ ] User can specify the intensity value +- [ ] User can change the size of any circle in the row +- [ ] User can specify the number of rows to be included in the display. From + one to seven rows can be chosen ## Useful links and resources -- [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) -- [Adafruit LED Matrix](https://cdn-shop.adafruit.com/970x728/1487-02.jpg) +- [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) +- [Adafruit LED Matrix](https://cdn-shop.adafruit.com/970x728/1487-02.jpg) ## Example projects diff --git a/Projects/1-Beginner/Color-Cycle-App.md b/Projects/1-Beginner/Color-Cycle-App.md index ff36620c..6e5f7a98 100644 --- a/Projects/1-Beginner/Color-Cycle-App.md +++ b/Projects/1-Beginner/Color-Cycle-App.md @@ -1,3 +1,9 @@ +--- +path: '/color-cycle' +title: 'ColorCycle' +tier: 'beginner' +--- + # ColorCycle **Tier:** 1-Beginner @@ -14,23 +20,23 @@ an RGB color specification (e.g. `#000000` color code). ## User Stories -- [ ] User can specify a starting fill color as a six hexadecimal standard - CSS color code in three individual components of two digits each - red, - blue, and green -- [ ] User can specify an increment value for each color component that will - be added to that component every .25 second -- [ ] User can see the box containing the fill color change every .25 seconds -- [ ] User can only change the color components and their increments when - the app is stopped -- [ ] User can start and stop the fill operation using a button whose name - changes to 'Start' when stopped and 'Stop' when started -- [ ] User will receive an warning if something other than hexadecimal digits - are entered for the color components +- [ ] User can specify a starting fill color as a six hexadecimal standard + CSS color code in three individual components of two digits each - red, + blue, and green +- [ ] User can specify an increment value for each color component that will + be added to that component every .25 second +- [ ] User can see the box containing the fill color change every .25 seconds +- [ ] User can only change the color components and their increments when + the app is stopped +- [ ] User can start and stop the fill operation using a button whose name + changes to 'Start' when stopped and 'Stop' when started +- [ ] User will receive an warning if something other than hexadecimal digits + are entered for the color components ## Bonus features -- [ ] User can change the time interval between color changes -- [ ] User can specify the color encoding format used from RGB to another format like HSL +- [ ] User can change the time interval between color changes +- [ ] User can specify the color encoding format used from RGB to another format like HSL ## Useful links and resources diff --git a/Projects/1-Beginner/Countdown-Timer-App.md b/Projects/1-Beginner/Countdown-Timer-App.md index 7d2dc03a..95053dac 100644 --- a/Projects/1-Beginner/Countdown-Timer-App.md +++ b/Projects/1-Beginner/Countdown-Timer-App.md @@ -1,3 +1,9 @@ +--- +path: '/countdown-timer' +title: 'Countdown Timer' +tier: 'beginner' +--- + # Countdown Timer **Tier:** 1-Beginner @@ -14,43 +20,43 @@ event. ### Constraints - Use only builtin language functions for your calculations rather than relying -on a library or package like [MomentJS](https://momentjs.com/). This assumes, -of course, that the language of your choice has adequate date and time -manipulation functions built in. -- You may not use any code generators such as the -[Counting Down To](https://countingdownto.com/) site. You should develop your -own original implementation. + on a library or package like [MomentJS](https://momentjs.com/). This assumes, + of course, that the language of your choice has adequate date and time + manipulation functions built in. +- You may not use any code generators such as the + [Counting Down To](https://countingdownto.com/) site. You should develop your + own original implementation. ## User Stories -- [ ] User can see an event input box containing an event name field, an -date field, an optional time, and a 'Start' button. -- [ ] User can define the event by entering its name, the date it is -scheduled to take place, and an optional time of the event. If the time is -omitted it is assumed to be at Midnight on the event date in the local time -zone. -- [ ] User can see a warning message if the event name is blank. -- [ ] User can see a warning message if the event date or time are incorrectly -entered. -- [ ] User can see a warning message if the time until the event data and time -that has been entered would overflow the precision of the countdown timer. -- [ ] User can click on the 'Start' button to see the countdown timer start -displaying the days, hours, minutes, and seconds until the event takes place. -- [ ] User can see the elements in the countdown timer automatically -decrement. For example, when the remaining seconds count reaches 0 the remaining -minutes count will decrement by 1 and the seconds will start to countdown from 59. This progression must take place from seconds all the way up to the remaining days position in countdown display. +- [ ] User can see an event input box containing an event name field, an + date field, an optional time, and a 'Start' button. +- [ ] User can define the event by entering its name, the date it is + scheduled to take place, and an optional time of the event. If the time is + omitted it is assumed to be at Midnight on the event date in the local time + zone. +- [ ] User can see a warning message if the event name is blank. +- [ ] User can see a warning message if the event date or time are incorrectly + entered. +- [ ] User can see a warning message if the time until the event data and time + that has been entered would overflow the precision of the countdown timer. +- [ ] User can click on the 'Start' button to see the countdown timer start + displaying the days, hours, minutes, and seconds until the event takes place. +- [ ] User can see the elements in the countdown timer automatically + decrement. For example, when the remaining seconds count reaches 0 the remaining + minutes count will decrement by 1 and the seconds will start to countdown from 59. This progression must take place from seconds all the way up to the remaining days position in countdown display. ## Bonus features -- [ ] User can save the event so that it persists across sessions -- [ ] User can see an alert when the event is reached -- [ ] User can specify more than one event. -- [ ] User can see a countdown timers for each event that has been defined. +- [ ] User can save the event so that it persists across sessions +- [ ] User can see an alert when the event is reached +- [ ] User can specify more than one event. +- [ ] User can see a countdown timers for each event that has been defined. ## Useful links and resources -- Images of analog tube-based countdown timers can be found -[here](https://nixieshop.com/) +- Images of analog tube-based countdown timers can be found + [here](https://nixieshop.com/) - [`clearInterval` MDN](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval) - [`setInterval` MDN](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval) - [Date MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) diff --git a/Projects/1-Beginner/Dollars-To-Cents-App.md b/Projects/1-Beginner/Dollars-To-Cents-App.md index 94433892..e0f72579 100644 --- a/Projects/1-Beginner/Dollars-To-Cents-App.md +++ b/Projects/1-Beginner/Dollars-To-Cents-App.md @@ -1,3 +1,9 @@ +--- +path: '/dollars-to-cents' +title: 'Dollars To Cents' +tier: 'beginner' +--- + # Dollars To Cents **Tier:** 1-Beginner @@ -7,23 +13,23 @@ Your task is to let the user input a dollar value (float), assuming that it can The challenge: Try this without using any frameworks. -(EX. If you have $0.58, I would have 4 coins: 2 quarters, 0 dimes, 1 nickel and 3 pennies) +(EX. If you have \$0.58, I would have 4 coins: 2 quarters, 0 dimes, 1 nickel and 3 pennies) ## User Stories -- [ ] User can enter a dollar value -- [ ] User can see the total cents from the converted dollar value +- [ ] User can enter a dollar value +- [ ] User can see the total cents from the converted dollar value ## Bonus features -- [ ] User can see how many were pennies, nickels, quarters and dimes from the total cents +- [ ] User can see how many were pennies, nickels, quarters and dimes from the total cents ## Useful links and resources -- [Math functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math) -- [Loops and iterations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) -- [Money values in JavaScript](https://timleland.com/money-in-javascript/) +- [Math functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math) +- [Loops and iterations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) +- [Money values in JavaScript](https://timleland.com/money-in-javascript/) ## Example projects -- [Dollars to cents converter](https://github.com/LimonJuice322/Dollars-to-cents-converter) +- [Dollars to cents converter](https://github.com/LimonJuice322/Dollars-to-cents-converter) diff --git a/Projects/1-Beginner/Dynamic-CSSVar-app.md b/Projects/1-Beginner/Dynamic-CSSVar-app.md index dc697b48..778b2e9e 100644 --- a/Projects/1-Beginner/Dynamic-CSSVar-app.md +++ b/Projects/1-Beginner/Dynamic-CSSVar-app.md @@ -1,10 +1,16 @@ +--- +path: '/dynamic-css-variables' +title: 'Dynamic CSS Variables' +tier: 'beginner' +--- + # Dynamic CSS Variables **Tier:** 1-Beginner CSS variables are a powerful tool that lets the developer associate a symbolic name with a value, and then use that name in the stylesheet wherever that -value is required. The advantage is that when a change to that value is +value is required. The advantage is that when a change to that value is required it only needs to change in the CSS variable definition rather than in the many spots it may be used. @@ -12,36 +18,36 @@ What can make this even more powerful is to dynamically change the value of a CSS variable at runtime. The goal of this app is to dynamically change the background color of text boxes -based to let you gain experience using both CSS variables and dynamically +based to let you gain experience using both CSS variables and dynamically changing them from within the app. ## User Stories -- [ ] User can see three two boxes to be used to enter a User ID and Password -along with 'Cancel' and 'Login' buttons underneath them. The default background -color of the text boxes is white. -- [ ] User can enter a user id and password into the text boxes. -- [ ] User can click the 'Login' button to validate the user id and password. -- [ ] User can see a warning message if one or both of the text boxes contains -spaces and the background color of the empty text box will change to light -yellow. -- [ ] User can see a warning message if the user id doesn't match 'testuser' -and the background color of the text box will change to light red. -- [ ] User can see a warning message if the password doesn't match 'mypassword' -and the background color of the text box will change to light red. -- [ ] User can click the 'Cancel' button to clear the text boxes and reset -their background colors to white. +- [ ] User can see three two boxes to be used to enter a User ID and Password + along with 'Cancel' and 'Login' buttons underneath them. The default background + color of the text boxes is white. +- [ ] User can enter a user id and password into the text boxes. +- [ ] User can click the 'Login' button to validate the user id and password. +- [ ] User can see a warning message if one or both of the text boxes contains + spaces and the background color of the empty text box will change to light + yellow. +- [ ] User can see a warning message if the user id doesn't match 'testuser' + and the background color of the text box will change to light red. +- [ ] User can see a warning message if the password doesn't match 'mypassword' + and the background color of the text box will change to light red. +- [ ] User can click the 'Cancel' button to clear the text boxes and reset + their background colors to white. ## Bonus features -- [ ] User can see the color of the text box border change when an error is -detected -- [ ] User can see the size and font of the contents of the text box change -when an error is detected. +- [ ] User can see the color of the text box border change when an error is + detected +- [ ] User can see the size and font of the contents of the text box change + when an error is detected. ## Useful links and resources -- [Custom properties (--*): CSS variables (MDN)](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) +- [Custom properties (--\*): CSS variables (MDN)](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) - [CSSStyleDeclaration (MDN)](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration) ## Example projects diff --git a/Projects/1-Beginner/First-DB-App.md b/Projects/1-Beginner/First-DB-App.md index 2dff920a..cb936c67 100644 --- a/Projects/1-Beginner/First-DB-App.md +++ b/Projects/1-Beginner/First-DB-App.md @@ -1,3 +1,9 @@ +--- +path: '/your-first-db-app' +title: 'Your First DB App' +tier: 'beginner' +--- + # Your First DB App **Tier:** 1-Beginner @@ -15,20 +21,21 @@ cross-session persistance. ### Requirements & Constraints - The primary use case for a browser based database is to maintain state or -status information that needs to persist across sessions, or as a work area -for temporary data. For example, data retrieved from a server that must be -reformatted or cleansed before it's presented to the user. + status information that needs to persist across sessions, or as a work area + for temporary data. For example, data retrieved from a server that must be + reformatted or cleansed before it's presented to the user. - It is important to keep in mind that since the client-side browser -environment cannot be secured you should not maintain any confidential or -personal identifying information (PII) in a browser based database. + environment cannot be secured you should not maintain any confidential or + personal identifying information (PII) in a browser based database. - The following Javascript class is provided with the functionality to allow -your app to initially populate and clear the database from the browser so you -can test the query logic you'll be adding. You'll be required to hook up -buttons on the web page you build to the `clearDB` and `loadDB` functions, and -to write your own `queryDB` handler to connect to the `Query DB` button. You'll -also need to add a `queryAllRows` function to the Customer class. + your app to initially populate and clear the database from the browser so you + can test the query logic you'll be adding. You'll be required to hook up + buttons on the web page you build to the `clearDB` and `loadDB` functions, and + to write your own `queryDB` handler to connect to the `Query DB` button. You'll + also need to add a `queryAllRows` function to the Customer class. + ``` class Customer { constructor(dbName) { @@ -135,59 +142,57 @@ const loadDB = () => { } ``` - ## User Stories -- [ ] User can see a web page containing a control panel containing three -buttons - 'Load DB', 'Query DB', and 'Clear DB'. -- [ ] User can see a notification panel where status messages will be posted. -- [ ] User can see a scrollable log panel where execution details describing -the apps operation and interface with the Customer instance will be posted. -- [ ] User can see a running history of notification panel messages in the log -panel. -- [ ] User can see a scrollable query results area where retrieved customer -data will be displayed. -- [ ] User can click the 'Load DB' button to populate the database with data. -The 'Load DB' button in your UI should be hooked to the `loadDB` event handler -that's provided. -- [ ] User can see a message displayed in the notification panel when the -data load operation starts and ends. -- [ ] User can click the 'Query DB' button to list all customers in the query -results area. The 'Query DB' button in your UI should be hooked to a `queryDB` -event handler you will add to the program. -- [ ] User can see a message in the notification panel when the query starts -and ends. -- [ ] User can see a message in the query results area if there are no rows -to display. -- [ ] User can click on the 'Clear DB' button to remove all rows from the -database. The 'Clear DB' button in your UI should be hooked to the `clearDB` -event handler that's provided. -- [ ] User can see a message in the notification panel when the clear -operation starts and ends. +- [ ] User can see a web page containing a control panel containing three + buttons - 'Load DB', 'Query DB', and 'Clear DB'. +- [ ] User can see a notification panel where status messages will be posted. +- [ ] User can see a scrollable log panel where execution details describing + the apps operation and interface with the Customer instance will be posted. +- [ ] User can see a running history of notification panel messages in the log + panel. +- [ ] User can see a scrollable query results area where retrieved customer + data will be displayed. +- [ ] User can click the 'Load DB' button to populate the database with data. + The 'Load DB' button in your UI should be hooked to the `loadDB` event handler + that's provided. +- [ ] User can see a message displayed in the notification panel when the + data load operation starts and ends. +- [ ] User can click the 'Query DB' button to list all customers in the query + results area. The 'Query DB' button in your UI should be hooked to a `queryDB` + event handler you will add to the program. +- [ ] User can see a message in the notification panel when the query starts + and ends. +- [ ] User can see a message in the query results area if there are no rows + to display. +- [ ] User can click on the 'Clear DB' button to remove all rows from the + database. The 'Clear DB' button in your UI should be hooked to the `clearDB` + event handler that's provided. +- [ ] User can see a message in the notification panel when the clear + operation starts and ends. ## Bonus features -- [ ] User can see buttons enabled and disabled according to the following -table. - - | State | Load DB | Query DB | Clear DB | - |---------------------|----------|----------|----------| - | Initial App display | enabled | enabled | disabled | - | Load DB clicked | disabled | enabled | enabled | - | Query DB clicked | disabled | enabled | enabled | - | Clear DB clicked | enabled | enabled | disabled | - -- [ ] User can see additional Customer data fields added to those included -in the code provided. Developer should add date of last order and total sales -for the year. -- [ ] Developer should conduct a retrospection on this project: - - What use cases can you see for using IndexedDB in your frontend apps? - - What advantages and disadvantages can you see over using a file or +- [ ] User can see buttons enabled and disabled according to the following + table. + + | State | Load DB | Query DB | Clear DB | + |---------------------|----------|----------|----------| + | Initial App display | enabled | enabled | disabled | + | Load DB clicked | disabled | enabled | enabled | + | Query DB clicked | disabled | enabled | enabled | + | Clear DB clicked | enabled | enabled | disabled | + +- [ ] User can see additional Customer data fields added to those included + in the code provided. Developer should add date of last order and total sales + for the year. +- [ ] Developer should conduct a retrospection on this project: + - What use cases can you see for using IndexedDB in your frontend apps? + - What advantages and disadvantages can you see over using a file or local storage? - - In general, what criteria might you use to determine if IndexedDB is right + - In general, what criteria might you use to determine if IndexedDB is right for your app. (Hint: 100% yes or no is not a valid answer). - ## Useful links and resources - [IndexedDB Concepts (MDN)](http://tinyw.in/7TIr) diff --git a/Projects/1-Beginner/Flip-Image-App.md b/Projects/1-Beginner/Flip-Image-App.md index 827df6e8..d063053c 100644 --- a/Projects/1-Beginner/Flip-Image-App.md +++ b/Projects/1-Beginner/Flip-Image-App.md @@ -1,3 +1,9 @@ +--- +path: '/flip-image' +title: 'FlipImage' +tier: 'beginner' +--- + # FlipImage **Tier:** 1-Beginner @@ -16,19 +22,19 @@ Image packages and libraries are not allowed. ## User Stories -- [ ] User can see a pane containing a single image repeated in a 2x2 matrix -- [ ] 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 +- [ ] User can see a pane containing a single image repeated in a 2x2 matrix +- [ ] 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 ## Bonus features -- [ ] User can change the default image by entering the URL of a different image in an input field -- [ ] User can display the new image by clicking a 'Display' button next to the input field -- [ ] User can see an error message if the new images URL is not found +- [ ] User can change the default image by entering the URL of a different image in an input field +- [ ] User can display the new image by clicking a 'Display' button next to the input field +- [ ] User can see an error message if the new images URL is not found ## Useful links and resources -- [How to Flip an Image](https://www.w3schools.com/howto/howto_css_flip_image.asp) -- [Create a CSS Flipping Animatin](https://davidwalsh.name/css-flip) +- [How to Flip an Image](https://www.w3schools.com/howto/howto_css_flip_image.asp) +- [Create a CSS Flipping Animatin](https://davidwalsh.name/css-flip) ## Example projects diff --git a/Projects/1-Beginner/GitHub-Status-App.md b/Projects/1-Beginner/GitHub-Status-App.md index 3af77092..c9578932 100644 --- a/Projects/1-Beginner/GitHub-Status-App.md +++ b/Projects/1-Beginner/GitHub-Status-App.md @@ -1,3 +1,9 @@ +--- +path: '/github-status' +title: 'Github Status' +tier: 'beginner' +--- + # GitHub Status **Tier:** 1-Beginner @@ -17,18 +23,18 @@ to develop it using your language of choice! ## User Stories -- [ ] User can see the current status for GitHub Git operations, API Requests, -Operational Issues, PRs, Dashboard, & Projects, Operational Notifications, -Operational Gists, and Operational GitHub Pages as a list in the main app -window. -- [ ] User can retrieve the most recent status from the GitHub Status web -site by clicking a 'Get Status' button. +- [ ] User can see the current status for GitHub Git operations, API Requests, + Operational Issues, PRs, Dashboard, & Projects, Operational Notifications, + Operational Gists, and Operational GitHub Pages as a list in the main app + window. +- [ ] User can retrieve the most recent status from the GitHub Status web + site by clicking a 'Get Status' button. ## Bonus features -- [ ] User can see any of the GitHub components that are not in 'Operational' -status highlighted by a different color, background animation, or any other -technique to make it stand out. Use your imagination! +- [ ] User can see any of the GitHub components that are not in 'Operational' + status highlighted by a different color, background animation, or any other + technique to make it stand out. Use your imagination! ## Useful links and resources @@ -37,18 +43,19 @@ technique to make it stand out. Use your imagination! - [Javascript JSON (MDN)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON) - [Javascript Object Notation](https://json.org/) - Hint! You can use the following code to display the JSON for the GitHub Status -web site page from the command line command `node ghstatus`. You can use this -output to determine which JSON element contain the status information you'll -need to develop this app. + web site page from the command line command `node ghstatus`. You can use this + output to determine which JSON element contain the status information you'll + need to develop this app. + ``` ghstatus.js const request = require('request'); -request('https://www.githubstatus.com/', { json: true }, (err, res, body) => { +request('https://www.githubstatus.com/', { json: true }, (err, res, body) => { console.log(body); }); ``` ## Example projects -[Peter Luczynski's example](https://peterluczynski.github.io/github-status/) \ No newline at end of file +[Peter Luczynski's example](https://peterluczynski.github.io/github-status/) diff --git a/Projects/1-Beginner/Hello-App.md b/Projects/1-Beginner/Hello-App.md index 3f6b3013..7ea073df 100644 --- a/Projects/1-Beginner/Hello-App.md +++ b/Projects/1-Beginner/Hello-App.md @@ -1,3 +1,9 @@ +--- +path: '/hello-app' +title: 'Hello App' +tier: 'beginner' +--- + # Hello **Tier:** 1-Beginner @@ -21,45 +27,45 @@ language. ### Constraints -- Developers should use the [IP-API](http://ip-api.com/docs/api:json) service - to obtain the users country code. -- Developers should use the - [Fourtonfish](https://www.fourtonfish.com/hellosalut/hello/) service to - obtain the greeting in the users native language by passing the country code. +- Developers should use the [IP-API](http://ip-api.com/docs/api:json) service + to obtain the users country code. +- Developers should use the + [Fourtonfish](https://www.fourtonfish.com/hellosalut/hello/) service to + obtain the greeting in the users native language by passing the country code. ## User Stories -- [ ] User can see a mock login panel containing a user name text input field, - a password text input field, and 'Login' and 'Logout' buttons. -- [ ] User can enter a mock login name into the User Name field. -- [ ] User can enter a mock password into the Password field. Input should - be masked so the user see's asterisks (`*`) for each character that is entered - rather than the plaintext password. -- [ ] User can click the 'Login' button to perform a mock login. -- [ ] User can see a message if either or both of the input fields are empty - and the border color of the field(s) in error should be changed to red. -- [ ] User can see a login acknowledgement message in the format: - ` you have successfully logged in!` -- [ ] User can click the 'Logout' button to clear the text input fields and - any previous messages. -- [ ] User can see a new message when successfully logged out in the format: - `Have a great day !` +- [ ] User can see a mock login panel containing a user name text input field, + a password text input field, and 'Login' and 'Logout' buttons. +- [ ] User can enter a mock login name into the User Name field. +- [ ] User can enter a mock password into the Password field. Input should + be masked so the user see's asterisks (`*`) for each character that is entered + rather than the plaintext password. +- [ ] User can click the 'Login' button to perform a mock login. +- [ ] User can see a message if either or both of the input fields are empty + and the border color of the field(s) in error should be changed to red. +- [ ] User can see a login acknowledgement message in the format: + ` you have successfully logged in!` +- [ ] User can click the 'Logout' button to clear the text input fields and + any previous messages. +- [ ] User can see a new message when successfully logged out in the format: + `Have a great day !` ## Bonus features -- [ ] User can see an additional text input field for a country code which - will be used to override the country code obtained through geolocation. Hint: - this is a great feature for testing your app. -- [ ] User can see additional geolocation information after logging on that - includes at least the local IP address, city, region, country name, zip code, - longitude, latitude, and timezone. +- [ ] User can see an additional text input field for a country code which + will be used to override the country code obtained through geolocation. Hint: + this is a great feature for testing your app. +- [ ] User can see additional geolocation information after logging on that + includes at least the local IP address, city, region, country name, zip code, + longitude, latitude, and timezone. ## Useful links and resources -- [Form Follows Function (Wikipedia)](https://en.wikipedia.org/wiki/Form_follows_function) -- [Personalization (Wikipedia)](https://en.wikipedia.org/wiki/Personalization) -- [Fourtonfish](https://www.fourtonfish.com/hellosalut/hello/) -- [IP-API](http://ip-api.com/docs/api:json) +- [Form Follows Function (Wikipedia)](https://en.wikipedia.org/wiki/Form_follows_function) +- [Personalization (Wikipedia)](https://en.wikipedia.org/wiki/Personalization) +- [Fourtonfish](https://www.fourtonfish.com/hellosalut/hello/) +- [IP-API](http://ip-api.com/docs/api:json) ## Example projects diff --git a/Projects/1-Beginner/IOT-Mailbox-App.md b/Projects/1-Beginner/IOT-Mailbox-App.md index df66319c..dcec411e 100644 --- a/Projects/1-Beginner/IOT-Mailbox-App.md +++ b/Projects/1-Beginner/IOT-Mailbox-App.md @@ -1,9 +1,15 @@ +--- +path: '/iot-mailbox-simulator' +title: 'IOT Mailbox Simulator' +tier: 'beginner' +--- + # IOT Mailbox Simulator **Tier:** 1-Beginner The objective of the IOT Mailbox Simulator is to mimic how an Internet of Things -(IOT) enabled physical mailbox might be used to notify you when "snail" mail +(IOT) enabled physical mailbox might be used to notify you when "snail" mail has arrived. In doing so it will provide you with experience using callbacks to communicate state between different components of an app that are dependent on one another. @@ -11,13 +17,14 @@ on one another. ### Requirements & Constraints - Even though this app is specified using Javascript concepts and terminology -you are free to implement it in the language of your choice. + you are free to implement it in the language of your choice. - The following Javascript class is provided to start and stop the monitoring -process, and to signal the app web page with the state of the mailbox door -(open or closed) at preset intervals. Keep in mind that the interval you specify -shouldn't exceed the time it normally takes to open or close the door or you -might miss a delivery! + process, and to signal the app web page with the state of the mailbox door + (open or closed) at preset intervals. Keep in mind that the interval you specify + shouldn't exceed the time it normally takes to open or close the door or you + might miss a delivery! + ``` /** * Monitor the light levels inside an IOT enabled snail mailbox to detect @@ -61,15 +68,15 @@ class IOTMailbox { /** * Pass the current light level inside the mailbox to the users callback - * function. The positive light levels indicate the door is open while - * negative levels indicate it is closed. Depending on the sampling interval - * the mailbox door could be in any postion from fully closed to fully open. + * function. The positive light levels indicate the door is open while + * negative levels indicate it is closed. Depending on the sampling interval + * the mailbox door could be in any postion from fully closed to fully open. * This means the light level varies from interval-to-interval. * @memberof IOTMailbox */ signalStateChange = () => { - const lightLevel = this.lastLightLevel >= 0 - ? Math.random().toFixed(2) * -1 + const lightLevel = this.lastLightLevel >= 0 + ? Math.random().toFixed(2) * -1 : Math.random().toFixed(2); console.log(`Mailbox state changed - lightLevel: ${lightLevel}`); this.signalCallback(this.lightLevel); @@ -80,34 +87,34 @@ class IOTMailbox { ## User Stories -- [ ] User can see a web page containing a control panel containing three -buttons - 'Start Monitoring', 'Stop Monitoring', and 'Reset'. -- [ ] User can see a notification panel where the mailbox status will be posted. -- [ ] User can see a scrollable log panel where execution details describing -the apps operation and interface with the IOTMailbox instance will be posted. -- [ ] User can click the 'Start Monitoring' button to begin receiving state -notifications from the mailbox. -- [ ] User can see a message added to the log panel when monitoring starts. -- [ ] User can see a message added to the log panel for light level passed -through the callback function. This should include the numerical light level -and whether the door is open or closed. -- [ ] User can see a message added to the notification panel when the door has -been opened. -- [ ] User can click the 'Stop Monitoring' button to stop receiving state -notifications from the mailbox. -- [ ] User can see a message added to the log panel when monitoring stops. +- [ ] User can see a web page containing a control panel containing three + buttons - 'Start Monitoring', 'Stop Monitoring', and 'Reset'. +- [ ] User can see a notification panel where the mailbox status will be posted. +- [ ] User can see a scrollable log panel where execution details describing + the apps operation and interface with the IOTMailbox instance will be posted. +- [ ] User can click the 'Start Monitoring' button to begin receiving state + notifications from the mailbox. +- [ ] User can see a message added to the log panel when monitoring starts. +- [ ] User can see a message added to the log panel for light level passed + through the callback function. This should include the numerical light level + and whether the door is open or closed. +- [ ] User can see a message added to the notification panel when the door has + been opened. +- [ ] User can click the 'Stop Monitoring' button to stop receiving state + notifications from the mailbox. +- [ ] User can see a message added to the log panel when monitoring stops. ## Bonus features -- [ ] User can see the 'Start Monitoring' button disabled until monitoring is -stopped. -- [ ] User can see the 'Stop Monitoring' button disabled until monitoring is -started. -- [ ] User can see an field in the control panel allowing the length of the -monitoring interval to be specified. -- [ ] User can see a message added to the notification panel if the door is -left open. -- [ ] User can hear an audible alert when the door is opened. +- [ ] User can see the 'Start Monitoring' button disabled until monitoring is + stopped. +- [ ] User can see the 'Stop Monitoring' button disabled until monitoring is + started. +- [ ] User can see an field in the control panel allowing the length of the + monitoring interval to be specified. +- [ ] User can see a message added to the notification panel if the door is + left open. +- [ ] User can hear an audible alert when the door is opened. ## Useful links and resources diff --git a/Projects/1-Beginner/JSON2CSV-App.md b/Projects/1-Beginner/JSON2CSV-App.md index 4c6102a7..72cf3d59 100644 --- a/Projects/1-Beginner/JSON2CSV-App.md +++ b/Projects/1-Beginner/JSON2CSV-App.md @@ -1,8 +1,14 @@ +--- +path: '/json-2-csv-app' +title: 'JSON2CSV App' +tier: 'beginner' +--- + # JSON2CSV **Tier:** 1-Beginner -Developers and end users are both experts in their own domains and as such, +Developers and end users are both experts in their own domains and as such, each speaks using a domain-specific language and terminology. This also extends to the tools used to manipulate data. Developers have found JSON to be a universally accepted method for transferring data between applications. End @@ -12,32 +18,32 @@ The objective of JSON2CSV is to help bridge the gap between JSON and CSV by converting JSON to CSV to make it easier to review data in a spreadsheet. It allows the user to paste JSON into a text box to generate its equivalent CSV. -### Constraints ### +### Constraints - You may not use any libraries or packages designed to perform this type of -conversion. + conversion. - If you choose to implement this in JavaScript don't use complicated looping -in your first implementation. Instead, use `Object.keys()` and `Object.values` -to generate CSV for the header and data rows. + in your first implementation. Instead, use `Object.keys()` and `Object.values` + to generate CSV for the header and data rows. - Nested JSON structures are not supported. ## User Stories -- [ ] User can paste JSON syntax into a text box -- [ ] User can click a 'Convert' button to validate the JSON text box and convert it to CSV -- [ ] User can see the converted CSV in another text box -- [ ] User can see an warning message if the JSON text box is empty or if it doesn't contain valid JSON -- [ ] User can click a 'Clear' button to clear the contents of both the JSON and CSV text boxes. +- [ ] User can paste JSON syntax into a text box +- [ ] User can click a 'Convert' button to validate the JSON text box and convert it to CSV +- [ ] User can see the converted CSV in another text box +- [ ] User can see an warning message if the JSON text box is empty or if it doesn't contain valid JSON +- [ ] User can click a 'Clear' button to clear the contents of both the JSON and CSV text boxes. ## Bonus features -- [ ] User can enter the path to the JSON file on the local file system in a text box -- [ ] User can click a 'Open' button to load file containing the JSON into the text box -- [ ] User can see a warning message if the JSON file is not found -- [ ] User can enter the path the CSV file is to be saved to in a text box -- [ ] User can click a 'Save' button to save the CSV file to the local file system -- [ ] User can see a warning message if the CSV text box is empty or if the save operation failed. -- [ ] User can convert CSV data to JSON. See [CSV2JSON](./CSV2JSON-App.md) +- [ ] User can enter the path to the JSON file on the local file system in a text box +- [ ] User can click a 'Open' button to load file containing the JSON into the text box +- [ ] User can see a warning message if the JSON file is not found +- [ ] User can enter the path the CSV file is to be saved to in a text box +- [ ] User can click a 'Save' button to save the CSV file to the local file system +- [ ] User can see a warning message if the CSV text box is empty or if the save operation failed. +- [ ] User can convert CSV data to JSON. See [CSV2JSON](./CSV2JSON-App.md) ## Useful links and resources diff --git a/Projects/1-Beginner/Javascript-Validation-With-Regex.md b/Projects/1-Beginner/Javascript-Validation-With-Regex.md index 195739ab..cd9ffc3b 100644 --- a/Projects/1-Beginner/Javascript-Validation-With-Regex.md +++ b/Projects/1-Beginner/Javascript-Validation-With-Regex.md @@ -1,20 +1,27 @@ +--- +path: '/javascript-validation-with-regex' +title: 'Javascript Validation With Regex' +tier: 'beginner' +--- + # Javascript Validation With Regex **Tier:** 1-Beginner In this challenge, you'd create a javascript validation script to validate the inputs entered by a user using RegEx. -You could always refer to the [Regular Expression Library](http://regexlib.com/(X(1)A(GijS7qxVy-6Gyc4cweUyFoK4ZvRn2WnlOe8SSKuq9sT7ps-2nbiTmZZMTCn_rFk4-mNoGnYL-DPU8pJhmNNOtkP-syqWE4WO_1aVt4bPa5nTsQPQe6VRAALnm6QW3YIWbYkVS78JFbZN39vmMI1UYiWlHXKwNMB99WjsZOn0qc_8dcN0unp2KMOBw0P__3OH0))/CheatSheet.aspx?AspxAutoDetectCookieSupport=1) for support +You could always refer to the [Regular Expression Library]() for support For this project, there'd be three required inputs for validation: + - 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. - The second which could be used as username would require the user to enter letters without spaces - The third which could be used as email address would require the user to enter only email addresses on gmail (...@gmail.com). ## User Stories -- [ ] User should be notified of any invalid inputs by error messages displayed on the form. -- [ ] The submit button on the form would never be executed until all entries are validated. +- [ ] User should be notified of any invalid inputs by error messages displayed on the form. +- [ ] The submit button on the form would never be executed until all entries are validated. ## Useful links and resources @@ -23,4 +30,4 @@ For this project, there'd be three required inputs for validation: ## Example project -- [Native HTML5 validation with CSS & Regex](https://codepen.io/helgesverre/pen/vWRevp) \ No newline at end of file +- [Native HTML5 validation with CSS & Regex](https://codepen.io/helgesverre/pen/vWRevp) diff --git a/Projects/1-Beginner/Key-Value-App.md b/Projects/1-Beginner/Key-Value-App.md index 8ea745f6..73e49562 100644 --- a/Projects/1-Beginner/Key-Value-App.md +++ b/Projects/1-Beginner/Key-Value-App.md @@ -1,10 +1,16 @@ +--- +path: '/key-value-app' +title: 'Key Value App' +tier: 'beginner' +--- + # Key Value **Tier:** 1-Beginner Have you ever thought about what it means that the computer you are using is a digital device? Among other things it means that everything its capable of -is achieved by translating a digital signal into a sequence of binary digits - 0's and 1's. These binary digits form codes used to represent data. +is achieved by translating a digital signal into a sequence of binary digits - 0's and 1's. These binary digits form codes used to represent data. The keyboard you used to retrieve this project description is a great example of this. Pressing a key generates a digital signal that is translated by the @@ -15,20 +21,20 @@ time a key is pressed on the keyboard. ## User Stories -- [ ] User can see a display panel containing a text area where the key value -and key code will be displayed along with display areas for four other -indicators related to the keys on the keyboard - alt key, control key, -meta key, and shift key. -- [ ] User can see the key code and key value displayed in the display panel -corresponding to the key when it is pressed. -- [ ] User can see the appropriate indicator change from 'False' to 'True' -when the alt, control, meta, or shift key is pressed. +- [ ] User can see a display panel containing a text area where the key value + and key code will be displayed along with display areas for four other + indicators related to the keys on the keyboard - alt key, control key, + meta key, and shift key. +- [ ] User can see the key code and key value displayed in the display panel + corresponding to the key when it is pressed. +- [ ] User can see the appropriate indicator change from 'False' to 'True' + when the alt, control, meta, or shift key is pressed. ## Bonus features -- [ ] User can hear a unique tone played when a key is pressed. -- [ ] User can see the background color of the key code and value change when -a key is pressed. +- [ ] User can hear a unique tone played when a key is pressed. +- [ ] User can see the background color of the key code and value change when + a key is pressed. ## Useful links and resources diff --git a/Projects/1-Beginner/Lorem-Ipsum-Generator.md b/Projects/1-Beginner/Lorem-Ipsum-Generator.md index f2c5e1ec..57e5d591 100644 --- a/Projects/1-Beginner/Lorem-Ipsum-Generator.md +++ b/Projects/1-Beginner/Lorem-Ipsum-Generator.md @@ -1,3 +1,9 @@ +--- +path: '/lorem-ipsum-generator' +title: 'Lorem Ipsum Generator' +tier: 'beginner' +--- + # Lorem Ipsum Generator **Tier:** 1-Beginner @@ -7,8 +13,8 @@ This app should generate passages of lorem ipsum text suitable for use as placeh ## User Stories -- [ ] User can type into an input field the number of paragraphs of lorem ipsum to be generated -- [ ] Use can see the generated paragraphs of lorem ipsum and is able to copy them +- [ ] User can type into an input field the number of paragraphs of lorem ipsum to be generated +- [ ] Use can see the generated paragraphs of lorem ipsum and is able to copy them ## Trello Board @@ -16,9 +22,9 @@ You can track your progress by cloning this [Trello Board](https://trello.com/b/ ## Useful links and resources -- [lorem-ipsum npm package](https://www.npmjs.com/package/lorem-ipsum) -- [lorem-ipsum CDN](https://www.jsdelivr.com/package/npm/lorem-ipsum) +- [lorem-ipsum npm package](https://www.npmjs.com/package/lorem-ipsum) +- [lorem-ipsum CDN](https://www.jsdelivr.com/package/npm/lorem-ipsum) ## Example projects -- [Lipsum.com](https://www.lipsum.com/) +- [Lipsum.com](https://www.lipsum.com/) diff --git a/Projects/1-Beginner/Notes-App.md b/Projects/1-Beginner/Notes-App.md index f4c5df66..19f5a874 100644 --- a/Projects/1-Beginner/Notes-App.md +++ b/Projects/1-Beginner/Notes-App.md @@ -1,3 +1,9 @@ +--- +path: '/notes-app' +title: 'Notes App' +tier: 'beginner' +--- + # Notes App **Tier:** 1-Beginner @@ -6,24 +12,24 @@ Create and store your notes for later purpose! ## User Stories -- [ ] User can create a note -- [ ] User can edit a note -- [ ] User can delete a note -- [ ] When closing the browser window the notes will be stored and when the User returns, the data will be retrieved +- [ ] User can create a note +- [ ] User can edit a note +- [ ] User can delete a note +- [ ] When closing the browser window the notes will be stored and when the User returns, the data will be retrieved ## Bonus features -- [ ] User can create and edit a note in Markdown format. On save it will convert Markdown to HTML -- [ ] User can see the date when he created the note +- [ ] User can create and edit a note in Markdown format. On save it will convert Markdown to HTML +- [ ] User can see the date when he created the note ## Useful links and resources -- [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) -- [Markdown Guide](https://www.markdownguide.org/basic-syntax/) -- [Marked - A markdown parser](https://github.com/markedjs/marked) +- [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) +- [Markdown Guide](https://www.markdownguide.org/basic-syntax/) +- [Marked - A markdown parser](https://github.com/markedjs/marked) ## Example projects -- [Markdown Notes built with Angular on Codepen](https://codepen.io/nickmoreton/full/gbyygq) -- [Markdown Notes built with React](https://github.com/email2vimalraj/notes-app) -- [Markdown Notes built with Angular 7 and bootstrap 4](https://github.com/omdnaik/angular-ui) +- [Markdown Notes built with Angular on Codepen](https://codepen.io/nickmoreton/full/gbyygq) +- [Markdown Notes built with React](https://github.com/email2vimalraj/notes-app) +- [Markdown Notes built with Angular 7 and bootstrap 4](https://github.com/omdnaik/angular-ui) diff --git a/Projects/1-Beginner/Pearson-Regression-App.md b/Projects/1-Beginner/Pearson-Regression-App.md index 1fa250e4..38bd9d70 100644 --- a/Projects/1-Beginner/Pearson-Regression-App.md +++ b/Projects/1-Beginner/Pearson-Regression-App.md @@ -1,12 +1,18 @@ +--- +path: '/pearson-regression' +title: 'Pearson Regression' +tier: 'beginner' +--- + # Pearson Regression **Tier:** 1-Beginner -There are few, if any, applications that don't require some form of +There are few, if any, applications that don't require some form of cross-disciplinary knowledge in order to implement useful functionality for a user. In the case of an app for the medical profession it might be domain expertise in biology or pharmacology. A paint manufacturer or a crop science -business might rely on apps with an intimate knowledge of chemistry. And, a +business might rely on apps with an intimate knowledge of chemistry. And, a payroll application will certainly incorporate HR and accounting concepts. Regardless of the industry segment an app is developed for one cross domain @@ -26,31 +32,31 @@ set of car prices this would let the user test whether or not they are related ## User Stories -- [ ] User can see an input panel with two input fields allowing entry of `x` -and `y` coordinates, and 'Add' and 'Calculate' buttons. -- [ ] User can enter numbers into these boxes where `x` and `y` are observations -from the two data sets. -- [ ] User can click the 'Add' button to add the `x` and `y` to a tabular -output area listing the pairs of observations. -- [ ] User can see and error message if either of the two input fields are -empty or do not contain valid real numbers. -- [ ] User can see the 'Calculate' button is disabled until errors have been -corrected. -- [ ] User can click the 'Calculate' button to perform the regression analysis -and to display its results. -- [ ] User can see results of the calculation which include: - - Arithmetic means for both the `x` and `y` observations - - Standard deviations for both the `x` and `y` observations - - Pearson correlation coefficient with one of the following interpretations: - - No correlation - - Neutral - - Some correlation +- [ ] User can see an input panel with two input fields allowing entry of `x` + and `y` coordinates, and 'Add' and 'Calculate' buttons. +- [ ] User can enter numbers into these boxes where `x` and `y` are observations + from the two data sets. +- [ ] User can click the 'Add' button to add the `x` and `y` to a tabular + output area listing the pairs of observations. +- [ ] User can see and error message if either of the two input fields are + empty or do not contain valid real numbers. +- [ ] User can see the 'Calculate' button is disabled until errors have been + corrected. +- [ ] User can click the 'Calculate' button to perform the regression analysis + and to display its results. +- [ ] User can see results of the calculation which include: + - Arithmetic means for both the `x` and `y` observations + - Standard deviations for both the `x` and `y` observations + - Pearson correlation coefficient with one of the following interpretations: + - No correlation + - Neutral + - Some correlation ## Bonus features -- [ ] User can see a scatter plot of the observations -- [ ] User can upload observations from a file on the local machine. -- [ ] User can see a regression line overlaying the scatter plot +- [ ] User can see a scatter plot of the observations +- [ ] User can upload observations from a file on the local machine. +- [ ] User can see a regression line overlaying the scatter plot ## Useful links and resources diff --git a/Projects/1-Beginner/Pomodoro-Clock.md b/Projects/1-Beginner/Pomodoro-Clock.md index 844b4b20..acc5875d 100644 --- a/Projects/1-Beginner/Pomodoro-Clock.md +++ b/Projects/1-Beginner/Pomodoro-Clock.md @@ -1,3 +1,9 @@ +--- +path: '/pomodoro-clock' +title: 'Pomodoro Clock' +tier: 'beginner' +--- + # Pomodoro Clock **Tier:** 1-Beginner @@ -6,23 +12,23 @@ The Pomodoro Technique is a time management method developed by Francesco Cirill ## User Stories -- [ ] User can see a timer for 25 minutes - the **working** session -- [ ] After the **working** session is over, the User can see a timer for 5 minutes - the **break** session -- [ ] User can _start_ / _pause_, _stop_ and _reset_ the timers +- [ ] User can see a timer for 25 minutes - the **working** session +- [ ] After the **working** session is over, the User can see a timer for 5 minutes - the **break** session +- [ ] User can _start_ / _pause_, _stop_ and _reset_ the timers ## Bonus features -- [ ] User can hear a sound playing when the timer hits `00:00` - denoting that the session has ended -- [ ] User can change / customize the minutes in both sessions before starting -- [ ] User can set a **long break** session of 10 minutes. This will be activated every 4th **break** session +- [ ] User can hear a sound playing when the timer hits `00:00` - denoting that the session has ended +- [ ] User can change / customize the minutes in both sessions before starting +- [ ] User can set a **long break** session of 10 minutes. This will be activated every 4th **break** session ## Useful links and resources -- More about the [Pomodoro Technique](https://en.m.wikipedia.org/wiki/Pomodoro_Technique) +- More about the [Pomodoro Technique](https://en.m.wikipedia.org/wiki/Pomodoro_Technique) ## Example projects -- [Joe Weaver's example](https://codepen.io/JoeWeaver/pen/bLbbxK) -- [FreeCodeCamp Pomodoro Clock example](https://codepen.io/freeCodeCamp/full/XpKrrW) -- [A desktop pomodoro app for menubar/tray.](https://github.com/amitmerchant1990/pomolectron) -- [Sheri Richardson's example](https://srd-pomodoro-timer.netlify.com/) +- [Joe Weaver's example](https://codepen.io/JoeWeaver/pen/bLbbxK) +- [FreeCodeCamp Pomodoro Clock example](https://codepen.io/freeCodeCamp/full/XpKrrW) +- [A desktop pomodoro app for menubar/tray.](https://github.com/amitmerchant1990/pomolectron) +- [Sheri Richardson's example](https://srd-pomodoro-timer.netlify.com/) diff --git a/Projects/1-Beginner/Product-Landing-Page.md b/Projects/1-Beginner/Product-Landing-Page.md index 340b345a..66087894 100644 --- a/Projects/1-Beginner/Product-Landing-Page.md +++ b/Projects/1-Beginner/Product-Landing-Page.md @@ -1,3 +1,9 @@ +--- +path: '/product-landing-page' +title: 'Product Landing Page' +tier: 'beginner' +--- + # Product Landing Page **Tier:** 1-Beginner @@ -14,19 +20,19 @@ skills by expanding it to incorporate the features specified in the These will cover the visual part of the project. -- [ ] User can see on the page one or more images with the product -- [ ] User can see a list with all the features of the product -- [ ] User can see how this product will improve the buyers life. Why should he buy it? -- [ ] User can see a contact section (a text with the email) +- [ ] User can see on the page one or more images with the product +- [ ] User can see a list with all the features of the product +- [ ] User can see how this product will improve the buyers life. Why should he buy it? +- [ ] User can see a contact section (a text with the email) ## Bonus features These will cover the functional part of the project. -- [ ] User can see a FAQ section -- [ ] User can contact the staff members via a contact form -- [ ] User can sign up to receive notifications about the product -- [ ] User can purchase the product +- [ ] User can see a FAQ section +- [ ] User can contact the staff members via a contact form +- [ ] User can sign up to receive notifications about the product +- [ ] User can purchase the product ## Useful links and resources @@ -34,5 +40,5 @@ There are plenty of Product Landing Pages out there. You can use [Dribbble](www. ## Example projects -- [Netlify](https://www.netlify.com/) -- [Product Landing Page - Codepen](https://codepen.io/l4ci/pen/LoGjk) +- [Netlify](https://www.netlify.com/) +- [Product Landing Page - Codepen](https://codepen.io/l4ci/pen/LoGjk) diff --git a/Projects/1-Beginner/Quiz-App.md b/Projects/1-Beginner/Quiz-App.md index 55d6bcf1..4a69ff8e 100644 --- a/Projects/1-Beginner/Quiz-App.md +++ b/Projects/1-Beginner/Quiz-App.md @@ -1,3 +1,9 @@ +--- +path: '/quiz-app' +title: 'Quiz App' +tier: 'beginner' +--- + # Quiz App **Tier:** 1-Beginner @@ -8,26 +14,26 @@ As a developer you can create a quiz application for testing coding skills of ot ## User Stories -- [ ] User can start the quiz by pressing a `button` -- [ ] User can see a question with 4 possible answers -- [ ] After selecting an answer, display the next question to the User. Do this until the quiz is finished -- [ ] At the end, the User can see the following statistics - - Time it took to finish the quiz - - How many correct answers did he get - - A message showing if he `passed` or `failed` the quiz +- [ ] User can start the quiz by pressing a `button` +- [ ] User can see a question with 4 possible answers +- [ ] After selecting an answer, display the next question to the User. Do this until the quiz is finished +- [ ] At the end, the User can see the following statistics + - Time it took to finish the quiz + - How many correct answers did he get + - A message showing if he `passed` or `failed` the quiz ## Bonus features -- [ ] User can share the result of a quiz on social media -- [ ] Add multiple quizzes to the application. User can select which one to take -- [ ] User can create an account and have all the scores saved in his dashboard. User can complete a quiz multiple times +- [ ] User can share the result of a quiz on social media +- [ ] Add multiple quizzes to the application. User can select which one to take +- [ ] User can create an account and have all the scores saved in his dashboard. User can complete a quiz multiple times ## Useful links and resources -- [Open Trivia Database](https://opentdb.com/api_config.php) +- [Open Trivia Database](https://opentdb.com/api_config.php) ## Example projects -- [Quiz app built with React](http://tranquil-beyond-43849.herokuapp.com/) (wait for it to load as it is hosted on Heroku) -- [Quiz app interface](https://codepen.io/FlorinPop17/full/qqYNgW) -- [Quiz Progressive Web App built with React](https://github.com/SafdarJamal/quiz-app) +- [Quiz app built with React](http://tranquil-beyond-43849.herokuapp.com/) (wait for it to load as it is hosted on Heroku) +- [Quiz app interface](https://codepen.io/FlorinPop17/full/qqYNgW) +- [Quiz Progressive Web App built with React](https://github.com/SafdarJamal/quiz-app) diff --git a/Projects/1-Beginner/Random-Meal-Generator.md b/Projects/1-Beginner/Random-Meal-Generator.md index 3cb3080c..61b29b44 100644 --- a/Projects/1-Beginner/Random-Meal-Generator.md +++ b/Projects/1-Beginner/Random-Meal-Generator.md @@ -1,3 +1,9 @@ +--- +path: '/random-meal-generator' +title: 'Random Meal Generator' +tier: 'beginner' +--- + # Random Meal Generator **Tier:** 1-Beginner diff --git a/Projects/1-Beginner/Recipe-App.md b/Projects/1-Beginner/Recipe-App.md index 8a167942..af29b5fe 100644 --- a/Projects/1-Beginner/Recipe-App.md +++ b/Projects/1-Beginner/Recipe-App.md @@ -1,3 +1,9 @@ +--- +path: '/recipe-app' +title: 'Recipe App' +tier: 'beginner' +--- + # Recipe **Tier:** 1-Beginner @@ -7,43 +13,43 @@ algorithms. Like programs, recipes are a series of imperative steps which, if followed correctly, result in a tasty dish. The objective of the Recipe app is to help the user manage recipes in a way -that will make them easy to follow. +that will make them easy to follow. ### Constraints - For the initial version of this app the recipe data may be encoded as a -JSON file. After implementing the initial version of this app you may -expand on this to maintain recipes in a file or database. + JSON file. After implementing the initial version of this app you may + expand on this to maintain recipes in a file or database. ## User Stories -- [ ] User can see a list of recipe titles -- [ ] User can click a recipe title to display a recipe card containing the -recipe title, meal type (breakfast, lunch, supper, or snack), number of people -it serves, its difficulty level (beginner, intermediate, advanced), the list -of ingredients (including their amounts), and the preparation steps. -- [ ] User click a new recipe title to replace the current card with a new -recipe. +- [ ] User can see a list of recipe titles +- [ ] User can click a recipe title to display a recipe card containing the + recipe title, meal type (breakfast, lunch, supper, or snack), number of people + it serves, its difficulty level (beginner, intermediate, advanced), the list + of ingredients (including their amounts), and the preparation steps. +- [ ] User click a new recipe title to replace the current card with a new + recipe. ## Bonus features -- [ ] User can see a photo showing what the item looks like after it has -been prepared. -- [ ] User can search for a recipe not in the list of recipe titles by -entering the meal name into a search box and clicking a 'Search' button. Any -open source recipe API may be used as the source for recipes (see The MealDB -below). -- [ ] User can see a list of recipes matching the search terms -- [ ] User can click the name of the recipe to display its recipe card. -- [ ] User can see a warning message if no matching recipe was found. -- [ ] User can click a 'Save' button on the cards for recipes located through -the API to save a copy to this apps recipe file or database. +- [ ] User can see a photo showing what the item looks like after it has + been prepared. +- [ ] User can search for a recipe not in the list of recipe titles by + entering the meal name into a search box and clicking a 'Search' button. Any + open source recipe API may be used as the source for recipes (see The MealDB + below). +- [ ] User can see a list of recipes matching the search terms +- [ ] User can click the name of the recipe to display its recipe card. +- [ ] User can see a warning message if no matching recipe was found. +- [ ] User can click a 'Save' button on the cards for recipes located through + the API to save a copy to this apps recipe file or database. ## Useful links and resources - [Using Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) - [Axios](https://www.npmjs.com/package/axios) -- [The MealDB API](https://www.themealdb.com/api.php) +- [The MealDB API](https://www.themealdb.com/api.php) ## Example projects diff --git a/Projects/1-Beginner/Roman-to-Decimal-Converter.md b/Projects/1-Beginner/Roman-to-Decimal-Converter.md index dffe665c..d7122a0a 100644 --- a/Projects/1-Beginner/Roman-to-Decimal-Converter.md +++ b/Projects/1-Beginner/Roman-to-Decimal-Converter.md @@ -1,3 +1,9 @@ +--- +path: '/roman-to-decimal-numbers-converter' +title: 'Roman to Decimal numbers Converter' +tier: 'beginner' +--- + # Roman to Decimal numbers Converter **Tier:** 1-Beginner @@ -8,31 +14,31 @@ Roman numerals, as used today, employ seven symbols, each with a fixed integer v See the below table the _Symbol - Value_ pairs: -- I - 1 -- V - 5 -- X - 10 -- L - 50 -- C - 100 -- D - 500 -- M - 1000 +- I - 1 +- V - 5 +- X - 10 +- L - 50 +- C - 100 +- D - 500 +- M - 1000 ## User Stories -- [ ] User should be able to enter one Roman number in an input field -- [ ] 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 -- [ ] If a wrong symbol is entered, the User should see an error +- [ ] User should be able to enter one Roman number in an input field +- [ ] 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 +- [ ] If a wrong symbol is entered, the User should see an error ## Bonus features -- [ ] User could see the conversion to be made automatically as I type -- [ ] User should be able to convert from decimal to Roman (vice-versa) +- [ ] User could see the conversion to be made automatically as I type +- [ ] User should be able to convert from decimal to Roman (vice-versa) ## Useful links and resources -- [An explanation of Roman Numbers](https://en.wikipedia.org/wiki/Roman_numerals) +- [An explanation of Roman Numbers](https://en.wikipedia.org/wiki/Roman_numerals) ## Example projects Try not to view this until you've developed your own solution: -- [Roman Number Converter](https://www.calculatorsoup.com/calculators/conversions/roman-numeral-converter.php) +- [Roman Number Converter](https://www.calculatorsoup.com/calculators/conversions/roman-numeral-converter.php) diff --git a/Projects/1-Beginner/Slider-Design.md b/Projects/1-Beginner/Slider-Design.md index 3ee5f4a6..2cc181d1 100644 --- a/Projects/1-Beginner/Slider-Design.md +++ b/Projects/1-Beginner/Slider-Design.md @@ -1,3 +1,9 @@ +--- +path: '/slider-design' +title: 'Slider Design' +tier: 'beginner' +--- + # Slider Design **Tier:** 1-Beginner @@ -6,20 +12,20 @@ Display multiple images using a slider / carousel. ## User Stories -- [ ] User can see a slider displaying multiple images every `x` seconds -- [ ] User can click on `previous` and `next` buttons and the slider will display the corresponding image +- [ ] User can see a slider displaying multiple images every `x` seconds +- [ ] User can click on `previous` and `next` buttons and the slider will display the corresponding image ## Bonus features -- [ ] Add animation to the slides -- [ ] Add text over the slides -- [ ] Create a 3D effect +- [ ] Add animation to the slides +- [ ] Add text over the slides +- [ ] Create a 3D effect ## Useful links and resources -- [Unsplash](https://unsplash.com/) for free images +- [Unsplash](https://unsplash.com/) for free images ## Example projects -- [Full Page Slider](https://codepen.io/FlorinPop17/full/zbzbga) -- [WOWSlider](http://wowslider.com/3d-slider-jquery-fresh-cube-demo.html) +- [Full Page Slider](https://codepen.io/FlorinPop17/full/zbzbga) +- [WOWSlider](http://wowslider.com/3d-slider-jquery-fresh-cube-demo.html) diff --git a/Projects/1-Beginner/Stopwatch-App.md b/Projects/1-Beginner/Stopwatch-App.md index b8927d80..3c19a0b6 100644 --- a/Projects/1-Beginner/Stopwatch-App.md +++ b/Projects/1-Beginner/Stopwatch-App.md @@ -1,3 +1,9 @@ +--- +path: '/stopwatch-app' +title: 'Stopwatch App' +tier: 'beginner' +--- + # Stopwatch App **Tier:** 1-Beginner @@ -6,22 +12,22 @@ A stopwatch helps you track the time you spent on activities. ## User Stories -- [ ] User can `start` a clock -- [ ] User can `stop` the clock -- [ ] When the clock is `stopped` the user can click `start` again and the clock will continue counting up -- [ ] User can `restart` the clock +- [ ] User can `start` a clock +- [ ] User can `stop` the clock +- [ ] When the clock is `stopped` the user can click `start` again and the clock will continue counting up +- [ ] User can `restart` the clock ## Bonus features -- [ ] User can create `laps` - these will be displayed on the screen -- [ ] User can clear all the laps +- [ ] User can create `laps` - these will be displayed on the screen +- [ ] User can clear all the laps ## Useful links and resources -- [setInterval](https://www.w3schools.com/jsref/met_win_setinterval.asp) +- [setInterval](https://www.w3schools.com/jsref/met_win_setinterval.asp) ## Example projects -- [Stopwatch by Hilo](https://codepen.io/hilotacker/pen/ONZWoX) -- [Stopwatch by Billy Brown](https://codepen.io/_Billy_Brown/pen/dbJeh) -- [Svelte Stopwatch by Gabriele Corti](https://codepen.io/borntofrappe/pen/KKKPZZg) +- [Stopwatch by Hilo](https://codepen.io/hilotacker/pen/ONZWoX) +- [Stopwatch by Billy Brown](https://codepen.io/_Billy_Brown/pen/dbJeh) +- [Svelte Stopwatch by Gabriele Corti](https://codepen.io/borntofrappe/pen/KKKPZZg) diff --git a/Projects/1-Beginner/True-or-False-App.md b/Projects/1-Beginner/True-or-False-App.md index 93d8d714..f5b3ae14 100644 --- a/Projects/1-Beginner/True-or-False-App.md +++ b/Projects/1-Beginner/True-or-False-App.md @@ -1,3 +1,9 @@ +--- +path: '/true-or-false-app' +title: 'TrueOrFalse App' +tier: 'beginner' +--- + # TrueOrFalse **Tier:** 1-Beginner @@ -16,20 +22,20 @@ the `eval()` function to generate the result of the conditional. ## User Stories -- [ ] User can enter two strings to be compared -- [ ] User can enter a valid Javascript conditional operator to be used to compare the two strings -- [ ] User can see the result of the conditional as TRUE or FALSE -- [ ] User can see a warning if the input strings or conditional operator that has been entered is not valid +- [ ] User can enter two strings to be compared +- [ ] User can enter a valid Javascript conditional operator to be used to compare the two strings +- [ ] User can see the result of the conditional as TRUE or FALSE +- [ ] User can see a warning if the input strings or conditional operator that has been entered is not valid ## Bonus features -- [ ] User can specify the type of each of the two strings so numbers can be compared to strings, strings to booleans, etc +- [ ] User can specify the type of each of the two strings so numbers can be compared to strings, strings to booleans, etc ## Useful links and resources -- [Comparison Operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators) -- [Conditional Javascript for Experts](https://hackernoon.com/conditional-javascript-for-experts-d2aa456ef67c) -- [Truthy and Falsy: When all is not equal in Javascript](https://www.sitepoint.com/javascript-truthy-falsy/) +- [Comparison Operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators) +- [Conditional Javascript for Experts](https://hackernoon.com/conditional-javascript-for-experts-d2aa456ef67c) +- [Truthy and Falsy: When all is not equal in Javascript](https://www.sitepoint.com/javascript-truthy-falsy/) ## Example projects diff --git a/Projects/1-Beginner/Vigenere-Cipher.md b/Projects/1-Beginner/Vigenere-Cipher.md index 4ee76ec0..d9dc393b 100644 --- a/Projects/1-Beginner/Vigenere-Cipher.md +++ b/Projects/1-Beginner/Vigenere-Cipher.md @@ -1,17 +1,23 @@ +--- +path: '/vigenere-cipher' +title: 'Vigenere Cipher' +tier: 'beginner' +--- + # Vigenere Cipher **Tier:** 1-Beginner The rate and impact of security breaches in recent years makes it imperative -that developers understand the methods bad actors use to compromise apps. -Understanding how an app can be compromised is the first step in coming up +that developers understand the methods bad actors use to compromise apps. +Understanding how an app can be compromised is the first step in coming up with effective protection measures. One of the easiest ways bad actors can compromise an app is to access data that's left unencrypted by the developer. There are a number of strong encryption algorithms available to ensure that data is not readable even if access is compromised. These include AES, Blowfish, and TripleDES to name a -few. +few. However, these algorithms can be quite complex to implement so the objective of this app is to implement a classical encryption algorithm, the Vigenere @@ -20,43 +26,40 @@ Cipher to learn the basics of how ciphers work. ### Requirements & Constraints - Developers should use only native language features to implement the Vigenere -Cipher. Libraries are not allowed. + Cipher. Libraries are not allowed. - Developers should design and implement their own solution using only the -description of the steps in the Vigenere Cipher algorithm. + description of the steps in the Vigenere Cipher algorithm. - After successfully implementing this algorithm Developer should ask -themselves these questions: - - Would you feel confident encrypting your financial information using the - Vigenere Cipher? Why? - - How would you detect that a message had been encrypted using the - Vigenere Cipher? - - How would you go about trying to crack this encryption? + themselves these questions: - Would you feel confident encrypting your financial information using the + Vigenere Cipher? Why? - How would you detect that a message had been encrypted using the + Vigenere Cipher? - How would you go about trying to crack this encryption? ## User Stories -- [ ] User can see the app window with these components: - - Plain text message input field - - Encryption key input field - - Action buttons - 'Encrypt' and 'Decrypt' - - Resulting encrypted or decrypted message -- [ ] User can enter the text to be encrypted in the plain text message input -field -- [ ] User can enter the Encryption key the Vigenere algorithm will use to -encrypt the plain text message. -- [ ] User can click see see the 'Decrypt' button disabled until the plain -text has been encrypted. -- [ ] User can click the 'Encrypt' button to encrypt the plain text message -- [ ] User can see the encrypted message displayed in the result field. -- [ ] User can see the 'Decrypt' button enabled after the encrypted message -has been displayed. -- [ ] User can click the 'Decrypt' button to decrypt the encrypted message -and to display its contents in the result field. +- [ ] User can see the app window with these components: + - Plain text message input field + - Encryption key input field + - Action buttons - 'Encrypt' and 'Decrypt' + - Resulting encrypted or decrypted message +- [ ] User can enter the text to be encrypted in the plain text message input + field +- [ ] User can enter the Encryption key the Vigenere algorithm will use to + encrypt the plain text message. +- [ ] User can click see see the 'Decrypt' button disabled until the plain + text has been encrypted. +- [ ] User can click the 'Encrypt' button to encrypt the plain text message +- [ ] User can see the encrypted message displayed in the result field. +- [ ] User can see the 'Decrypt' button enabled after the encrypted message + has been displayed. +- [ ] User can click the 'Decrypt' button to decrypt the encrypted message + and to display its contents in the result field. ## Bonus features -- [ ] User can see a 'Compare' button after decryption that compares the -original plain text message with the decrypted message -- [ ] User can see an error message if the 'Compare' detects differences -in the contents of these two fields. +- [ ] User can see a 'Compare' button after decryption that compares the + original plain text message with the decrypted message +- [ ] User can see an error message if the 'Compare' detects differences + in the contents of these two fields. ## Useful links and resources diff --git a/Projects/1-Beginner/Windchill-App.md b/Projects/1-Beginner/Windchill-App.md index 8493ecf9..bfbe9984 100644 --- a/Projects/1-Beginner/Windchill-App.md +++ b/Projects/1-Beginner/Windchill-App.md @@ -1,3 +1,9 @@ +--- +path: '/windchill-app' +title: 'Windchill App' +tier: 'beginner' +--- + # Windchill **Tier:** 1-Beginner @@ -8,21 +14,21 @@ temperature. ## User Stories -- [ ] User can select the measurement system calculations will be performed in - Metric or English -- [ ] User can enter the actual temperature and the wind speed -- [ ] User can press the `Calculate` button to display the wind chill -- [ ] User will receive an error message when `Calculate` is clicked if data values are not entered +- [ ] User can select the measurement system calculations will be performed in - Metric or English +- [ ] User can enter the actual temperature and the wind speed +- [ ] User can press the `Calculate` button to display the wind chill +- [ ] User will receive an error message when `Calculate` is clicked if data values are not entered ## Bonus features -- [ ] 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 -- [ ] User will be prompted to enter new data values if `Calculate` is pressed without first changing at least one of the input fields -- [ ] 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 +- [ ] 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 +- [ ] User will be prompted to enter new data values if `Calculate` is pressed without first changing at least one of the input fields +- [ ] 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 ## Useful links and resources -- [Wikipedia Wind Chill](https://en.wikipedia.org/wiki/Wind_chill) -- [JavaScript Assert](https://developer.mozilla.org/en-US/docs/Web/API/console/assert) +- [Wikipedia Wind Chill](https://en.wikipedia.org/wiki/Wind_chill) +- [JavaScript Assert](https://developer.mozilla.org/en-US/docs/Web/API/console/assert) ## Example projects diff --git a/Projects/1-Beginner/Word-Frequency-App.md b/Projects/1-Beginner/Word-Frequency-App.md index 238295e9..ff4dab2b 100644 --- a/Projects/1-Beginner/Word-Frequency-App.md +++ b/Projects/1-Beginner/Word-Frequency-App.md @@ -1,3 +1,9 @@ +--- +path: '/word-frequency-app' +title: 'Word Frequency App' +tier: 'beginner' +--- + # Word Frequency **Tier:** 1-Beginner @@ -10,32 +16,32 @@ along with its frequency, in descending order by frequency. ## User Stories -- [ ] User can see a text input box, a 'Translate' button, and a word - frequency table. -- [ ] User can enter text (or cut and paste) into the input box. This input - box must allow the entry of large blocks of text (maximum of 2048 characters). -- [ ] User can click the 'Translate' button to analyze the word frequency in - the text that has been input. -- [ ] User can see an error message if the text input box is empty. -- [ ] User can see the word frequency table populated when the 'Translate' - button is clicked. Each row in the table contains a word and the number of times - it occurs in the input text. -- [ ] User can see the word frequency table ordered in descending sequence - by word frequency. +- [ ] User can see a text input box, a 'Translate' button, and a word + frequency table. +- [ ] User can enter text (or cut and paste) into the input box. This input + box must allow the entry of large blocks of text (maximum of 2048 characters). +- [ ] User can click the 'Translate' button to analyze the word frequency in + the text that has been input. +- [ ] User can see an error message if the text input box is empty. +- [ ] User can see the word frequency table populated when the 'Translate' + button is clicked. Each row in the table contains a word and the number of times + it occurs in the input text. +- [ ] User can see the word frequency table ordered in descending sequence + by word frequency. ## Bonus features -- [ ] User can see a graphical representation of the word frequency in a - bubble chart, column chart, or any other form of graphical representation the - developer chooses. -- [ ] User may choose to enter the URL of a web page whose content is to be - analyzed instead of manually entering text. (Hint: See the - [Podcast Directory](../2-Intermediate/Podcast-Directory-App.md) application for ideas). +- [ ] User can see a graphical representation of the word frequency in a + bubble chart, column chart, or any other form of graphical representation the + developer chooses. +- [ ] User may choose to enter the URL of a web page whose content is to be + analyzed instead of manually entering text. (Hint: See the + [Podcast Directory](../2-Intermediate/Podcast-Directory-App.md) application for ideas). ## Useful links and resources -- [Bag of Words Model (Wikipedia)](https://en.wikipedia.org/wiki/Bag-of-words_model) -- [Semantic Analysis (Wikipedia)](https://en.wikipedia.org/wiki/Sentiment_analysis) +- [Bag of Words Model (Wikipedia)](https://en.wikipedia.org/wiki/Bag-of-words_model) +- [Semantic Analysis (Wikipedia)](https://en.wikipedia.org/wiki/Sentiment_analysis) ## Example projects diff --git a/Projects/2-Intermediate/Bit-Masks-App.md b/Projects/2-Intermediate/Bit-Masks-App.md index b7f7a5c3..1dc77e5a 100644 --- a/Projects/2-Intermediate/Bit-Masks-App.md +++ b/Projects/2-Intermediate/Bit-Masks-App.md @@ -1,3 +1,9 @@ +--- +path: '/bit-masks-app' +title: 'Bit Masks' +tier: 'intermediate' +--- + # Bit Masks **Tier:** 2-Intermediate diff --git a/Projects/2-Intermediate/Book-Finder-App.md b/Projects/2-Intermediate/Book-Finder-App.md index 64b1022d..5c8c8559 100644 --- a/Projects/2-Intermediate/Book-Finder-App.md +++ b/Projects/2-Intermediate/Book-Finder-App.md @@ -1,3 +1,9 @@ +--- +path: '/book-finder-app' +title: 'Book Finder App' +tier: 'intermediate' +--- + # Book Finder App **Tier:** 2-Intermediate diff --git a/Projects/2-Intermediate/Card-Memory-Game.md b/Projects/2-Intermediate/Card-Memory-Game.md index 7f4ae196..9ccbfc72 100644 --- a/Projects/2-Intermediate/Card-Memory-Game.md +++ b/Projects/2-Intermediate/Card-Memory-Game.md @@ -1,3 +1,9 @@ +--- +path: '/card-memory-game' +title: 'Card-Memory-Game' +tier: 'intermediate' +--- + # Card-Memory-Game **Tier:** 2-Intermediate diff --git a/Projects/2-Intermediate/Charity-Finder-App.md b/Projects/2-Intermediate/Charity-Finder-App.md index 11f4a391..8a196271 100644 --- a/Projects/2-Intermediate/Charity-Finder-App.md +++ b/Projects/2-Intermediate/Charity-Finder-App.md @@ -1,3 +1,9 @@ +--- +path: '/charity-finder' +title: 'Charity Finder' +tier: 'intermediate' +--- + # Charity Finder **Tier:** 2-Intermediate diff --git a/Projects/2-Intermediate/Chrome-Theme-Extension.md b/Projects/2-Intermediate/Chrome-Theme-Extension.md index e4330c91..3728f6d1 100644 --- a/Projects/2-Intermediate/Chrome-Theme-Extension.md +++ b/Projects/2-Intermediate/Chrome-Theme-Extension.md @@ -1,3 +1,9 @@ +--- +path: '/chrome-theme-extension' +title: 'Chrome Theme Extension' +tier: 'intermediate' +--- + # Chrome Theme Extension **Tier:** 2-Intermediate diff --git a/Projects/2-Intermediate/Drawing-App.md b/Projects/2-Intermediate/Drawing-App.md index 8f31f7d6..53b19c92 100644 --- a/Projects/2-Intermediate/Drawing-App.md +++ b/Projects/2-Intermediate/Drawing-App.md @@ -1,3 +1,9 @@ +--- +path: '/drawing-app' +title: 'Drawing App' +tier: 'intermediate' +--- + # Drawing App **Tier:** 2-Intermediate diff --git a/Projects/2-Intermediate/Emoji-Translator-App.md b/Projects/2-Intermediate/Emoji-Translator-App.md index be0a0b20..554ee2fe 100644 --- a/Projects/2-Intermediate/Emoji-Translator-App.md +++ b/Projects/2-Intermediate/Emoji-Translator-App.md @@ -1,3 +1,9 @@ +--- +path: '/emoji-translator-app' +title: 'Emoji Translator App' +tier: 'intermediate' +--- + # Emoji Translator **Tier:** 2-Intermediate diff --git a/Projects/2-Intermediate/FlashCards-App.md b/Projects/2-Intermediate/FlashCards-App.md index 981fae38..796bfbf9 100644 --- a/Projects/2-Intermediate/FlashCards-App.md +++ b/Projects/2-Intermediate/FlashCards-App.md @@ -1,3 +1,9 @@ +--- +path: '/flash-cards-app' +title: 'FlashCards App' +tier: 'intermediate' +--- + # FlashCards **Tier:** 2-Intermediate diff --git a/Projects/2-Intermediate/Flip-Art-App.md b/Projects/2-Intermediate/Flip-Art-App.md index c2ea33d9..3d89361b 100644 --- a/Projects/2-Intermediate/Flip-Art-App.md +++ b/Projects/2-Intermediate/Flip-Art-App.md @@ -1,3 +1,9 @@ +--- +path: '/flip-art-app' +title: 'Flip Art App' +tier: 'intermediate' +--- + # Flip Art **Tier:** 2-Intermediate diff --git a/Projects/2-Intermediate/Game-Suggestion-App.md b/Projects/2-Intermediate/Game-Suggestion-App.md index 5557942f..d6128305 100644 --- a/Projects/2-Intermediate/Game-Suggestion-App.md +++ b/Projects/2-Intermediate/Game-Suggestion-App.md @@ -1,3 +1,8 @@ +--- +path: '/game-suggestion-app' +title: 'Game Suggestion App' +tier: 'intermediate' +--- # Game suggestion app diff --git a/Projects/2-Intermediate/GitHub-Profiles.md b/Projects/2-Intermediate/GitHub-Profiles.md index 505ead18..f8efe825 100644 --- a/Projects/2-Intermediate/GitHub-Profiles.md +++ b/Projects/2-Intermediate/GitHub-Profiles.md @@ -1,3 +1,9 @@ +--- +path: '/github-profiles' +title: 'Github Profiles' +tier: 'intermediate' +--- + # GitHub Profiles **Tier:** 2-Intermediate diff --git a/Projects/2-Intermediate/HighStriker-Game.md b/Projects/2-Intermediate/HighStriker-Game.md index 0ad71c24..aac5d8ad 100644 --- a/Projects/2-Intermediate/HighStriker-Game.md +++ b/Projects/2-Intermediate/HighStriker-Game.md @@ -1,3 +1,9 @@ +--- +path: '/high-striker-game' +title: 'HighStriker Game' +tier: 'intermediate' +--- + # HighStriker **Tier:** 2-Intermediate diff --git a/Projects/2-Intermediate/Image-Scaner.md b/Projects/2-Intermediate/Image-Scanner.md similarity index 93% rename from Projects/2-Intermediate/Image-Scaner.md rename to Projects/2-Intermediate/Image-Scanner.md index ee17ad0b..79e34d43 100644 --- a/Projects/2-Intermediate/Image-Scaner.md +++ b/Projects/2-Intermediate/Image-Scanner.md @@ -1,3 +1,9 @@ +--- +path: '/image-scanner' +title: 'Image Scanner' +tier: 'intermediate' +--- + # Image Scanner **Tier:** 2-Intermediate diff --git a/Projects/2-Intermediate/Markdown-Previewer.md b/Projects/2-Intermediate/Markdown-Previewer.md index de500d64..40f4e3aa 100644 --- a/Projects/2-Intermediate/Markdown-Previewer.md +++ b/Projects/2-Intermediate/Markdown-Previewer.md @@ -1,3 +1,9 @@ +--- +path: '/markdown-previewer' +title: 'Markdown Previewer' +tier: 'intermediate' +--- + # Markdown Previewer **Tier:** 2-Intermediate diff --git a/Projects/2-Intermediate/Markdown-Table-Generator.md b/Projects/2-Intermediate/Markdown-Table-Generator.md index b7a08d56..b55d2cb0 100644 --- a/Projects/2-Intermediate/Markdown-Table-Generator.md +++ b/Projects/2-Intermediate/Markdown-Table-Generator.md @@ -1,3 +1,9 @@ +--- +path: '/markdown-table-generator' +title: 'Markdown Table Generator' +tier: 'intermediate' +--- + # Markdown Table Generator **Tier:** 2-Intermediate diff --git a/Projects/2-Intermediate/Meme-Generator-App.md b/Projects/2-Intermediate/Meme-Generator-App.md index d9524391..0bfcd3e3 100644 --- a/Projects/2-Intermediate/Meme-Generator-App.md +++ b/Projects/2-Intermediate/Meme-Generator-App.md @@ -1,3 +1,9 @@ +--- +path: '/meme-generator-app' +title: 'Meme Generator App' +tier: 'intermediate' +--- + # Meme Generator App **Tier:** 2-Intermediate diff --git a/Projects/2-Intermediate/Name-Generator.md b/Projects/2-Intermediate/Name-Generator.md index 5b42c1c6..41797345 100644 --- a/Projects/2-Intermediate/Name-Generator.md +++ b/Projects/2-Intermediate/Name-Generator.md @@ -1,3 +1,9 @@ +--- +path: '/name-generator' +title: 'Name Generator' +tier: 'intermediate' +--- + # Name generation using Recurrent Neural Networks **Tier:** 2-Intermediate diff --git a/Projects/2-Intermediate/Password-Generator.md b/Projects/2-Intermediate/Password-Generator.md index 5aeeb194..0fc8b61f 100644 --- a/Projects/2-Intermediate/Password-Generator.md +++ b/Projects/2-Intermediate/Password-Generator.md @@ -1,3 +1,9 @@ +--- +path: '/password-generator' +title: 'Password Generator' +tier: 'intermediate' +--- + # Password Generator **Tier:** 2-Intermediate diff --git a/Projects/2-Intermediate/Podcast-Directory-App.md b/Projects/2-Intermediate/Podcast-Directory-App.md index 9959e375..ca499cbc 100644 --- a/Projects/2-Intermediate/Podcast-Directory-App.md +++ b/Projects/2-Intermediate/Podcast-Directory-App.md @@ -1,3 +1,9 @@ +--- +path: '/podcast-directory-app' +title: 'Podcast Directory App' +tier: 'intermediate' +--- + # Podcast Directory **Tier:** 2-Intermediate diff --git a/Projects/2-Intermediate/QRCode-Badge-App.md b/Projects/2-Intermediate/QRCode-Badge-App.md index 2a7cc573..53fbb6c9 100644 --- a/Projects/2-Intermediate/QRCode-Badge-App.md +++ b/Projects/2-Intermediate/QRCode-Badge-App.md @@ -1,3 +1,9 @@ +--- +path: '/qr-code-badge-app' +title: 'QRCode Badge Generator App' +tier: 'intermediate' +--- + # QRCode Badge Generator **Tier:** 2-Intermediate diff --git a/Projects/2-Intermediate/RegExp-Helper-App.md b/Projects/2-Intermediate/RegExp-Helper-App.md index d7cd69e9..70992320 100644 --- a/Projects/2-Intermediate/RegExp-Helper-App.md +++ b/Projects/2-Intermediate/RegExp-Helper-App.md @@ -1,3 +1,9 @@ +--- +path: '/regular-expression-helper-app' +title: 'Regular Expression Helper App' +tier: 'intermediate' +--- + # Regular Expression Helper **Tier:** 2-Intermediate diff --git a/Projects/2-Intermediate/Sales-DB-App.md b/Projects/2-Intermediate/Sales-DB-App.md index da54af16..79561ae7 100644 --- a/Projects/2-Intermediate/Sales-DB-App.md +++ b/Projects/2-Intermediate/Sales-DB-App.md @@ -1,3 +1,9 @@ +--- +path: '/sales-db-app' +title: 'Sales DB App' +tier: 'intermediate' +--- + # Sales Reciepts **Tier:** 2-Intermediate diff --git a/Projects/2-Intermediate/Simple-Online-Store.md b/Projects/2-Intermediate/Simple-Online-Store.md index 4f660e86..254bb720 100644 --- a/Projects/2-Intermediate/Simple-Online-Store.md +++ b/Projects/2-Intermediate/Simple-Online-Store.md @@ -1,3 +1,9 @@ +--- +path: '/simple-online-store' +title: 'Simple Online Store' +tier: 'intermediate' +--- + # Simple Online Store **Tier:** 2-Intermediate diff --git a/Projects/2-Intermediate/Sports-Bracket-Generator.md b/Projects/2-Intermediate/Sports-Bracket-Generator.md index 69a5b5ba..2fdba128 100644 --- a/Projects/2-Intermediate/Sports-Bracket-Generator.md +++ b/Projects/2-Intermediate/Sports-Bracket-Generator.md @@ -1,3 +1,9 @@ +--- +path: '/sports-bracket-generator' +title: 'Sports Bracket Generator' +tier: 'intermediate' +--- + # Sports Bracket Generator **Tier:** 2-Intermediate diff --git a/Projects/2-Intermediate/String-Art.md b/Projects/2-Intermediate/String-Art.md index 7aa0c0d6..6e848e1e 100644 --- a/Projects/2-Intermediate/String-Art.md +++ b/Projects/2-Intermediate/String-Art.md @@ -1,3 +1,9 @@ +--- +path: '/string-art' +title: 'StringArt' +tier: 'intermediate' +--- + # StringArt **Tier:** 2-Intermediate diff --git a/Projects/2-Intermediate/This-or-That-Game.md b/Projects/2-Intermediate/This-or-That-Game.md index c271f720..fe3e108e 100644 --- a/Projects/2-Intermediate/This-or-That-Game.md +++ b/Projects/2-Intermediate/This-or-That-Game.md @@ -1,3 +1,9 @@ +--- +path: '/this-or-that-game' +title: 'This or That Game' +tier: 'intermediate' +--- + # This or That Game **Tier:** 2-Intermediate diff --git a/Projects/2-Intermediate/Timezone-Slackbot.md b/Projects/2-Intermediate/Timezone-Slackbot.md index b943555b..bc8fa067 100644 --- a/Projects/2-Intermediate/Timezone-Slackbot.md +++ b/Projects/2-Intermediate/Timezone-Slackbot.md @@ -1,3 +1,9 @@ +--- +path: '/timezone-slackbot' +title: 'Timezone Slackbot - TZ' +tier: 'intermediate' +--- + # Timezone Slackbot - TZ **Tier:** 2-Intermediate diff --git a/Projects/2-Intermediate/To-Do-App.md b/Projects/2-Intermediate/To-Do-App.md index 4a47c6ad..a7f33ada 100644 --- a/Projects/2-Intermediate/To-Do-App.md +++ b/Projects/2-Intermediate/To-Do-App.md @@ -1,3 +1,9 @@ +--- +path: '/to-do-app' +title: 'To-Do App' +tier: 'intermediate' +--- + # To-Do App **Tier:** 2-Intermediate diff --git a/Projects/2-Intermediate/Typing-Practice-App.md b/Projects/2-Intermediate/Typing-Practice-App.md index eb1492df..055535dd 100644 --- a/Projects/2-Intermediate/Typing-Practice-App.md +++ b/Projects/2-Intermediate/Typing-Practice-App.md @@ -1,3 +1,9 @@ +--- +path: '/typing-practice-app' +title: 'Typing Practice App' +tier: 'intermediate' +--- + # Typing Practice **Tier:** 2-Intermediate diff --git a/Projects/2-Intermediate/Voting-App.md b/Projects/2-Intermediate/Voting-App.md index ae40b9b0..e10bafb2 100644 --- a/Projects/2-Intermediate/Voting-App.md +++ b/Projects/2-Intermediate/Voting-App.md @@ -1,3 +1,9 @@ +--- +path: '/voting-app' +title: 'Voting App' +tier: 'intermediate' +--- + # Voting App **Tier:** 2-Intermediate diff --git a/Projects/2-Intermediate/math-editor.md b/Projects/2-Intermediate/math-editor.md index 0a473225..1ad86389 100644 --- a/Projects/2-Intermediate/math-editor.md +++ b/Projects/2-Intermediate/math-editor.md @@ -1,3 +1,9 @@ +--- +path: '/math-formula-editor' +title: 'Math Formula Editor' +tier: 'intermediate' +--- + # Math Formula Editor **Tier:** 2-Intermediate diff --git a/Projects/3-Advanced/Battleship-Bot.md b/Projects/3-Advanced/Battleship-Bot.md index 896675bd..5529ee00 100644 --- a/Projects/3-Advanced/Battleship-Bot.md +++ b/Projects/3-Advanced/Battleship-Bot.md @@ -1,3 +1,9 @@ +--- +path: '/battleship-bot' +title: 'Battleship Bot' +tier: 'advanced' +--- + # Battleship Bot **Tier:** 3-Advanced @@ -9,16 +15,16 @@ via a Discord chat. ## User Stories -- [ ] User can display game rules by entering `bb help` into the chat window. -- [ ] User can start a game by entering `bb start` into the chat -- [ ] 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. -- [ ] User can see the game board showing hits and misses displayed by the bot after each shot is taken -- [ ] User can see a congratulations message after the shot that sinks the last remaining ship. +- [ ] User can display game rules by entering `bb help` into the chat window. +- [ ] User can start a game by entering `bb start` into the chat +- [ ] 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. +- [ ] User can see the game board showing hits and misses displayed by the bot after each shot is taken +- [ ] User can see a congratulations message after the shot that sinks the last remaining ship. ## Bonus features -- [ ] User can surrender a game by entering `bb surrender` in the chat window. -- [ ] User can see a card containing a graphical representation of the hits and misses rather than a simple 2D table of characters. +- [ ] User can surrender a game by entering `bb surrender` in the chat window. +- [ ] User can see a card containing a graphical representation of the hits and misses rather than a simple 2D table of characters. ## Useful links and resources diff --git a/Projects/3-Advanced/Battleship-Game-Engine.md b/Projects/3-Advanced/Battleship-Game-Engine.md index 255549c2..fd122195 100644 --- a/Projects/3-Advanced/Battleship-Game-Engine.md +++ b/Projects/3-Advanced/Battleship-Game-Engine.md @@ -1,3 +1,9 @@ +--- +path: '/battleship-game-engine' +title: 'Battleship Game Engine' +tier: 'advanced' +--- + # Battleship Game Engine **Tier:** 3-Advanced @@ -22,48 +28,48 @@ BGE is responsible for maintaining game state. ### BGE -- [ ] 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: +- [ ] 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: - - Destroyer: 2 squares - - Cruiser: 3 squares - - Battleship: 4 squares + - Destroyer: 2 squares + - Cruiser: 3 squares + - Battleship: 4 squares - `startGame()` will randomly place these ships on the board in any direction and will return an array representing ship placement. + `startGame()` will randomly place these ships on the board in any direction and will return an array representing ship placement. -- [ ] 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. +- [ ] 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. - 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. + 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. ### Text-based Presentation Layer -- [ ] User can see the hits and misses array displayed as a 2 dimensional character representation of the game board returned by the `startGame()` function. -- [ ] User can be prompted to enter the coordinates of a target square on the game board. -- [ ] User can see an updated hits and misses array display after taking a shot. -- [ ] User can see a message after each shot indicating whether the shot resulted in a hit or miss. -- [ ] User can see an congratulations message after the shot that sinks the last remaining ship. -- [ ] User can be prompted to play again at the end of each game. Declining to play again stops the game. +- [ ] User can see the hits and misses array displayed as a 2 dimensional character representation of the game board returned by the `startGame()` function. +- [ ] User can be prompted to enter the coordinates of a target square on the game board. +- [ ] User can see an updated hits and misses array display after taking a shot. +- [ ] User can see a message after each shot indicating whether the shot resulted in a hit or miss. +- [ ] User can see an congratulations message after the shot that sinks the last remaining ship. +- [ ] User can be prompted to play again at the end of each game. Declining to play again stops the game. ## Bonus features ### BGE -- [ ] Caller can specify the number of rows and columns in the game board as a parameter to the `startGame()` function. -- [ ] 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. -- [ ] 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. +- [ ] Caller can specify the number of rows and columns in the game board as a parameter to the `startGame()` function. +- [ ] 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. +- [ ] 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. - `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. + `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. ### Text-based Presentation Layer -- [ ] 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) -- [ ] 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) -- [ ] User can see the player number in prompts associated with the inputs in each turn. -- [ ] User can see both players boards at the end of each turn. +- [ ] 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) +- [ ] 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) +- [ ] User can see the player number in prompts associated with the inputs in each turn. +- [ ] User can see both players boards at the end of each turn. ## Useful links and resources -- [Battleship Game (Wikipedia)]() -- [Battleship Game Rules (Hasbro)](https://www.hasbro.com/common/instruct/battleship.pdf) +- [Battleship Game (Wikipedia)]() +- [Battleship Game Rules (Hasbro)](https://www.hasbro.com/common/instruct/battleship.pdf) ## Example projects @@ -71,4 +77,4 @@ This YouTube video shows how a text-based [Battleship Game](https://www.youtube. The following example is provided as a demonstration of the Battleship game if it is unfamiliar to you. Remember you are to implement a text based presentation layer for testing. -- [Battleship Game by Chris Brody](https://codepen.io/CodifyAcademy/pen/ByBEOz) +- [Battleship Game by Chris Brody](https://codepen.io/CodifyAcademy/pen/ByBEOz) diff --git a/Projects/3-Advanced/Boole-Bot-Game.md b/Projects/3-Advanced/Boole-Bot-Game.md index 1ad28402..d95d0834 100644 --- a/Projects/3-Advanced/Boole-Bot-Game.md +++ b/Projects/3-Advanced/Boole-Bot-Game.md @@ -1,15 +1,21 @@ +--- +path: '/boole-bots-game' +title: 'Boole Bots Game' +tier: 'advanced' +--- + # Boole Bots Game **Tier:** 3-Advanced -Boole Bots is a game that is not only fun, but also an aid in helping to +Boole Bots is a game that is not only fun, but also an aid in helping to understand basic Boolean logic. This game has an arena of 8x8 game tiles in which your bots move at random speeds and trajectories. The Bots are assigned -boolean values of 0 or 1 and boolean operations - AND, OR, NOR, NOT. +boolean values of 0 or 1 and boolean operations - AND, OR, NOR, NOT. When a bot collides with another bot its boolean operation is applied to both it and the other bots' boolean value to determine which one wins or looses, or -if the collision results in a tie. Loosing bots disappear and winning bots +if the collision results in a tie. Loosing bots disappear and winning bots continue moving about the arena until only one remains. ### Requirements & Constraints @@ -18,72 +24,76 @@ continue moving about the arena until only one remains. ## User Stories -- [ ] User can see the game window with these components - - Game configuration input panel - - Leaderboard showing bots ranked by their scores - - Game controls - - Arena of 8x8 game tiles where the bots battle +- [ ] User can see the game window with these components + - Game configuration input panel + - Leaderboard showing bots ranked by their scores + - Game controls + - Arena of 8x8 game tiles where the bots battle ### Game Configuration Panel -- [ ] User can see a game configuration panel with these subcomponents: - - Four bot panels with controls to allow the user to input a unique bot - name, select its Boolean value and operation, select the bots speed using a - slider, and a dropdown to specify its starting direction - North, South, + +- [ ] User can see a game configuration panel with these subcomponents: + - Four bot panels with controls to allow the user to input a unique bot + name, select its Boolean value and operation, select the bots speed using a + slider, and a dropdown to specify its starting direction - North, South, East, West -- [ ] User can enter a unique name for each bot into an input text box -- [ ] User can see an error message if the name entered is the same name -assigned to another bot. -- [ ] User can select the bots Boolean value (0 or 1) from a dropdown. -- [ ] User can select a bots Boolean operation from a dropdown - AND, OR, XOR, -or NOT. -- [ ] User can move the speed slider to set a bots speed -- [ ] User can select a bots starting direction from the direction dropdown. -- [ ] User can see the bot randomly assigned to a tile in the arena once its -name has been defined. +- [ ] User can enter a unique name for each bot into an input text box +- [ ] User can see an error message if the name entered is the same name + assigned to another bot. +- [ ] User can select the bots Boolean value (0 or 1) from a dropdown. +- [ ] User can select a bots Boolean operation from a dropdown - AND, OR, XOR, + or NOT. +- [ ] User can move the speed slider to set a bots speed +- [ ] User can select a bots starting direction from the direction dropdown. +- [ ] User can see the bot randomly assigned to a tile in the arena once its + name has been defined. ### Game Controls -- [ ] User can a button in the game control panel to 'Battle!' -- [ ] User can click the 'Battle!' button to start the bot battle in the arena. -- [ ] User can see bots move based on the speed and direction assigned to them. -- [ ] User can see the 'Battle!' button text change to 'Stop!' once a battle -is started. -- [ ] User can click the 'Stop!' button to halt gameplay -- [ ] User can see the 'Stop!' button text change back to 'Battle!' once a -single bot wins the match. + +- [ ] User can a button in the game control panel to 'Battle!' +- [ ] User can click the 'Battle!' button to start the bot battle in the arena. +- [ ] User can see bots move based on the speed and direction assigned to them. +- [ ] User can see the 'Battle!' button text change to 'Stop!' once a battle + is started. +- [ ] User can click the 'Stop!' button to halt gameplay +- [ ] User can see the 'Stop!' button text change back to 'Battle!' once a + single bot wins the match. ### Arena -- [ ] User can see bots bounce off the boundary walls of the arena in a new -direction -- [ ] User can see bots pause for an instant when they collide. -- [ ] User can see a bot disappear after colliding if the result of it's -boolean operation appied to its boolean value and that of the bot is has -collided with result in 0. -- [ ] User can see a bot that wins a collision resume its path at the same -speed and direction. -- [ ] User can see both colliding bots resume their paths at the same speed -and direction in the event of a tie. In other words, when the collision resulted -in the same boolean result (0 or 1) for both. -- [ ] User can see gameplay stop when only one bot remains. + +- [ ] User can see bots bounce off the boundary walls of the arena in a new + direction +- [ ] User can see bots pause for an instant when they collide. +- [ ] User can see a bot disappear after colliding if the result of it's + boolean operation appied to its boolean value and that of the bot is has + collided with result in 0. +- [ ] User can see a bot that wins a collision resume its path at the same + speed and direction. +- [ ] User can see both colliding bots resume their paths at the same speed + and direction in the event of a tie. In other words, when the collision resulted + in the same boolean result (0 or 1) for both. +- [ ] User can see gameplay stop when only one bot remains. ### Leaderboard -- [ ] User can see the display of wins and losses for each bot on the -leaderboard -- [ ] User can see the tally of wins incremented for bots winning a collision. -- [ ] User can see the tally of losses decremented for bots loosing a collision. + +- [ ] User can see the display of wins and losses for each bot on the + leaderboard +- [ ] User can see the tally of wins incremented for bots winning a collision. +- [ ] User can see the tally of losses decremented for bots loosing a collision. ## Bonus features -- [ ] User can see a log panel displaying the details of game milestones. -Hint: This may be useful to the Developer during development and debugging. -- [ ] User can see a game clock displaying current elapsed game time that is -updated every second. -- [ ] User may choose a bots starting direction as North, Northeast, Southeast, -South, Southwest, West, or Northwest. -- [ ] User may specify the dimensions of the arena. -- [ ] User may select an unique icon for a bot from a palette of icons. Icons -in the palette are disabled once they are assigned. -- [ ] User can see the bot with the most wins highlighted in some way in the -Leaderboard. +- [ ] User can see a log panel displaying the details of game milestones. + Hint: This may be useful to the Developer during development and debugging. +- [ ] User can see a game clock displaying current elapsed game time that is + updated every second. +- [ ] User may choose a bots starting direction as North, Northeast, Southeast, + South, Southwest, West, or Northwest. +- [ ] User may specify the dimensions of the arena. +- [ ] User may select an unique icon for a bot from a palette of icons. Icons + in the palette are disabled once they are assigned. +- [ ] User can see the bot with the most wins highlighted in some way in the + Leaderboard. ## Useful links and resources diff --git a/Projects/3-Advanced/Bug-Race-Game.md b/Projects/3-Advanced/Bug-Race-Game.md index 323549b7..e1dfa38c 100644 --- a/Projects/3-Advanced/Bug-Race-Game.md +++ b/Projects/3-Advanced/Bug-Race-Game.md @@ -1,3 +1,9 @@ +--- +path: '/bug-race-game' +title: 'Bug Race Game' +tier: 'advanced' +--- + # Bug Race **Tier:** 3-Advanced @@ -5,70 +11,71 @@ In this project you will test your animation skills by creating a game that lets the user race bugs while trying to guess the winner. As part of this you'll need to provide the user with various controls that allow the game to -be customized including bug icons, assigning names to the bugs, making a choice +be customized including bug icons, assigning names to the bugs, making a choice of who the winner might be, and bug speed. ### Constraints + - The developer will need to select the bug icons to be used in the game - The developer should randomly adjust the speed of each bug before a race -starts so they travel at different rates within the speed selected by the -user (slow, normal, or fast). + starts so they travel at different rates within the speed selected by the + user (slow, normal, or fast). - It is up to the developer to define the speed ranges associated with the slow, -normal, and fast speed setting. + normal, and fast speed setting. - You may use an animation library, but you'll get more out of this project -if you try to implement it using native language features. + if you try to implement it using native language features. ## User Stories -- [ ] User can see: - - An input panel containing controls to configure the game's UI and +- [ ] User can see: + - An input panel containing controls to configure the game's UI and operation. - - A race track consisting of four horizontal lanes the bugs will travel in - - A radio button associated with each lane to allow the user to select a + - A race track consisting of four horizontal lanes the bugs will travel in + - A radio button associated with each lane to allow the user to select a potential winner - - A 'Start' button. + - A 'Start' button. ### Game Controls -- [ ] User can see the following controls in the input panel. - - A list of race lane numbers with radio buttons for each showing - thumbnails for three unique bugs, and a text box the user can use to - give the bug a name. - - An Speed selection control with three radio buttons - Slow, Normal, Fast -- [ ] User can click a radio button to select the bug icon to be assigned -to a lane. -- [ ] User can see an warning message if the same icon is selected for more -than one lane. -- [ ] User can enter a name for the bug in each lane. -- [ ] User can see an error message if the same name is repeated for more than -one bug. -- [ ] User can select the bug speed by clicking one of the Speed radio buttons + +- [ ] User can see the following controls in the input panel. + - A list of race lane numbers with radio buttons for each showing + thumbnails for three unique bugs, and a text box the user can use to + give the bug a name. + - An Speed selection control with three radio buttons - Slow, Normal, Fast +- [ ] User can click a radio button to select the bug icon to be assigned + to a lane. +- [ ] User can see an warning message if the same icon is selected for more + than one lane. +- [ ] User can enter a name for the bug in each lane. +- [ ] User can see an error message if the same name is repeated for more than + one bug. +- [ ] User can select the bug speed by clicking one of the Speed radio buttons ### Racing -- [ ] User can select a potential winner by clicking on the radio button on -any lane. -- [ ] User can start a race by clicking on the 'Start' button -- [ ] User can see the 'Start' button is disabled until the race is over -- [ ] User can see an error message if no winner was selected. -- [ ] User can see bugs race across their assigned lane to the finish line -- [ ] User can see all bugs stop moving when the first one reaches the finish -line -- [ ] User can see game metrics updated to show the number of races run in -this session. +- [ ] User can select a potential winner by clicking on the radio button on + any lane. +- [ ] User can start a race by clicking on the 'Start' button +- [ ] User can see the 'Start' button is disabled until the race is over +- [ ] User can see an error message if no winner was selected. +- [ ] User can see bugs race across their assigned lane to the finish line +- [ ] User can see all bugs stop moving when the first one reaches the finish + line +- [ ] User can see game metrics updated to show the number of races run in + this session. ## Bonus features -- [ ] User can see race metrics for each bug showing the number of races -run, number of wins, and number of losses. -- [ ] User can see the winning bug bounce when it wins a race -- [ ] User can see loosing bugs flip on their backs when they loose a race -- [ ] User can hear unique sounds played when the race starts and ends. +- [ ] User can see race metrics for each bug showing the number of races + run, number of wins, and number of losses. +- [ ] User can see the winning bug bounce when it wins a race +- [ ] User can see loosing bugs flip on their backs when they loose a race +- [ ] User can hear unique sounds played when the race starts and ends. ## Useful links and resources - [3D Bug Images](https://www.google.com/search?q=3d+bug+drawings&tbm=isch&source=hp&sa=X&ved=2ahUKEwjxkNT7--jhAhUI-6wKHW3_CgQQsAR6BAgHEAE&biw=1279&bih=550) -- [Basic Animations (MDN)](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations -) +- [Basic Animations (MDN)](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations) - [How to build a simple Sprite animation in Javascript](https://medium.com/dailyjs/how-to-build-a-simple-sprite-animation-in-javascript-b764644244aa) - [Javascript Animations](https://javascript.info/animation) @@ -76,4 +83,4 @@ run, number of wins, and number of losses. - [Arcade Game](https://jdmedlock.github.io/arcadegame/) - [Drag Race Animation](https://codepen.io/Delime/pen/IyuAr) -- [Horse Race](https://codepen.io/nathanielzanzouri/pen/jVgEZY) \ No newline at end of file +- [Horse Race](https://codepen.io/nathanielzanzouri/pen/jVgEZY) diff --git a/Projects/3-Advanced/Calorie-Counter-App.md b/Projects/3-Advanced/Calorie-Counter-App.md index c2769751..185996f8 100644 --- a/Projects/3-Advanced/Calorie-Counter-App.md +++ b/Projects/3-Advanced/Calorie-Counter-App.md @@ -1,8 +1,14 @@ +--- +path: '/calorie-counter-app' +title: 'Calorie Counter App' +tier: 'advanced' +--- + # Calorie Counter **Tier:** 3-Advanced -Getting and staying healthy requires a combination of mental balance, +Getting and staying healthy requires a combination of mental balance, exercise, and nutrition. The goal of the Calorie Counter app is to help the user address nutritional needs by counting calories for various foods. @@ -12,34 +18,34 @@ will be searched to determine the calorie values. Calorie Counter also provides you, the developer, with experience in transforming raw data into a format that will make it easier to search. In this case, the -MyPyramid Food Raw Data file, which is an MS Excel spreadsheet, must be +MyPyramid Food Raw Data file, which is an MS Excel spreadsheet, must be downloaded and transformed into a JSON file that will be easier to load and search at runtime (hint: take a look at the CSV file format). ## User Stories -- [ ] Developer will create a JSON file containing the food items to be -searched. This will be loaded when the app is started. -- [ ] User can see an panel containing a food description input text box, -a 'Search' button, and a 'Clear' button. -- [ ] User can enter search terms into the food description input text box. -- [ ] User can click on the 'Search' button to search for the matching food. -- [ ] User can see and warning message if no search terms were entered. -- [ ] User can see a warning message if no matches were found. -- [ ] User can see a list of the matching food items, portion sizes, and -calories in a scrollable results panel that is limited to 25 entries. -- [ ] User can click on the 'Clear' button to clear the search terms and -results list. +- [ ] Developer will create a JSON file containing the food items to be + searched. This will be loaded when the app is started. +- [ ] User can see an panel containing a food description input text box, + a 'Search' button, and a 'Clear' button. +- [ ] User can enter search terms into the food description input text box. +- [ ] User can click on the 'Search' button to search for the matching food. +- [ ] User can see and warning message if no search terms were entered. +- [ ] User can see a warning message if no matches were found. +- [ ] User can see a list of the matching food items, portion sizes, and + calories in a scrollable results panel that is limited to 25 entries. +- [ ] User can click on the 'Clear' button to clear the search terms and + results list. ## Bonus features -- [ ] User can see the count of the number of matching food items adjacent to -the results list. -- [ ] User can use a wildcard character in search terms. -- [ ] User can see more than 25 entries from a search by clicking a Down -icon button to add more matching food items to the search results list. -- [ ] Developer will implement load the MyPyramid data into a database or a -data structure other than an array for faster searching. +- [ ] User can see the count of the number of matching food items adjacent to + the results list. +- [ ] User can use a wildcard character in search terms. +- [ ] User can see more than 25 entries from a search by clicking a Down + icon button to add more matching food items to the search results list. +- [ ] Developer will implement load the MyPyramid data into a database or a + data structure other than an array for faster searching. ## Useful links and resources diff --git a/Projects/3-Advanced/Chat-App.md b/Projects/3-Advanced/Chat-App.md index 6c032eb4..5608a2de 100644 --- a/Projects/3-Advanced/Chat-App.md +++ b/Projects/3-Advanced/Chat-App.md @@ -1,3 +1,9 @@ +--- +path: '/chat-app' +title: 'Chat App' +tier: 'advanced' +--- + # Chat App **Tier:** 3-Advanced @@ -8,27 +14,27 @@ As a MVP(Minimum Viable Product) you can focus on building the Chat interface. R ## User Stories -- [ ] User is prompted to enter a username when he visits the chat app. The username will be stored in the application -- [ ] User can see an `input field` where he can type a new message -- [ ] 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!`) +- [ ] User is prompted to enter a username when he visits the chat app. The username will be stored in the application +- [ ] User can see an `input field` where he can type a new message +- [ ] 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!`) ## Bonus features -- [ ] The messages will be visible to all the Users that are in the chat app (using WebSockets) -- [ ] When a new User joins the chat, a message is displayed to all the existing Users -- [ ] Messages are saved in a database -- [ ] User can send images, videos and links which will be displayed properly -- [ ] User can select and send an emoji -- [ ] Users can chat in private -- [ ] Users can join `channels` on specific topics +- [ ] The messages will be visible to all the Users that are in the chat app (using WebSockets) +- [ ] When a new User joins the chat, a message is displayed to all the existing Users +- [ ] Messages are saved in a database +- [ ] User can send images, videos and links which will be displayed properly +- [ ] User can select and send an emoji +- [ ] Users can chat in private +- [ ] Users can join `channels` on specific topics ## Useful links and resources -- [Socket.io](https://socket.io) -- [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) -- [Build a chat application like Slack - React / JavaScript Tutorial - Youtube](https://www.youtube.com/watch?v=a-JKj7m2LIo) -- [Socket.io Chat App Using Websockets - Youtube Tutorial](https://www.youtube.com/watch?v=tHbCkikFfDE) +- [Socket.io](https://socket.io) +- [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) +- [Build a chat application like Slack - React / JavaScript Tutorial - Youtube](https://www.youtube.com/watch?v=a-JKj7m2LIo) +- [Socket.io Chat App Using Websockets - Youtube Tutorial](https://www.youtube.com/watch?v=tHbCkikFfDE) ## Example projects -- [Chatty2](https://web-chatty.herokuapp.com/) +- [Chatty2](https://web-chatty.herokuapp.com/) diff --git a/Projects/3-Advanced/Contribution-Tracker-App.md b/Projects/3-Advanced/Contribution-Tracker-App.md index 23c1cf3a..6a713cb8 100644 --- a/Projects/3-Advanced/Contribution-Tracker-App.md +++ b/Projects/3-Advanced/Contribution-Tracker-App.md @@ -1,3 +1,9 @@ +--- +path: '/contribution-tracker-app' +title: 'Contribution Tracker App' +tier: 'advanced' +--- + # Contribution Tracker **Tier:** 3-Advanced @@ -6,98 +12,92 @@ In the [Charity Finder](../2-Intermediate/Charity-Finder-App.md) project you cre help you locate a charity worthy of your contributions. Once a contribution has been made the goal of the Contribution Tracker app is to track it so to provide users with a record of all contributions for use in monitoring how -funds are being directed and to provide records for financial reporting +funds are being directed and to provide records for financial reporting purposes. For example, for tax reporting. ### Constraints - Developers may use Vanilla JS, or a framework of their choice (like React, -VueJS, etc.). + VueJS, etc.). - Developers should not use libraries for calculating and manipulating monetary -amounts. All calculation and formatting should be done in the language chosen -to develop the application. + amounts. All calculation and formatting should be done in the language chosen + to develop the application. - Developers may use a graphics presentation library or service of their choice, -like [AMCharts](https://www.amcharts.com/). + like [AMCharts](https://www.amcharts.com/). - Developers may choose to have transactions persist across sessions using -either files or databases. Sensitive data, like transactions, must not be -maintained in local storage. Remember that although you can implement -protections it is impossible to totally secure browser applications. + either files or databases. Sensitive data, like transactions, must not be + maintained in local storage. Remember that although you can implement + protections it is impossible to totally secure browser applications. ## User Stories -- [ ] User can see a Navigation Bar at the top of each page containing the -application name and a "hamburger" menu with these option: - - Dashboard - - Transactions -- [ ] User can see a Footer Bar at the bottom of each page containing an -About link +- [ ] User can see a Navigation Bar at the top of each page containing the + application name and a "hamburger" menu with these option: - Dashboard - Transactions +- [ ] User can see a Footer Bar at the bottom of each page containing an + About link ### Dashboard Page -- [ ] User can see the Dashboard page when the app is started containing -graphical summaries of the following key metrics. The graphical representation -for each is left up to the Developer. - - Contributions by month for the current year - - Total contributions by year - - Contribution increase/decrease by year - - Average contribution amount by month and year -- [ ] User can return to the Dashboard page, if currently on another page, by -clicking on the 'Dashboard' option in the hamburger menu in the Navigation Bar. + +- [ ] User can see the Dashboard page when the app is started containing + graphical summaries of the following key metrics. The graphical representation + for each is left up to the Developer. - Contributions by month for the current year - Total contributions by year - Contribution increase/decrease by year - Average contribution amount by month and year +- [ ] User can return to the Dashboard page, if currently on another page, by + clicking on the 'Dashboard' option in the hamburger menu in the Navigation Bar. ### Transactions Page -- [ ] User can see a transaction input panel containing the following: - - Transaction date - - Payee name - - Amount - - Memo - - Action buttons - 'Clear', 'Add' -- [ ] User can see a tabular transaction ledger containing previously -entered transactions. Each row will also contain a 'Modify' and a 'Delete' -button. -- [ ] User can enter values describing the transaction into the input fields -- [ ] User can click the 'Clear' button to reset all input fields to an -empty state. -- [ ] User can click the 'Add' button to validate the input that has been -entered, add the validated entry to the transaction ledger, and clear the input -fields. -- [ ] User can see a consolidated error message detailing any errors detected -in input fields, including: - - Invalid date - - Blank Payee name - - Non-numeric amount field -- [ ] User can click on the 'Update' button to modify a previously entered -transaction. The transaction details will be copied to the transaction input -panel and the 'Add' button will change to 'Modify'. -- [ ] User can change values in the input fields and click the 'Modify' to -validate the input and update that transactions entry in the ledger. If -successful the 'Modify' button will change back to 'Add' and the input fields -will be cleared. -- [ ] User can click the 'Delete' button to remove a previously entered -transaction. A popup dialog will be displayed containing 'Cancel' and 'Okay' -buttons to cancel or confirm the delete. If the delete is confirmed the -transaction will be removed from the ledger. -- [ ] User can return to the Transactions page, if currently on another page, -by clicking on the 'Transactions' option in the hamburger menu in the Navigation -Bar. + +- [ ] User can see a transaction input panel containing the following: + - Transaction date + - Payee name + - Amount + - Memo + - Action buttons - 'Clear', 'Add' +- [ ] User can see a tabular transaction ledger containing previously + entered transactions. Each row will also contain a 'Modify' and a 'Delete' + button. +- [ ] User can enter values describing the transaction into the input fields +- [ ] User can click the 'Clear' button to reset all input fields to an + empty state. +- [ ] User can click the 'Add' button to validate the input that has been + entered, add the validated entry to the transaction ledger, and clear the input + fields. +- [ ] User can see a consolidated error message detailing any errors detected + in input fields, including: - Invalid date - Blank Payee name - Non-numeric amount field +- [ ] User can click on the 'Update' button to modify a previously entered + transaction. The transaction details will be copied to the transaction input + panel and the 'Add' button will change to 'Modify'. +- [ ] User can change values in the input fields and click the 'Modify' to + validate the input and update that transactions entry in the ledger. If + successful the 'Modify' button will change back to 'Add' and the input fields + will be cleared. +- [ ] User can click the 'Delete' button to remove a previously entered + transaction. A popup dialog will be displayed containing 'Cancel' and 'Okay' + buttons to cancel or confirm the delete. If the delete is confirmed the + transaction will be removed from the ledger. +- [ ] User can return to the Transactions page, if currently on another page, + by clicking on the 'Transactions' option in the hamburger menu in the Navigation + Bar. ### About Page -- [ ] User can click the About link in the Footer Bar to display information -about the Developer. -- [ ] User can see links to the Developers GitHub and social media accounts -including social media icons (like the Twitter icon). + +- [ ] User can click the About link in the Footer Bar to display information + about the Developer. +- [ ] User can see links to the Developers GitHub and social media accounts + including social media icons (like the Twitter icon). ## Bonus features -- [ ] User can click in the transaction date field to display a calendar -the date can be selected from rather than manually entering it. -- [ ] User can see alternating row background colors in the transaction ledger. -- [ ] User can click on a column heading in the transaction ledger to toggle -the sort sequence on the values in that column. -- [ ] User can see a PDF option near the Transaction Ledger to create a PDF -of all transactions (Hint: checkout how this capability can be implemented via -[Puppeteer](https://github.com/GoogleChrome/puppeteer)). +- [ ] User can click in the transaction date field to display a calendar + the date can be selected from rather than manually entering it. +- [ ] User can see alternating row background colors in the transaction ledger. +- [ ] User can click on a column heading in the transaction ledger to toggle + the sort sequence on the values in that column. +- [ ] User can see a PDF option near the Transaction Ledger to create a PDF + of all transactions (Hint: checkout how this capability can be implemented via + [Puppeteer](https://github.com/GoogleChrome/puppeteer)). ## Useful links and resources diff --git a/Projects/3-Advanced/Elevator-App.md b/Projects/3-Advanced/Elevator-App.md index 51506959..e8093749 100644 --- a/Projects/3-Advanced/Elevator-App.md +++ b/Projects/3-Advanced/Elevator-App.md @@ -1,9 +1,15 @@ +--- +path: '/elevator-app' +title: 'Elevator App' +tier: 'advanced' +--- + # Elevator **Tier:** 3-Advanced It's tough to think of a world without elevators. Especially if you have to -walk up and down 20 flights of stairs each day. But, if you think about it +walk up and down 20 flights of stairs each day. But, if you think about it elevators were one of the original implementations of events and event handlers long before web applications came on the scene. @@ -11,53 +17,53 @@ The objective of the Elevator app is to simulate the operation of an elevator and more importantly, how to handle the events generated when the buildings occupants use it. This app simulates occupants calling for an elevator from any floor and pressing the buttons inside the elevator to indicate the floor -they wish to go to. +they wish to go to. ### Constraints - You must implement a single event handler for the up and down buttons on -each floor. For example, if there are 4 floors a single event handler should -be implemented rather than 8 (two buttons per floor). + each floor. For example, if there are 4 floors a single event handler should + be implemented rather than 8 (two buttons per floor). - Similarly, a single event handler should be implemented for all buttons on -the control panel in the elevator rather than a unique event handler for each -button. + the control panel in the elevator rather than a unique event handler for each + button. ## User Stories -- [ ] User can see a cross section diagram of a building with four floors, -an elevator shaft, the elevator, and an up button on the first floor, up and -down buttons on the second and third floors, and a down button on the fourth -floor. -- [ ] User can see the elevator control panel with a button for each of the -floors to the side of the diagram. -- [ ] User can click the up and down button on any floor to call the -elevator. -- [ ] User can expect that clicking the up and down buttons on any floor -to request the elevator will be queued and serviced in the sequence they were -clicked. -- [ ] User can see the elevator move up and down the shaft to the floor it -was called to. -- [ ] User can click the elevator control panel to select the floor it -should travel to. -- [ ] User can expect the elevator to pause for 5 seconds waiting for a -floor button on the control panel to be clicked. If a floor button isn't -clicked within that time the elevator will process the next call request. -- [ ] User can expect the elevator to return to the first floor when there -are no requests to process. +- [ ] User can see a cross section diagram of a building with four floors, + an elevator shaft, the elevator, and an up button on the first floor, up and + down buttons on the second and third floors, and a down button on the fourth + floor. +- [ ] User can see the elevator control panel with a button for each of the + floors to the side of the diagram. +- [ ] User can click the up and down button on any floor to call the + elevator. +- [ ] User can expect that clicking the up and down buttons on any floor + to request the elevator will be queued and serviced in the sequence they were + clicked. +- [ ] User can see the elevator move up and down the shaft to the floor it + was called to. +- [ ] User can click the elevator control panel to select the floor it + should travel to. +- [ ] User can expect the elevator to pause for 5 seconds waiting for a + floor button on the control panel to be clicked. If a floor button isn't + clicked within that time the elevator will process the next call request. +- [ ] User can expect the elevator to return to the first floor when there + are no requests to process. ## Bonus features -- [ ] User can see a warning sound if the number of elevator requests -exceeds the maximum number allowed. This limit is left to the developer. -- [ ] User can hear a sound when the elevator arrives at a floor. -- [ ] User can see an occupant randomly arrive at a floor to indicate when -the user should click the up or down elevator call button on that floor. -- [ ] User can specify the time interval between new occupants arriving to -call an elevator. +- [ ] User can see a warning sound if the number of elevator requests + exceeds the maximum number allowed. This limit is left to the developer. +- [ ] User can hear a sound when the elevator arrives at a floor. +- [ ] User can see an occupant randomly arrive at a floor to indicate when + the user should click the up or down elevator call button on that floor. +- [ ] User can specify the time interval between new occupants arriving to + call an elevator. ## Useful links and resources -[First-in, first out queue (Wikipedia)](https://en.wikipedia.org/wiki/FIFO_(computing_and_electronics)) +[First-in, first out queue (Wikipedia)]() ## Example projects diff --git a/Projects/3-Advanced/FastFood-App.md b/Projects/3-Advanced/FastFood-App.md index 3ace3914..fb1409a4 100644 --- a/Projects/3-Advanced/FastFood-App.md +++ b/Projects/3-Advanced/FastFood-App.md @@ -1,3 +1,9 @@ +--- +path: '/fast-food-simulator-app' +title: 'Fast Food Simulator App' +tier: 'advanced' +--- + # Fast Food Simulator App **Tier:** 3-Advanced @@ -19,55 +25,56 @@ The user stories that make up this app center around four distinct roles: - Cook - the simulated Cook - Server - the simulated Server -This app has quite a few User Stories. Don't be overwhelmed though. Take the -time to sketch out not just the UI, but how the different actors (roles) +This app has quite a few User Stories. Don't be overwhelmed though. Take the +time to sketch out not just the UI, but how the different actors (roles) interact and incrementally build the app following Agile principles. ### Constraints - Order tickets can be represented as two different types of Promises - one -the Server waits on while the Cook prepares the order and another the Customer -waits on while in the serving line. + the Server waits on while the Cook prepares the order and another the Customer + waits on while in the serving line. - Use the native equivalent of JS Promises in whichever language you choose -to develop in. JS developers should use native Promises and not `async/await`. + to develop in. JS developers should use native Promises and not `async/await`. - Create this app using native language features. You may NOT use a simulation -package or library. + package or library. - New customers arrive in the order line at a fixed interval of time. In other -words, new customers arrive at a constant rate. + words, new customers arrive at a constant rate. - Order tickets are fulfilled at a fixed interval of time as well. They are -completed at a constant rate. + completed at a constant rate. ## User Stories ### Application Operation -- [ ] User can see an input area that allows the entry of the time interval -for customer arrival and a time interval for the fulfilment of an -_order ticket_ by the cook. -- [ ] User can see a customized warning message if the customer arrival -interval or the order fulfilment interval is incorrectly entered. -- [ ] User can start the simulation by clicking on a Start button. -- [ ] User can see an order line area containing a text box showing the -number of customers waiting to place orders. -- [ ] User can see an order area containing text boxes showing the -_order number_ currently being taken. -- [ ] User can see a kitchen area containing a text box showing the -_order number_ that's being prepared and a text box listing the waiting -orders in sequence, along with a count of the number of waiting orders. -- [ ] User can see a Pickup area containing a text box showing the -_order number_ that's currently available for pickup by the Customer and a -text box showing the number of Customers waiting in the serving line. -- [ ] User can stop the simulation at any time by clicking a Stop button. + +- [ ] User can see an input area that allows the entry of the time interval + for customer arrival and a time interval for the fulfilment of an + _order ticket_ by the cook. +- [ ] User can see a customized warning message if the customer arrival + interval or the order fulfilment interval is incorrectly entered. +- [ ] User can start the simulation by clicking on a Start button. +- [ ] User can see an order line area containing a text box showing the + number of customers waiting to place orders. +- [ ] User can see an order area containing text boxes showing the + _order number_ currently being taken. +- [ ] User can see a kitchen area containing a text box showing the + _order number_ that's being prepared and a text box listing the waiting + orders in sequence, along with a count of the number of waiting orders. +- [ ] User can see a Pickup area containing a text box showing the + _order number_ that's currently available for pickup by the Customer and a + text box showing the number of Customers waiting in the serving line. +- [ ] User can stop the simulation at any time by clicking a Stop button. ## Bonus features -- [ ] User can specify how long it takes for an Order Taker to create an -_order ticket_. -- [ ] User can specify how long it takes for the Server to deliver an order -to the customer. -- [ ] User can specify the total amount of time the simulation is to run -once the Start button has been clicked. -- [ ] User can see an animated view of Customers and orders as they move -through the workflow. +- [ ] User can specify how long it takes for an Order Taker to create an + _order ticket_. +- [ ] User can specify how long it takes for the Server to deliver an order + to the customer. +- [ ] User can specify the total amount of time the simulation is to run + once the Start button has been clicked. +- [ ] User can see an animated view of Customers and orders as they move + through the workflow. ## Useful links and resources diff --git a/Projects/3-Advanced/GitHub-Timeline-App.md b/Projects/3-Advanced/GitHub-Timeline-App.md index dd2ab8d4..e5802627 100644 --- a/Projects/3-Advanced/GitHub-Timeline-App.md +++ b/Projects/3-Advanced/GitHub-Timeline-App.md @@ -1,3 +1,9 @@ +--- +path: '/github-timeline-app' +title: 'GitHub Timeline App' +tier: 'advanced' +--- + # GitHub Timeline **Tier:** 3-Advanced @@ -16,16 +22,16 @@ Only public GitHub repos should be displayed. ## User Stories -- [ ] User can enter a GitHub user name -- [ ] User can click a 'Generate' button to create and display the named - users repo timeline -- [ ] User can see a warning message if the GitHub user name is not a valid - GitHub user name. +- [ ] User can enter a GitHub user name +- [ ] User can click a 'Generate' button to create and display the named + users repo timeline +- [ ] User can see a warning message if the GitHub user name is not a valid + GitHub user name. ## Bonus features -- [ ] User can see a summary of the number of repos tallied by the year they - were created +- [ ] User can see a summary of the number of repos tallied by the year they + were created ## Useful links and resources @@ -34,13 +40,13 @@ to use an NPM package to access the GitHub API. Documentation for the GitHub API can be found at: -- [GitHub REST API V3](https://developer.github.com/v3/) -- [GitHub GraphQL API V4](https://developer.github.com/v4/) +- [GitHub REST API V3](https://developer.github.com/v3/) +- [GitHub GraphQL API V4](https://developer.github.com/v4/) Sample code showing how to use the GitHub API's are: -- [GitHub REST API client for JavaScript ](https://github.com/octokit/rest.js/) -- [GitHub GraphQL API client for browsers and Node](https://github.com/octokit/graphql.js) +- [GitHub REST API client for JavaScript ](https://github.com/octokit/rest.js/) +- [GitHub GraphQL API client for browsers and Node](https://github.com/octokit/graphql.js) You can use this CURL command to see the JSON returned by the V3 REST API for your repos: @@ -51,5 +57,5 @@ curl -u "user-id" https://api.github.com/users/user-id/repos ## Example projects -- [CSS Timeline](https://codepen.io/NilsWe/pen/FemfK) -- [Building a Vertical Timeline With CSS and a Touch of JavaScript](https://codepen.io/tutsplus/pen/QNeJgR) +- [CSS Timeline](https://codepen.io/NilsWe/pen/FemfK) +- [Building a Vertical Timeline With CSS and a Touch of JavaScript](https://codepen.io/tutsplus/pen/QNeJgR) diff --git a/Projects/3-Advanced/GitTweet-App.md b/Projects/3-Advanced/GitTweet-App.md index 9d7268d2..5f1a35d7 100644 --- a/Projects/3-Advanced/GitTweet-App.md +++ b/Projects/3-Advanced/GitTweet-App.md @@ -1,3 +1,9 @@ +--- +path: '/git-tweet-app' +title: 'GitTweet App' +tier: 'advanced' +--- + # GitTweet **Tier:** 3-Advanced @@ -7,58 +13,58 @@ create a timeline of your repos. What could be more powerful that using an API such as this? Why using two API's, of course. The goal of GitTweet is to create a GitHub app to tweet when a pull request -is created for one of your repos. +is created for one of your repos. ## User Stories -- [ ] User can see an input area tabular display prepopulated with rows for -each of the GitHub repos she owns and a selection checkbox next to each repo -name, a single input date field, and a 'Scan' button. -- [ ] User can click the checkboxes in the repo list to select or deselect -repos for processing. -- [ ] User can enter a date into the date field. This defines the point after -which any new PR requests will be tweeted. -- [ ] User can click the 'Scan' button to identify repos that have had a new -PR created that has not been previously tweeted. In other words. Consecutively -entering the same date to scan from should only generate tweets for PR's that -have not yet been tweeted. -- [ ] User can see an error message if no date was entered, if it is not a -valid date, or if it is a future date. -- [ ] User can see repos highlighted if a tweet will be generated for them -and the 'Scan' button will change to 'Tweet'. -- [ ] User may deselect a repo by clicking on its checkbox. Doing this will -change the button back to 'Scan' and clicking it will repeat the search for -repos that have had new PR's (not yet tweeted) created since the scan date -entered by the user. -- [ ] User may enter an new scan date at this point which also changes the -button back to 'Scan'. -- [ ] User may click the 'Tweet' button to send a tweet bearing the following -message - `Pull Requst # created for repo - `. -- [ ] User can see this tweet send from her Twitter account. +- [ ] User can see an input area tabular display prepopulated with rows for + each of the GitHub repos she owns and a selection checkbox next to each repo + name, a single input date field, and a 'Scan' button. +- [ ] User can click the checkboxes in the repo list to select or deselect + repos for processing. +- [ ] User can enter a date into the date field. This defines the point after + which any new PR requests will be tweeted. +- [ ] User can click the 'Scan' button to identify repos that have had a new + PR created that has not been previously tweeted. In other words. Consecutively + entering the same date to scan from should only generate tweets for PR's that + have not yet been tweeted. +- [ ] User can see an error message if no date was entered, if it is not a + valid date, or if it is a future date. +- [ ] User can see repos highlighted if a tweet will be generated for them + and the 'Scan' button will change to 'Tweet'. +- [ ] User may deselect a repo by clicking on its checkbox. Doing this will + change the button back to 'Scan' and clicking it will repeat the search for + repos that have had new PR's (not yet tweeted) created since the scan date + entered by the user. +- [ ] User may enter an new scan date at this point which also changes the + button back to 'Scan'. +- [ ] User may click the 'Tweet' button to send a tweet bearing the following + message - `Pull Requst # created for repo - `. +- [ ] User can see this tweet send from her Twitter account. ## Bonus features -- [ ] User does not need to manually enter a scan date. If omitted the scan -will resume from the last scan date which must persist across sessions. -- [ ] User may enter a custom tweet message -- [ ] User repo selections will persist across sessions so they do not have -to be reselected each time. +- [ ] User does not need to manually enter a scan date. If omitted the scan + will resume from the last scan date which must persist across sessions. +- [ ] User may enter a custom tweet message +- [ ] User repo selections will persist across sessions so they do not have + to be reselected each time. ## Useful links and resources - [Twitter Developer Docs](https://developer.twitter.com/en.html) - [GitHub Apps](https://developer.github.com/apps//) - GitHub offers two API's you may use to access repo data. You may also choose - to use an NPM package to access the GitHub API. Documentation for the GitHub + to use an NPM package to access the GitHub API. Documentation for the GitHub API can be found at: - - [GitHub REST API V3](https://developer.github.com/v3/) - - [GitHub GraphQL API V4](https://developer.github.com/v4/) + - [GitHub REST API V3](https://developer.github.com/v3/) + - [GitHub GraphQL API V4](https://developer.github.com/v4/) Sample code showing how to use the GitHub API's are: - - [GitHub REST API client for JavaScript ](https://github.com/octokit/rest.js/) - - [GitHub GraphQL API client for browsers and Node](https://github.com/octokit/graphql.js) + - [GitHub REST API client for JavaScript ](https://github.com/octokit/rest.js/) + - [GitHub GraphQL API client for browsers and Node](https://github.com/octokit/graphql.js) You can use this CURL command to see the JSON returned by the V3 REST API for your repos: diff --git a/Projects/3-Advanced/Instagram-Clone-App.md b/Projects/3-Advanced/Instagram-Clone-App.md index 7b5db84e..5e39a718 100644 --- a/Projects/3-Advanced/Instagram-Clone-App.md +++ b/Projects/3-Advanced/Instagram-Clone-App.md @@ -1,3 +1,9 @@ +--- +path: '/instagram-clone-app' +title: 'Instagram Clone App' +tier: 'advanced' +--- + # Instagram Clone **Tier:** 3-Advanced @@ -8,29 +14,29 @@ You should create a MVP (Minimum Viable Product) using a Full stack approach suc ## User Stories -- [ ] User can register for an account storing their name, email/username and password then login to the app using their credentials -- [ ] User can create a post and store images to the server (Preferably in a database) -- [ ] User has a profile that displays all the images they have uploaded -- [ ] User can follow other users -- [ ] User can see other users posts (people who the user follows) +- [ ] User can register for an account storing their name, email/username and password then login to the app using their credentials +- [ ] User can create a post and store images to the server (Preferably in a database) +- [ ] User has a profile that displays all the images they have uploaded +- [ ] User can follow other users +- [ ] User can see other users posts (people who the user follows) ## Bonus features -- [ ] User can see a global feed of images -- [ ] The feed auth refreshes when a new post is added (You can use Web Sockets) -- [ ] User can send messages to other users -- [ ] User can create a story for followers +- [ ] User can see a global feed of images +- [ ] The feed auth refreshes when a new post is added (You can use Web Sockets) +- [ ] User can send messages to other users +- [ ] User can create a story for followers ## Useful links and resources -- [How to make an Instagram clone](https://www.youtube.com/watch?v=9dRSNQe7PWw) -- [Node & Mongo Basic CRUD Operations](https://codeburst.io/writing-a-crud-app-with-node-js-and-mongodb-e0827cbbdafb) -- [Socket.io](https://socket.io) -- [MERN Stack](http://mern.io/) -- [MEAN Stack](http://mean.io/) -- [User Authentication with Node](https://medium.com/silibrain/using-passport-bcrypt-for-full-stack-app-user-authentication-fe30a013604e) -- [Express File Uploads with Multer](https://scotch.io/tutorials/express-file-uploads-with-multer) +- [How to make an Instagram clone](https://www.youtube.com/watch?v=9dRSNQe7PWw) +- [Node & Mongo Basic CRUD Operations](https://codeburst.io/writing-a-crud-app-with-node-js-and-mongodb-e0827cbbdafb) +- [Socket.io](https://socket.io) +- [MERN Stack](http://mern.io/) +- [MEAN Stack](http://mean.io/) +- [User Authentication with Node](https://medium.com/silibrain/using-passport-bcrypt-for-full-stack-app-user-authentication-fe30a013604e) +- [Express File Uploads with Multer](https://scotch.io/tutorials/express-file-uploads-with-multer) ## Example projects -- [Instagram](https://www.instagram.com/) +- [Instagram](https://www.instagram.com/) diff --git a/Projects/3-Advanced/Kudos-Slackbot.md b/Projects/3-Advanced/Kudos-Slackbot.md index d6e3c6ae..816f8889 100644 --- a/Projects/3-Advanced/Kudos-Slackbot.md +++ b/Projects/3-Advanced/Kudos-Slackbot.md @@ -1,3 +1,9 @@ +--- +path: '/kudos-slackbot' +title: "Kudo's Slackbot" +tier: 'advanced' +--- + # Kudo's Slackbot **Tier:** 3-Advanced @@ -11,32 +17,32 @@ efforts and to make it available through a simple Slack command. ## User Stories -- [ ] User can create a kudu using the Slack command: `/kudo add ` where: +- [ ] User can create a kudu using the Slack command: `/kudo add ` where: - - `` defines the individual receiving the recognition - - `` is your kudo for that person + - `` defines the individual receiving the recognition + - `` is your kudo for that person -- [ ] User can modify a kudu using the Slack command: `/kudo replace ` where: +- [ ] User can modify a kudu using the Slack command: `/kudo replace ` where: - - `` is 'replace' or 'delete' - - `` is the kudo identifier - - `` is your kudo for that person + - `` is 'replace' or 'delete' + - `` is the kudo identifier + - `` is your kudo for that person -- [ ] User can delete a kudu using the Slack command: `/kudo delete ` +- [ ] User can delete a kudu using the Slack command: `/kudo delete ` -- [ ] User may display the most recent _n_ kudos using the Slack command: `/kudo list ` where `n` is an integer or `*` for all kudos +- [ ] User may display the most recent _n_ kudos using the Slack command: `/kudo list ` where `n` is an integer or `*` for all kudos -- [ ] User may display all kudos for an individual with the Slack command: `/kudo user ` +- [ ] User may display all kudos for an individual with the Slack command: `/kudo user ` ## Bonus features -- [ ] 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 +- [ ] 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 ## Useful links and resources -- [Slack API](https://api.slack.com/) +- [Slack API](https://api.slack.com/) ## Example project -- [Kudos Slackbot Example](https://cubic-quince.glitch.me/) -- +- [Kudos Slackbot Example](https://cubic-quince.glitch.me/) +- diff --git a/Projects/3-Advanced/Movie-App.md b/Projects/3-Advanced/Movie-App.md index f47471f3..bfe5386a 100644 --- a/Projects/3-Advanced/Movie-App.md +++ b/Projects/3-Advanced/Movie-App.md @@ -1,28 +1,34 @@ +--- +path: '/movie-db-app' +title: 'Movie Database App' +tier: 'advanced' +--- + # Movie Database App **Tier:** 3-Advanced Find your next movie or create your watchlist with this App. It include reviews, rating, actors and anything you need to know about the movie. -- This application will help users find their next movie to watch by showing helpful stats -- Resource needed for the project is movie api, examples include Imdb, MovieDB etc. +- This application will help users find their next movie to watch by showing helpful stats +- Resource needed for the project is movie api, examples include Imdb, MovieDB etc. ## User Stories -- [ ] User can see all the latest movie on the front page -- [ ] User scroll down to see all other movies according to release date -- [ ] User can click on any of the movie to go to their own separate page -- [ ] User can then see all about the movie ratings, about, actors present on each separate movie page +- [ ] User can see all the latest movie on the front page +- [ ] User scroll down to see all other movies according to release date +- [ ] User can click on any of the movie to go to their own separate page +- [ ] User can then see all about the movie ratings, about, actors present on each separate movie page ## Bonus features -- [ ] User can create an account -- [ ] User can create their own watch list -- [ ] User can review movies +- [ ] User can create an account +- [ ] User can create their own watch list +- [ ] User can review movies ## Useful links and resources -- [MovieDB Api](https://developers.themoviedb.org/3) +- [MovieDB Api](https://developers.themoviedb.org/3) ## Example projects diff --git a/Projects/3-Advanced/MyPodcast-Library-app.md b/Projects/3-Advanced/MyPodcast-Library-app.md index 747970cb..4f8e46a5 100644 --- a/Projects/3-Advanced/MyPodcast-Library-app.md +++ b/Projects/3-Advanced/MyPodcast-Library-app.md @@ -1,10 +1,16 @@ +--- +path: '/my-podcast-library' +title: 'My Podcast Library' +tier: 'advanced' +--- + # My Podcast Library **Tier:** 3-Advanced In the [GitHub Status](../1-Beginner/GitHub-Status-App.md) and [Podcast Directory](../2-Intermediate/Podcast-Directory-App.md) you learned what web scraping is and how you can use it as an alternative data source when API's and backend databases aren't -available. The _My Podcast Library_ app merges your newfound knowledge of +available. The _My Podcast Library_ app merges your newfound knowledge of web scraping with your frontend skills to extend the simple Podcast Directory app into something more complex and useful. @@ -21,66 +27,70 @@ free to use your imagination. ### Favorite Podcast Display -- [ ] User can see their favorite podcasts in a tabular display area -- [ ] User can see the message 'No podcasts added yet' in watermark format -in this area if no podcasts have been added. -- [ ] User can see an overview of each favorite podcast that has been added -in this area. This includes the podcast icon, it's name, and the number of -most recent episodes. -- [ ] User can click on the podcast icon to display a page containing a list -of the most recent episodes. +- [ ] User can see their favorite podcasts in a tabular display area +- [ ] User can see the message 'No podcasts added yet' in watermark format + in this area if no podcasts have been added. +- [ ] User can see an overview of each favorite podcast that has been added + in this area. This includes the podcast icon, it's name, and the number of + most recent episodes. +- [ ] User can click on the podcast icon to display a page containing a list + of the most recent episodes. ### Favorite Podcast Entry -- [ ] User can see a '+' button at the top of the favorite podcast area with -the hover text 'Add a new podcast' -- [ ] User can click the '+' button to display a popup panel to allow a new -favorite podcast added. This panel contains an input area containing a text -input box for the podcasts page on Podbean (e.g. -[Techpoint Charlie](https://www.podbean.com/podcast-detail/k76vd-8adc7/Techpoint-Charlie-Podcast)), a 'Save' button, and a 'Cancel' button. -- [ ] User can click the 'Save' button to validate the URL and add the -podcast to the favorite podcast area. -- [ ] User can see a warning message if the url doesn't start with -```https://www.podbean.com/podcast-detail/``` or if navigating to the page -results in a 404 error. -- [ ] User can see valid URLs for favorite podcasts retained across sessions. -- [ ] User can click the 'Cancel' button to discard any data and dismiss the -popup. + +- [ ] User can see a '+' button at the top of the favorite podcast area with + the hover text 'Add a new podcast' +- [ ] User can click the '+' button to display a popup panel to allow a new + favorite podcast added. This panel contains an input area containing a text + input box for the podcasts page on Podbean (e.g. + [Techpoint Charlie](https://www.podbean.com/podcast-detail/k76vd-8adc7/Techpoint-Charlie-Podcast)), a 'Save' button, and a 'Cancel' button. +- [ ] User can click the 'Save' button to validate the URL and add the + podcast to the favorite podcast area. +- [ ] User can see a warning message if the url doesn't start with + `https://www.podbean.com/podcast-detail/` or if navigating to the page + results in a 404 error. +- [ ] User can see valid URLs for favorite podcasts retained across sessions. +- [ ] User can click the 'Cancel' button to discard any data and dismiss the + popup. ### Most Recent Episodes for a Podcast Page -- [ ] User can see a table of podcast episodes -- [ ] User can see rows in this table showing a clickable episode icon, the -title of the episode, the date it was originally broadcast, and a heart icon -button to mark it as a favorite. -- [ ] User can scroll through the list -- [ ] User can click on the episode icon to display that episodes page on -the Podbean web site. -- [ ] User can click on an episode's heart icon to mark it as a favorite. -- [ ] User can click on an episode's heart icon to remove it as a favorite. -- [ ] User can see the table sorted with most recent episodes at the top, -followed by those previously marked as favorites. -- [ ] User can see favorite episodes persist across sessions. + +- [ ] User can see a table of podcast episodes +- [ ] User can see rows in this table showing a clickable episode icon, the + title of the episode, the date it was originally broadcast, and a heart icon + button to mark it as a favorite. +- [ ] User can scroll through the list +- [ ] User can click on the episode icon to display that episodes page on + the Podbean web site. +- [ ] User can click on an episode's heart icon to mark it as a favorite. +- [ ] User can click on an episode's heart icon to remove it as a favorite. +- [ ] User can see the table sorted with most recent episodes at the top, + followed by those previously marked as favorites. +- [ ] User can see favorite episodes persist across sessions. ## Bonus features ### Episode Ratings -- [ ] User can see 5 star icons with each episode that denotes how the user -rates it. -- [ ] User may click stars from left-to-right to rate an episode. Stars are -filled or changed to a new color when clicked. -- [ ] User may change a rating by clicking on the stars from right-to-left -to deselect them. -- [ ] User can see the list of favorite episodes on the page sorted in -descending rating sequence. + +- [ ] User can see 5 star icons with each episode that denotes how the user + rates it. +- [ ] User may click stars from left-to-right to rate an episode. Stars are + filled or changed to a new color when clicked. +- [ ] User may change a rating by clicking on the stars from right-to-left + to deselect them. +- [ ] User can see the list of favorite episodes on the page sorted in + descending rating sequence. ### Searching & Hashtags -- [ ] User can enter a freeform hashtag with an episode on the most recent -episodes page. This hashtag does not need to be predefined. -- [ ] User can see a search box on the main page and a 'Search' button -- [ ] User can enter hashtags in the search box to display a page of episodes -from any podcast with the same format as the most recent episodes page. -- [ ] User can click on a cancel button on the search results page to return -to the main page. - + +- [ ] User can enter a freeform hashtag with an episode on the most recent + episodes page. This hashtag does not need to be predefined. +- [ ] User can see a search box on the main page and a 'Search' button +- [ ] User can enter hashtags in the search box to display a page of episodes + from any podcast with the same format as the most recent episodes page. +- [ ] User can click on a cancel button on the search results page to return + to the main page. + ## Useful links and resources - [Puppeteer](https://github.com/GoogleChrome/puppeteer) diff --git a/Projects/3-Advanced/NASA-Exoplanet-Query.md b/Projects/3-Advanced/NASA-Exoplanet-Query.md index 35be263a..5671a604 100644 --- a/Projects/3-Advanced/NASA-Exoplanet-Query.md +++ b/Projects/3-Advanced/NASA-Exoplanet-Query.md @@ -1,3 +1,9 @@ +--- +path: '/nasa-exoplanet-query' +title: 'NASA Exoplanet Query' +tier: 'advanced' +--- + # NASA Exoplanet Query **Tier:** 3-Advanced @@ -7,48 +13,48 @@ system. The United States National Aeronautics and Space Administration (NASA) maintains a publicly accessible archive of the data collected on these in comma separated value (CSV) format. -The objective of the NASA Exoplanet Query app is to make this data available -for simple queries by its users. +The objective of the NASA Exoplanet Query app is to make this data available +for simple queries by its users. ### Requirements & Constraints - The Developer should implement a means of efficiently loading the exoplanet -CSV data obtained from NASA to minimize any delays when the application starts. + CSV data obtained from NASA to minimize any delays when the application starts. - Similarly, the Developer should utilize a data structure and search mechanism -that minimizes the time required to query the exoplanet data and display the -results. + that minimizes the time required to query the exoplanet data and display the + results. - The Developer will need to review the Exoplanet Archive documentation to -understand the format of the data fields. + understand the format of the data fields. ## User Stories -- [ ] User can see an query input panel containing dropdowns allowing the -user to query on year of discovery, discovery method, host name, and discovery -facility. -- [ ] User can also see 'Clear' and 'Search' buttons in the query input panel. -- [ ] User can select a single value from any one or all of the query -dropdowns. -- [ ] User can click the 'Search' button to search for exoplanets matching -all of the selected query values. -- [ ] User can see an error message if the 'Search' button was clicked, but -no query values were selected. -- [ ] User can see the matching exoplanet data displayed in tabular format -in an results panel below the query panel. Only the queriable fields should -be displayed. -- [ ] User can click the 'Clear' button to reset the query selections and -clear any data displayed in the results panel, if a search had been performed. +- [ ] User can see an query input panel containing dropdowns allowing the + user to query on year of discovery, discovery method, host name, and discovery + facility. +- [ ] User can also see 'Clear' and 'Search' buttons in the query input panel. +- [ ] User can select a single value from any one or all of the query + dropdowns. +- [ ] User can click the 'Search' button to search for exoplanets matching + all of the selected query values. +- [ ] User can see an error message if the 'Search' button was clicked, but + no query values were selected. +- [ ] User can see the matching exoplanet data displayed in tabular format + in an results panel below the query panel. Only the queriable fields should + be displayed. +- [ ] User can click the 'Clear' button to reset the query selections and + clear any data displayed in the results panel, if a search had been performed. ## Bonus features -- [ ] User can see the host name as a hyperlink to NASA's Confirmed Planet -Overview Page for that planet -- [ ] User can click on the host name to display the Confirmed Planet Overview -Page in a new browser tab. -- [ ] User can see icons (such as up and down symbols) in the column headers -- [ ] User can click on the up symbol to sort the rows in the results panel -in ascending order on the values in that column. -- [ ] User can click on the down symbol to sort the rows in the results panel -in descending order on the values in the column. +- [ ] User can see the host name as a hyperlink to NASA's Confirmed Planet + Overview Page for that planet +- [ ] User can click on the host name to display the Confirmed Planet Overview + Page in a new browser tab. +- [ ] User can see icons (such as up and down symbols) in the column headers +- [ ] User can click on the up symbol to sort the rows in the results panel + in ascending order on the values in that column. +- [ ] User can click on the down symbol to sort the rows in the results panel + in descending order on the values in the column. ## Useful links and resources diff --git a/Projects/3-Advanced/Shell-Game.md b/Projects/3-Advanced/Shell-Game.md index cdac7819..56af9e71 100644 --- a/Projects/3-Advanced/Shell-Game.md +++ b/Projects/3-Advanced/Shell-Game.md @@ -1,9 +1,15 @@ +--- +path: '/shell-game' +title: 'Shell Game' +tier: 'advanced' +--- + # Shell Game **Tier:** 3-Advanced A Shell game is a classic gambling game that dates back to ancient Greece. -Playing it requires three shells, a pea, hand dexterity by the operator, and +Playing it requires three shells, a pea, hand dexterity by the operator, and keen observation skills on the part of the player. It's also a classic con game since its easy for the operator to swindle the player. Thank goodness the latter isn't our intent with this app. @@ -17,30 +23,30 @@ is allowed to continue guessing until the pea is located. ## User Stories -- [ ] User can see the canvas with three shells and the pea. -- [ ] User can click the shell the pea is to be hidden under. -- [ ] User can see the pea move under the shell that's been clicked. -- [ ] User can click on a 'Shuffle' button to start an animated shuffling of -the shells for 5 seconds. -- [ ] User can click on the shell she believes the pea is hidden under when -the animation stops. -- [ ] User can see the shell that has been clicked rise to reveal if the pea -is hidden under it. -- [ ] User can continue clicking shells until the pea is found. -- [ ] User can see a congratulations message when the pea is located -- [ ] User can start a new game by clicking a shell the pea is to be hidden -under (step #2 above). The steps above are then repeated. +- [ ] User can see the canvas with three shells and the pea. +- [ ] User can click the shell the pea is to be hidden under. +- [ ] User can see the pea move under the shell that's been clicked. +- [ ] User can click on a 'Shuffle' button to start an animated shuffling of + the shells for 5 seconds. +- [ ] User can click on the shell she believes the pea is hidden under when + the animation stops. +- [ ] User can see the shell that has been clicked rise to reveal if the pea + is hidden under it. +- [ ] User can continue clicking shells until the pea is found. +- [ ] User can see a congratulations message when the pea is located +- [ ] User can start a new game by clicking a shell the pea is to be hidden + under (step #2 above). The steps above are then repeated. ## Bonus features -- [ ] User can see a score panel containing the number of wins and the -number of games played. -- [ ] User can see the number of games played increase when the pea is hidden -under a shell -- [ ] User can see the number of wins incremented when the pea is found on -the first guess. -- [ ] User can see the shell hiding the pea to animate (color, size, or -some other effect) when it is clicked (a correct guess). +- [ ] User can see a score panel containing the number of wins and the + number of games played. +- [ ] User can see the number of games played increase when the pea is hidden + under a shell +- [ ] User can see the number of wins incremented when the pea is found on + the first guess. +- [ ] User can see the shell hiding the pea to animate (color, size, or + some other effect) when it is clicked (a correct guess). ## Useful links and resources diff --git a/Projects/3-Advanced/Shuffle-Deck-App.md b/Projects/3-Advanced/Shuffle-Deck-App.md index 62d21cab..2df94c43 100644 --- a/Projects/3-Advanced/Shuffle-Deck-App.md +++ b/Projects/3-Advanced/Shuffle-Deck-App.md @@ -1,3 +1,9 @@ +--- +path: '/shuffle-card-deck-app' +title: 'Shuffle Card Deck App' +tier: 'advanced' +--- + # Shuffle Card Deck **Tier:** 3-Advanced @@ -14,36 +20,36 @@ important it will provide you with experience at measuring and evaluating app performance. Your task is to implement the performance evaluation algorithm, the Xorshift -pseudorandom number generator, as well as the WELL512a.c algorithm if you +pseudorandom number generator, as well as the WELL512a.c algorithm if you choose to attempt the bonus feature. ## User Stories -- [ ] User can see a panel containing a text box the user can enter the -number of rounds into, three output text boxes to contain the starting time, -ending time, and total time of the test, and two buttons - 'JS Random', -'Xorshift'. -- [ ] User can enter a number from 1 to 10,000 to specify the number of -times (or rounds) the selected random number is to be executed. -- [ ] User can click one of the three buttons to start the evaluation of the -selected random number algorithm. The random number algorithm will be executed -for the number of rounds entered by the user above. -- [ ] User can see a warning message if number of rounds has not been entered, -if it is not within the range 1 to 10,000, or if it is not a valid integer. -- [ ] User can see a tabular output area where the results of each algorithm -are displayed - algorithm name, time started, time ended, and total time. -- [ ] User can see a warning dialog with a 'Cancel' and a 'OK' button if the -number of rounds is changed before all three tests have been run. -- [ ] User can click the 'Cancel' button in the warning dialog to dismiss -the dialog with no changes. -- [ ] User can click the 'OK' button in the warning dialog to clear the -output area and close the warning dialog. - +- [ ] User can see a panel containing a text box the user can enter the + number of rounds into, three output text boxes to contain the starting time, + ending time, and total time of the test, and two buttons - 'JS Random', + 'Xorshift'. +- [ ] User can enter a number from 1 to 10,000 to specify the number of + times (or rounds) the selected random number is to be executed. +- [ ] User can click one of the three buttons to start the evaluation of the + selected random number algorithm. The random number algorithm will be executed + for the number of rounds entered by the user above. +- [ ] User can see a warning message if number of rounds has not been entered, + if it is not within the range 1 to 10,000, or if it is not a valid integer. +- [ ] User can see a tabular output area where the results of each algorithm + are displayed - algorithm name, time started, time ended, and total time. +- [ ] User can see a warning dialog with a 'Cancel' and a 'OK' button if the + number of rounds is changed before all three tests have been run. +- [ ] User can click the 'Cancel' button in the warning dialog to dismiss + the dialog with no changes. +- [ ] User can click the 'OK' button in the warning dialog to clear the + output area and close the warning dialog. + ## Bonus features -- [ ] User can see a third algorithm button - 'WELL512a.c'. -- [ ] Developer should review the output and determine why the fastest -algorithm is faster than the slowest algorithm. +- [ ] User can see a third algorithm button - 'WELL512a.c'. +- [ ] Developer should review the output and determine why the fastest + algorithm is faster than the slowest algorithm. ## Useful links and resources diff --git a/Projects/3-Advanced/Slack-Archiver.md b/Projects/3-Advanced/Slack-Archiver.md index 53c70205..27566822 100644 --- a/Projects/3-Advanced/Slack-Archiver.md +++ b/Projects/3-Advanced/Slack-Archiver.md @@ -1,3 +1,9 @@ +--- +path: '/slack-archiver' +title: 'Slack Archiver' +tier: 'advanced' +--- + # Slack Archiver **Tier:** 3-Advanced @@ -25,15 +31,15 @@ development of this application. ## User Stories -- [ ] Allow the user to specify the channels to be archived. This includes both adding and removing channels from the list -- [ ] Only the owners of the Slack Team should be allowed to archive messages -- [ ] 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 -- [ ] Allow the user to copy and extracted channel to a file -- [ ] Archiving should be an automatic process. Unlike a Slack 'bot, no manual intervention should be required to start or stop and archive operation +- [ ] Allow the user to specify the channels to be archived. This includes both adding and removing channels from the list +- [ ] Only the owners of the Slack Team should be allowed to archive messages +- [ ] 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 +- [ ] Allow the user to copy and extracted channel to a file +- [ ] Archiving should be an automatic process. Unlike a Slack 'bot, no manual intervention should be required to start or stop and archive operation ## Bonus features -- [ ] Implement an API that allows an application to extract archived messages from the archive database +- [ ] Implement an API that allows an application to extract archived messages from the archive database ## Useful links and resources diff --git a/Projects/3-Advanced/SpellIt-App.md b/Projects/3-Advanced/SpellIt-App.md index a0d6c8f6..b0496650 100644 --- a/Projects/3-Advanced/SpellIt-App.md +++ b/Projects/3-Advanced/SpellIt-App.md @@ -1,3 +1,9 @@ +--- +path: '/spell-it-app' +title: 'Spell-It App' +tier: 'advanced' +--- + # Spell-It **Tier:** 3-Advanced @@ -11,33 +17,33 @@ recording of a word the user must then spell using the computer keyboard. ## User Stories -- [ ] User can click the 'Play' button to hear the word that's to be entered -- [ ] User can see letters displayed in the word input text box as they are - entered on the keyboard -- [ ] User can click the 'Enter' button to submit the word that has been - typed in the word input text box -- [ ] User can see a confirmation message when the correct word is typed -- [ ] User can see a message requesting the word be typed again when it is - spelled incorrectly -- [ ] User can see a tally of the number of correct spellings, total number - of words attempted, and a percentage of successful entries. +- [ ] User can click the 'Play' button to hear the word that's to be entered +- [ ] User can see letters displayed in the word input text box as they are + entered on the keyboard +- [ ] User can click the 'Enter' button to submit the word that has been + typed in the word input text box +- [ ] User can see a confirmation message when the correct word is typed +- [ ] User can see a message requesting the word be typed again when it is + spelled incorrectly +- [ ] User can see a tally of the number of correct spellings, total number + of words attempted, and a percentage of successful entries. ## Bonus features -- [ ] User can hear an confirmation sound when the word is correctly spelled -- [ ] User can hear a warning sound when the word is incorrectly spelled -- [ ] User can click the 'Hint' button to highlight the incorrect letters - in the word input text box -- [ ] User can press the 'Enter' key on the keyboard to submit a typed word - or click the 'Enter' button in the app window +- [ ] User can hear an confirmation sound when the word is correctly spelled +- [ ] User can hear a warning sound when the word is incorrectly spelled +- [ ] User can click the 'Hint' button to highlight the incorrect letters + in the word input text box +- [ ] User can press the 'Enter' key on the keyboard to submit a typed word + or click the 'Enter' button in the app window ## Useful links and resources -- [Texas Instruments Speak and Spell]() -- [Web Audio API](https://codepen.io/2kool2/pen/RgKeyp) -- [Click and Speak](https://codepen.io/shangle/pen/Wvqqzq) +- [Texas Instruments Speak and Spell]() +- [Web Audio API](https://codepen.io/2kool2/pen/RgKeyp) +- [Click and Speak](https://codepen.io/shangle/pen/Wvqqzq) ## Example projects -- [Speak N Spell on Google Play](https://play.google.com/store/apps/details?id=au.id.weston.scott.SpeakAndSpell&hl=en_US) -- [Word Wizard for iOS](https://itunes.apple.com/app/id447312716) +- [Speak N Spell on Google Play](https://play.google.com/store/apps/details?id=au.id.weston.scott.SpeakAndSpell&hl=en_US) +- [Word Wizard for iOS](https://itunes.apple.com/app/id447312716) diff --git a/Projects/3-Advanced/Survey-App.md b/Projects/3-Advanced/Survey-App.md index 100a99e2..4c69b777 100644 --- a/Projects/3-Advanced/Survey-App.md +++ b/Projects/3-Advanced/Survey-App.md @@ -1,3 +1,9 @@ +--- +path: '/survey-app' +title: 'Survey App' +tier: 'advanced' +--- + # Survey App **Tier:** 3-Advanced @@ -15,10 +21,10 @@ and present results. Users of this app are divided into two distinct roles, each having different requirements: -- _Survey Coordinators_ define and conduct surveys. This is an administrative - function not available to normal users. -- _Survey Respondents_ Complete surveys and view results. They have no - administrative privileges within the app. +- _Survey Coordinators_ define and conduct surveys. This is an administrative + function not available to normal users. +- _Survey Respondents_ Complete surveys and view results. They have no + administrative privileges within the app. Commercial survey tools include distribution functionality that mass emails surveys to Survey Respondents. For simplicity, this app assumes that surveys @@ -28,71 +34,71 @@ open for responses will be accessed from the app's web page. ### General -- [ ] Survey Coordinators and Survey Respondents can define, conduct, and - view surveys and survey results from a common website -- [ ] Survey Coordinators can login to the app to access administrative - functions, like defining a survey. +- [ ] Survey Coordinators and Survey Respondents can define, conduct, and + view surveys and survey results from a common website +- [ ] Survey Coordinators can login to the app to access administrative + functions, like defining a survey. ### Defining a Survey -- [ ] Survey Coordinator can define a survey containing 1-10 multiple choice - questions. -- [ ] Survey Coordinator can define 1-5 mutually exclusive selections to each - question. -- [ ] Survey Coordinator can enter a title for the survey. -- [ ] Survey Coordinator can click a 'Cancel' button to return to the home - page without saving the survey. -- [ ] Survey Coordinator can click a 'Save' button save a survey. +- [ ] Survey Coordinator can define a survey containing 1-10 multiple choice + questions. +- [ ] Survey Coordinator can define 1-5 mutually exclusive selections to each + question. +- [ ] Survey Coordinator can enter a title for the survey. +- [ ] Survey Coordinator can click a 'Cancel' button to return to the home + page without saving the survey. +- [ ] Survey Coordinator can click a 'Save' button save a survey. ### Conducting a Survey -- [ ] Survey Coordinator can open a survey by selecting a survey from a - list of previously defined surveys -- [ ] Survey Coordinators can close a survey by selecting it from a list of - open surveys -- [ ] Survey Respondent can complete a survey by selecting it from a list of - open surveys -- [ ] Survey Respondent can select responses to survey questions by clicking - on a checkbox -- [ ] Survey Respondents can see that a previously selected response will - automatically be unchecked if a different response is clicked. -- [ ] Survey Respondents can click a 'Cancel' button to return to the home - page without submitting the survey. -- [ ] Survey Respondents can click a 'Submit' button submit their responses - to the survey. -- [ ] Survey Respondents can see an error message if 'Submit' is clicked, - but not all questions have been responded to. +- [ ] Survey Coordinator can open a survey by selecting a survey from a + list of previously defined surveys +- [ ] Survey Coordinators can close a survey by selecting it from a list of + open surveys +- [ ] Survey Respondent can complete a survey by selecting it from a list of + open surveys +- [ ] Survey Respondent can select responses to survey questions by clicking + on a checkbox +- [ ] Survey Respondents can see that a previously selected response will + automatically be unchecked if a different response is clicked. +- [ ] Survey Respondents can click a 'Cancel' button to return to the home + page without submitting the survey. +- [ ] Survey Respondents can click a 'Submit' button submit their responses + to the survey. +- [ ] Survey Respondents can see an error message if 'Submit' is clicked, + but not all questions have been responded to. ### Viewing Survey Results -- [ ] Survey Coordinators and Survey Respondents can select the survey to - display from a list of closed surveys -- [ ] Survey Coordinators and Survey Respondents can view survey results as - in tabular format showing the number of responses for each of the possible - selections to the questions. +- [ ] Survey Coordinators and Survey Respondents can select the survey to + display from a list of closed surveys +- [ ] Survey Coordinators and Survey Respondents can view survey results as + in tabular format showing the number of responses for each of the possible + selections to the questions. ## Bonus features -- [ ] Survey Respondents can create a unique account in the app -- [ ] Survey Respondents can login to the app -- [ ] Survey Respondents cannot complete the same survey more than once -- [ ] Survey Coordinators and Survey Respondents can view graphical - representations of survey results (e.g. pie, bar, column, etc. charts) +- [ ] Survey Respondents can create a unique account in the app +- [ ] Survey Respondents can login to the app +- [ ] Survey Respondents cannot complete the same survey more than once +- [ ] Survey Coordinators and Survey Respondents can view graphical + representations of survey results (e.g. pie, bar, column, etc. charts) ## Useful links and resources Libraries for building surveys: -- [SurveyJS](https://surveyjs.io/Overview/Library/) +- [SurveyJS](https://surveyjs.io/Overview/Library/) Some commercial survey services include: -- [Survey Monkey](https://www.surveymonkey.com/) -- [Traversy](https://youtu.be/SSDED3XKz-0) -- [Typeform](https://www.typeform.com/) +- [Survey Monkey](https://www.surveymonkey.com/) +- [Traversy](https://youtu.be/SSDED3XKz-0) +- [Typeform](https://www.typeform.com/) ## Example projects [Javascript Questionnaire](https://codepen.io/amyfu/pen/oLChg) -[React Survey App](https://chamatt.github.io/survey-web-app/#/) ([Code](https://github.com/chamatt/survey-web-app)) \ No newline at end of file +[React Survey App](https://chamatt.github.io/survey-web-app/#/) ([Code](https://github.com/chamatt/survey-web-app))