gatsby frontend to display all ideas/projects with a page for each tier of app idea/project

pull/135/head
mcacciano 6 years ago
parent bd4684f148
commit b1cdc1e141

@ -1,3 +1,9 @@
---
path: '/bin2dec'
title: 'Bin2Dec'
tier: 'beginner'
---
# Bin2Dec # Bin2Dec
**Tier:** 1-Beginner **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 This challenge requires that the developer implementing it follow these
constraints: constraints:
- Arrays may not be used to contain the binary digits entered by the user - 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 - Determining the decimal equivalent of a particular binary digit in the
sequence must be calculated using a single mathematical function, for sequence must be calculated using a single mathematical function, for
example the natural logarithm. It's up to you to figure out which function example the natural logarithm. It's up to you to figure out which function
to use. to use.
## User Stories ## User Stories
- [ ] User can enter up to 8 binary digits in one input field - [ ] 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 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 views the results in a single output field containing the decimal (base 10) equivalent of the binary number that was entered
## Bonus features ## Bonus features
- [ ] User can enter a variable number of binary digits - [ ] User can enter a variable number of binary digits
## Useful links and resources ## Useful links and resources
@ -37,5 +43,5 @@ constraints:
Try not to view this until you've developed your own solution: 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 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 converter using React](https://github.com/email2vimalraj/Bin2Dec)

@ -1,3 +1,9 @@
---
path: '/border-radius-previewer'
title: 'Border-radius Previewer'
tier: 'beginner'
---
# Border-radius Previewer # Border-radius Previewer
**Tier:** 1-Beginner **Tier:** 1-Beginner
@ -6,21 +12,21 @@ The border-radius property can have multiple values changed. Preview how the sha
## User Stories ## User Stories
- [ ] User can see a box which has a `border-radius` property applied to it - [ ] 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 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 copy the resulting CSS to the clipboard
## Bonus features ## 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 ## Useful links and resources
- [CSS3 Borders](https://www.w3schools.com/css/css3_borders.asp) - [CSS3 Borders](https://www.w3schools.com/css/css3_borders.asp)
- [Copy to Clipboard](https://www.w3schools.com/howto/howto_js_copy_clipboard.asp) - [Copy to Clipboard](https://www.w3schools.com/howto/howto_js_copy_clipboard.asp)
## Example projects ## Example projects
- [9elements Fancy Border Radius](https://9elements.github.io/fancy-border-radius/) - [9elements Fancy Border Radius](https://9elements.github.io/fancy-border-radius/)
- [Border Radius](https://border-radius.com/) - [Border Radius](https://border-radius.com/)
- [CSS Gradient Border](https://codepen.io/thebabydino/pen/zbqPVd) - [CSS Gradient Border](https://codepen.io/thebabydino/pen/zbqPVd)

@ -1,3 +1,9 @@
---
path: '/csv-2-json'
title: 'CSV2JSON'
tier: 'beginner'
---
# CSV2JSON # CSV2JSON
**Tier:** 1-Beginner **Tier:** 1-Beginner
@ -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 challenge will also give you practice in modifying existing applications to
add new functionality. add new functionality.
### Constraints ### ### Constraints
- Read the user stories below carefully. Some of the functionality created - 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 - You may not use any libraries or packages designed to perform this type of
conversion. conversion.
- Nested JSON structures are not supported. - Nested JSON structures are not supported.
## User Stories ## User Stories
- [ ] User can paste CSV syntax into a 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 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 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 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 paste JSON syntax into a 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 'Convert to CSV' button to validate the JSON text box and convert it to CSV
- [ ] User can click a 'Clear' button to clear the contents of both the JSON and CSV text boxes. - [ ] 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 ## Bonus features
- [ ] User can enter the path to the CSV file on the local file system in a text box - [ ] 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 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 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 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 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 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 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 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 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 see a warning message if the JSON text box is empty or if the save operation failed.
## Useful links and resources ## Useful links and resources

@ -1,3 +1,9 @@
---
path: '/calculator'
title: 'Calculator'
tier: 'beginner'
---
# Calculator # Calculator
**Tier:** 1-Beginner **Tier:** 1-Beginner
@ -17,34 +23,33 @@ mobile device to better understand basic functionality and edge cases.
## User Stories ## User Stories
- [ ] User can see a display showing the current number entered or the - [ ] User can see a display showing the current number entered or the
result of the last operation. result of the last operation.
- [ ] User can see an entry pad containing buttons for the digits 0-9, - [ ] User can see an entry pad containing buttons for the digits 0-9,
operations - '+', '-', '/', and '=', a 'C' button (for clear), and an 'AC' operations - '+', '-', '/', and '=', a 'C' button (for clear), and an 'AC'
button (for clear all). button (for clear all).
- [ ] User can enter numbers as sequences up to 8 digits long by clicking on - [ ] 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. 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 - [ ] User can click on an operation button to display the result of that
operation on: operation on:
* the result of the preceding operation and the last number entered OR _ the result of the preceding operation and the last number entered OR
* the last two numbers entered OR _ the last two numbers entered OR \* the last number entered
* the last number entered - [ ] User can click the 'C' button to clear the last number or the last
- [ ] 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
operation. If the users last entry was an operation the display will be updated to the value that preceded it.
updated to the value that preceded it. - [ ] User can click the 'AC' button to clear all internal work areas and
- [ ] User can click the 'AC' button to clear all internal work areas and to set the display to 0.
to set the display to 0. - [ ] User can see 'ERR' displayed if any operation would exceed the
- [ ] User can see 'ERR' displayed if any operation would exceed the 8 digit maximum.
8 digit maximum.
## Bonus features ## Bonus features
- [ ] User can click a '+/-' button to change the sign of the number that is - [ ] User can click a '+/-' button to change the sign of the number that is
currently displayed. currently displayed.
- [ ] User can see a decimal point ('.') button on the entry pad to that - [ ] 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 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 be carried out to the maximum number of decimal places entered for any one
number. number.
## Useful links and resources ## Useful links and resources

@ -1,3 +1,9 @@
---
path: '/my-calendar'
title: 'My Calendar'
tier: 'beginner'
---
# My calendar # My calendar
**Tier:** 3-Advanced **Tier:** 3-Advanced

@ -1,3 +1,9 @@
---
path: '/cause-effect'
title: 'CauseEffect'
tier: 'beginner'
---
# CauseEffect # CauseEffect
**Tier:** 1-Beginner **Tier:** 1-Beginner
@ -19,37 +25,37 @@ page.
This challenge requires that the developer implementing it follow these This challenge requires that the developer implementing it follow these
constraints: constraints:
- You are responsible for creating your own test data. Use a hardcoded - You are responsible for creating your own test data. Use a hardcoded
Javascript object to define your test data (see below). Javascript object to define your test data (see below).
- Use only native HTML/CSS/Javascript in your first version of this app - Use only native HTML/CSS/Javascript in your first version of this app
- You may use other packages or libraries when implementing subsequent - You may use other packages or libraries when implementing subsequent
versions. versions.
## User Stories ## User Stories
- [ ] User can see a list of person names arranged vertically in a summary - [ ] User can see a list of person names arranged vertically in a summary
pane on the page. pane on the page.
- [ ] User can click on a name in the list to update an adjacent pane on the - [ ] 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 page with that individuals full name, address, telephone number, and
birthday. birthday.
- [ ] User can click on another name in the list to refresh the detail pane - [ ] User can click on another name in the list to refresh the detail pane
with that individuals information. with that individuals information.
## Bonus features ## Bonus features
- [ ] User can see the person name in the summary pane highlighted when the - [ ] User can see the person name in the summary pane highlighted when the
cursor is hovered over it. cursor is hovered over it.
- [ ] User can see the person name in the summary pane highlighted - [ ] 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 using a selection effect (color, size, etc.) when it is clicked. This is a
different effect from the hover effect different effect from the hover effect
- [ ] User can see the selection effect removed from a name in the summary - [ ] User can see the selection effect removed from a name in the summary
list when a new name is clicked. list when a new name is clicked.
## Useful links and resources ## Useful links and resources
- [DOM Events](https://developer.mozilla.org/en-US/docs/Web/API/Event) - [DOM Events](https://developer.mozilla.org/en-US/docs/Web/API/Event)
- Consider defining your test data in a JavaScript object having a format - Consider defining your test data in a JavaScript object having a format
such as this: such as this:
``` ```
const people = [ const people = [

@ -1,3 +1,9 @@
---
path: '/christmas-lights'
title: 'Christmas Lights'
tier: 'beginner'
---
# Christmas Lights # Christmas Lights
**Tier:** 1-Beginner **Tier:** 1-Beginner
@ -12,21 +18,21 @@ displayed during the Christmas Holidays.
## User Stories ## User Stories
- [ ] User can press a button to start and stop the display - [ ] 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 change the interval of time controlling the change in intensity
## Bonus features ## Bonus features
- [ ] User can select the color used to fill each circle - [ ] User can select the color used to fill each circle
- [ ] User can specify the intensity value - [ ] User can specify the intensity value
- [ ] User can change the size of any circle in the row - [ ] 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 - [ ] User can specify the number of rows to be included in the display. From
one to seven rows can be chosen one to seven rows can be chosen
## Useful links and resources ## 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) - [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) - [Adafruit LED Matrix](https://cdn-shop.adafruit.com/970x728/1487-02.jpg)
## Example projects ## Example projects

@ -1,3 +1,9 @@
---
path: '/color-cycle'
title: 'ColorCycle'
tier: 'beginner'
---
# ColorCycle # ColorCycle
**Tier:** 1-Beginner **Tier:** 1-Beginner
@ -14,23 +20,23 @@ an RGB color specification (e.g. `#000000` color code).
## User Stories ## User Stories
- [ ] User can specify a starting fill color as a six hexadecimal standard - [ ] User can specify a starting fill color as a six hexadecimal standard
CSS color code in three individual components of two digits each - red, CSS color code in three individual components of two digits each - red,
blue, and green blue, and green
- [ ] User can specify an increment value for each color component that will - [ ] User can specify an increment value for each color component that will
be added to that component every .25 second be added to that component every .25 second
- [ ] User can see the box containing the fill color change every .25 seconds - [ ] User can see the box containing the fill color change every .25 seconds
- [ ] User can only change the color components and their increments when - [ ] User can only change the color components and their increments when
the app is stopped the app is stopped
- [ ] User can start and stop the fill operation using a button whose name - [ ] User can start and stop the fill operation using a button whose name
changes to 'Start' when stopped and 'Stop' when started changes to 'Start' when stopped and 'Stop' when started
- [ ] User will receive an warning if something other than hexadecimal digits - [ ] User will receive an warning if something other than hexadecimal digits
are entered for the color components are entered for the color components
## Bonus features ## Bonus features
- [ ] User can change the time interval between color changes - [ ] 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 specify the color encoding format used from RGB to another format like HSL
## Useful links and resources ## Useful links and resources

@ -1,3 +1,9 @@
---
path: '/countdown-timer'
title: 'Countdown Timer'
tier: 'beginner'
---
# Countdown Timer # Countdown Timer
**Tier:** 1-Beginner **Tier:** 1-Beginner
@ -14,43 +20,43 @@ event.
### Constraints ### Constraints
- Use only builtin language functions for your calculations rather than relying - Use only builtin language functions for your calculations rather than relying
on a library or package like [MomentJS](https://momentjs.com/). This assumes, 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 of course, that the language of your choice has adequate date and time
manipulation functions built in. manipulation functions built in.
- You may not use any code generators such as the - You may not use any code generators such as the
[Counting Down To](https://countingdownto.com/) site. You should develop your [Counting Down To](https://countingdownto.com/) site. You should develop your
own original implementation. own original implementation.
## User Stories ## User Stories
- [ ] User can see an event input box containing an event name field, an - [ ] User can see an event input box containing an event name field, an
date field, an optional time, and a 'Start' button. date field, an optional time, and a 'Start' button.
- [ ] User can define the event by entering its name, the date it is - [ ] 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 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 omitted it is assumed to be at Midnight on the event date in the local time
zone. zone.
- [ ] User can see a warning message if the event name is blank. - [ ] 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 - [ ] User can see a warning message if the event date or time are incorrectly
entered. entered.
- [ ] User can see a warning message if the time until the event data and time - [ ] 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. 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 - [ ] 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. displaying the days, hours, minutes, and seconds until the event takes place.
- [ ] User can see the elements in the countdown timer automatically - [ ] User can see the elements in the countdown timer automatically
decrement. For example, when the remaining seconds count reaches 0 the remaining 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. 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 ## Bonus features
- [ ] User can save the event so that it persists across sessions - [ ] User can save the event so that it persists across sessions
- [ ] User can see an alert when the event is reached - [ ] User can see an alert when the event is reached
- [ ] User can specify more than one event. - [ ] User can specify more than one event.
- [ ] User can see a countdown timers for each event that has been defined. - [ ] User can see a countdown timers for each event that has been defined.
## Useful links and resources ## Useful links and resources
- Images of analog tube-based countdown timers can be found - Images of analog tube-based countdown timers can be found
[here](https://nixieshop.com/) [here](https://nixieshop.com/)
- [`clearInterval` MDN](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval) - [`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) - [`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) - [Date MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date)

@ -1,3 +1,9 @@
---
path: '/dollars-to-cents'
title: 'Dollars To Cents'
tier: 'beginner'
---
# Dollars To Cents # Dollars To Cents
**Tier:** 1-Beginner **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. 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 Stories
- [ ] User can enter a dollar value - [ ] User can enter a dollar value
- [ ] User can see the total cents from the converted dollar value - [ ] User can see the total cents from the converted dollar value
## Bonus features ## 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 ## Useful links and resources
- [Math functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math) - [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) - [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/) - [Money values in JavaScript](https://timleland.com/money-in-javascript/)
## Example projects ## 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)

@ -1,3 +1,9 @@
---
path: '/dynamic-css-variables'
title: 'Dynamic CSS Variables'
tier: 'beginner'
---
# Dynamic CSS Variables # Dynamic CSS Variables
**Tier:** 1-Beginner **Tier:** 1-Beginner
@ -17,31 +23,31 @@ changing them from within the app.
## User Stories ## User Stories
- [ ] User can see three two boxes to be used to enter a User ID and Password - [ ] 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 along with 'Cancel' and 'Login' buttons underneath them. The default background
color of the text boxes is white. color of the text boxes is white.
- [ ] User can enter a user id and password into the text boxes. - [ ] 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 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 - [ ] 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 spaces and the background color of the empty text box will change to light
yellow. yellow.
- [ ] User can see a warning message if the user id doesn't match 'testuser' - [ ] 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. 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' - [ ] 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. 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 - [ ] User can click the 'Cancel' button to clear the text boxes and reset
their background colors to white. their background colors to white.
## Bonus features ## Bonus features
- [ ] User can see the color of the text box border change when an error is - [ ] User can see the color of the text box border change when an error is
detected detected
- [ ] User can see the size and font of the contents of the text box change - [ ] User can see the size and font of the contents of the text box change
when an error is detected. when an error is detected.
## Useful links and resources ## 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) - [CSSStyleDeclaration (MDN)](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration)
## Example projects ## Example projects

@ -1,3 +1,9 @@
---
path: '/your-first-db-app'
title: 'Your First DB App'
tier: 'beginner'
---
# Your First DB App # Your First DB App
**Tier:** 1-Beginner **Tier:** 1-Beginner
@ -15,20 +21,21 @@ cross-session persistance.
### Requirements & Constraints ### Requirements & Constraints
- The primary use case for a browser based database is to maintain state or - 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 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 for temporary data. For example, data retrieved from a server that must be
reformatted or cleansed before it's presented to the user. reformatted or cleansed before it's presented to the user.
- It is important to keep in mind that since the client-side browser - It is important to keep in mind that since the client-side browser
environment cannot be secured you should not maintain any confidential or environment cannot be secured you should not maintain any confidential or
personal identifying information (PII) in a browser based database. personal identifying information (PII) in a browser based database.
- The following Javascript class is provided with the functionality to allow - 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 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 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 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 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. also need to add a `queryAllRows` function to the Customer class.
``` ```
class Customer { class Customer {
constructor(dbName) { constructor(dbName) {
@ -135,59 +142,57 @@ const loadDB = () => {
} }
``` ```
## User Stories ## User Stories
- [ ] User can see a web page containing a control panel containing three - [ ] User can see a web page containing a control panel containing three
buttons - 'Load DB', 'Query DB', and 'Clear DB'. buttons - 'Load DB', 'Query DB', and 'Clear DB'.
- [ ] User can see a notification panel where status messages will be posted. - [ ] User can see a notification panel where status messages will be posted.
- [ ] User can see a scrollable log panel where execution details describing - [ ] User can see a scrollable log panel where execution details describing
the apps operation and interface with the Customer instance will be posted. 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 - [ ] User can see a running history of notification panel messages in the log
panel. panel.
- [ ] User can see a scrollable query results area where retrieved customer - [ ] User can see a scrollable query results area where retrieved customer
data will be displayed. data will be displayed.
- [ ] User can click the 'Load DB' button to populate the database with data. - [ ] 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 The 'Load DB' button in your UI should be hooked to the `loadDB` event handler
that's provided. that's provided.
- [ ] User can see a message displayed in the notification panel when the - [ ] User can see a message displayed in the notification panel when the
data load operation starts and ends. data load operation starts and ends.
- [ ] User can click the 'Query DB' button to list all customers in the query - [ ] 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` results area. The 'Query DB' button in your UI should be hooked to a `queryDB`
event handler you will add to the program. event handler you will add to the program.
- [ ] User can see a message in the notification panel when the query starts - [ ] User can see a message in the notification panel when the query starts
and ends. and ends.
- [ ] User can see a message in the query results area if there are no rows - [ ] User can see a message in the query results area if there are no rows
to display. to display.
- [ ] User can click on the 'Clear DB' button to remove all rows from the - [ ] 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` database. The 'Clear DB' button in your UI should be hooked to the `clearDB`
event handler that's provided. event handler that's provided.
- [ ] User can see a message in the notification panel when the clear - [ ] User can see a message in the notification panel when the clear
operation starts and ends. operation starts and ends.
## Bonus features ## Bonus features
- [ ] User can see buttons enabled and disabled according to the following - [ ] User can see buttons enabled and disabled according to the following
table. table.
| State | Load DB | Query DB | Clear DB | | State | Load DB | Query DB | Clear DB |
|---------------------|----------|----------|----------| |---------------------|----------|----------|----------|
| Initial App display | enabled | enabled | disabled | | Initial App display | enabled | enabled | disabled |
| Load DB clicked | disabled | enabled | enabled | | Load DB clicked | disabled | enabled | enabled |
| Query DB clicked | disabled | enabled | enabled | | Query DB clicked | disabled | enabled | enabled |
| Clear DB clicked | enabled | enabled | disabled | | Clear DB clicked | enabled | enabled | disabled |
- [ ] User can see additional Customer data fields added to those included - [ ] 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 in the code provided. Developer should add date of last order and total sales
for the year. for the year.
- [ ] Developer should conduct a retrospection on this project: - [ ] Developer should conduct a retrospection on this project:
- What use cases can you see for using IndexedDB in your frontend apps? - 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 - What advantages and disadvantages can you see over using a file or
local storage? 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). for your app. (Hint: 100% yes or no is not a valid answer).
## Useful links and resources ## Useful links and resources
- [IndexedDB Concepts (MDN)](http://tinyw.in/7TIr) - [IndexedDB Concepts (MDN)](http://tinyw.in/7TIr)

@ -1,3 +1,9 @@
---
path: '/flip-image'
title: 'FlipImage'
tier: 'beginner'
---
# FlipImage # FlipImage
**Tier:** 1-Beginner **Tier:** 1-Beginner
@ -16,19 +22,19 @@ Image packages and libraries are not allowed.
## User Stories ## User Stories
- [ ] User can see a pane containing a single image repeated in a 2x2 matrix - [ ] 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 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 ## Bonus features
- [ ] User can change the default image by entering the URL of a different image in an input field - [ ] 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 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 see an error message if the new images URL is not found
## Useful links and resources ## Useful links and resources
- [How to Flip an Image](https://www.w3schools.com/howto/howto_css_flip_image.asp) - [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) - [Create a CSS Flipping Animatin](https://davidwalsh.name/css-flip)
## Example projects ## Example projects

@ -1,3 +1,9 @@
---
path: '/github-status'
title: 'Github Status'
tier: 'beginner'
---
# GitHub Status # GitHub Status
**Tier:** 1-Beginner **Tier:** 1-Beginner
@ -17,18 +23,18 @@ to develop it using your language of choice!
## User Stories ## User Stories
- [ ] User can see the current status for GitHub Git operations, API Requests, - [ ] User can see the current status for GitHub Git operations, API Requests,
Operational Issues, PRs, Dashboard, & Projects, Operational Notifications, Operational Issues, PRs, Dashboard, & Projects, Operational Notifications,
Operational Gists, and Operational GitHub Pages as a list in the main app Operational Gists, and Operational GitHub Pages as a list in the main app
window. window.
- [ ] User can retrieve the most recent status from the GitHub Status web - [ ] User can retrieve the most recent status from the GitHub Status web
site by clicking a 'Get Status' button. site by clicking a 'Get Status' button.
## Bonus features ## Bonus features
- [ ] User can see any of the GitHub components that are not in 'Operational' - [ ] User can see any of the GitHub components that are not in 'Operational'
status highlighted by a different color, background animation, or any other status highlighted by a different color, background animation, or any other
technique to make it stand out. Use your imagination! technique to make it stand out. Use your imagination!
## Useful links and resources ## Useful links and resources
@ -37,9 +43,10 @@ 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 JSON (MDN)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON)
- [Javascript Object Notation](https://json.org/) - [Javascript Object Notation](https://json.org/)
- Hint! You can use the following code to display the JSON for the GitHub Status - 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 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 output to determine which JSON element contain the status information you'll
need to develop this app. need to develop this app.
``` ```
ghstatus.js ghstatus.js

@ -1,3 +1,9 @@
---
path: '/hello-app'
title: 'Hello App'
tier: 'beginner'
---
# Hello # Hello
**Tier:** 1-Beginner **Tier:** 1-Beginner
@ -21,45 +27,45 @@ language.
### Constraints ### Constraints
- Developers should use the [IP-API](http://ip-api.com/docs/api:json) service - Developers should use the [IP-API](http://ip-api.com/docs/api:json) service
to obtain the users country code. to obtain the users country code.
- Developers should use the - Developers should use the
[Fourtonfish](https://www.fourtonfish.com/hellosalut/hello/) service to [Fourtonfish](https://www.fourtonfish.com/hellosalut/hello/) service to
obtain the greeting in the users native language by passing the country code. obtain the greeting in the users native language by passing the country code.
## User Stories ## User Stories
- [ ] User can see a mock login panel containing a user name text input field, - [ ] User can see a mock login panel containing a user name text input field,
a password text input field, and 'Login' and 'Logout' buttons. 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 login name into the User Name field.
- [ ] User can enter a mock password into the Password field. Input should - [ ] 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 be masked so the user see's asterisks (`*`) for each character that is entered
rather than the plaintext password. rather than the plaintext password.
- [ ] User can click the 'Login' button to perform a mock login. - [ ] 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 - [ ] 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. 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: - [ ] User can see a login acknowledgement message in the format:
`<hello-in-native-language> <user-name> you have successfully logged in!` `<hello-in-native-language> <user-name> you have successfully logged in!`
- [ ] User can click the 'Logout' button to clear the text input fields and - [ ] User can click the 'Logout' button to clear the text input fields and
any previous messages. any previous messages.
- [ ] User can see a new message when successfully logged out in the format: - [ ] User can see a new message when successfully logged out in the format:
`Have a great day <user-name>!` `Have a great day <user-name>!`
## Bonus features ## Bonus features
- [ ] User can see an additional text input field for a country code which - [ ] 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: will be used to override the country code obtained through geolocation. Hint:
this is a great feature for testing your app. this is a great feature for testing your app.
- [ ] User can see additional geolocation information after logging on that - [ ] User can see additional geolocation information after logging on that
includes at least the local IP address, city, region, country name, zip code, includes at least the local IP address, city, region, country name, zip code,
longitude, latitude, and timezone. longitude, latitude, and timezone.
## Useful links and resources ## Useful links and resources
- [Form Follows Function (Wikipedia)](https://en.wikipedia.org/wiki/Form_follows_function) - [Form Follows Function (Wikipedia)](https://en.wikipedia.org/wiki/Form_follows_function)
- [Personalization (Wikipedia)](https://en.wikipedia.org/wiki/Personalization) - [Personalization (Wikipedia)](https://en.wikipedia.org/wiki/Personalization)
- [Fourtonfish](https://www.fourtonfish.com/hellosalut/hello/) - [Fourtonfish](https://www.fourtonfish.com/hellosalut/hello/)
- [IP-API](http://ip-api.com/docs/api:json) - [IP-API](http://ip-api.com/docs/api:json)
## Example projects ## Example projects

@ -1,3 +1,9 @@
---
path: '/iot-mailbox-simulator'
title: 'IOT Mailbox Simulator'
tier: 'beginner'
---
# IOT Mailbox Simulator # IOT Mailbox Simulator
**Tier:** 1-Beginner **Tier:** 1-Beginner
@ -11,13 +17,14 @@ on one another.
### Requirements & Constraints ### Requirements & Constraints
- Even though this app is specified using Javascript concepts and terminology - 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 - 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 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 (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 shouldn't exceed the time it normally takes to open or close the door or you
might miss a delivery! might miss a delivery!
``` ```
/** /**
* Monitor the light levels inside an IOT enabled snail mailbox to detect * Monitor the light levels inside an IOT enabled snail mailbox to detect
@ -80,34 +87,34 @@ class IOTMailbox {
## User Stories ## User Stories
- [ ] User can see a web page containing a control panel containing three - [ ] User can see a web page containing a control panel containing three
buttons - 'Start Monitoring', 'Stop Monitoring', and 'Reset'. buttons - 'Start Monitoring', 'Stop Monitoring', and 'Reset'.
- [ ] User can see a notification panel where the mailbox status will be posted. - [ ] User can see a notification panel where the mailbox status will be posted.
- [ ] User can see a scrollable log panel where execution details describing - [ ] User can see a scrollable log panel where execution details describing
the apps operation and interface with the IOTMailbox instance will be posted. the apps operation and interface with the IOTMailbox instance will be posted.
- [ ] User can click the 'Start Monitoring' button to begin receiving state - [ ] User can click the 'Start Monitoring' button to begin receiving state
notifications from the mailbox. 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 when monitoring starts.
- [ ] User can see a message added to the log panel for light level passed - [ ] 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 through the callback function. This should include the numerical light level
and whether the door is open or closed. and whether the door is open or closed.
- [ ] User can see a message added to the notification panel when the door has - [ ] User can see a message added to the notification panel when the door has
been opened. been opened.
- [ ] User can click the 'Stop Monitoring' button to stop receiving state - [ ] User can click the 'Stop Monitoring' button to stop receiving state
notifications from the mailbox. notifications from the mailbox.
- [ ] User can see a message added to the log panel when monitoring stops. - [ ] User can see a message added to the log panel when monitoring stops.
## Bonus features ## Bonus features
- [ ] User can see the 'Start Monitoring' button disabled until monitoring is - [ ] User can see the 'Start Monitoring' button disabled until monitoring is
stopped. stopped.
- [ ] User can see the 'Stop Monitoring' button disabled until monitoring is - [ ] User can see the 'Stop Monitoring' button disabled until monitoring is
started. started.
- [ ] User can see an field in the control panel allowing the length of the - [ ] User can see an field in the control panel allowing the length of the
monitoring interval to be specified. monitoring interval to be specified.
- [ ] User can see a message added to the notification panel if the door is - [ ] User can see a message added to the notification panel if the door is
left open. left open.
- [ ] User can hear an audible alert when the door is opened. - [ ] User can hear an audible alert when the door is opened.
## Useful links and resources ## Useful links and resources

@ -1,3 +1,9 @@
---
path: '/json-2-csv-app'
title: 'JSON2CSV App'
tier: 'beginner'
---
# JSON2CSV # JSON2CSV
**Tier:** 1-Beginner **Tier:** 1-Beginner
@ -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 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. 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 - 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 - If you choose to implement this in JavaScript don't use complicated looping
in your first implementation. Instead, use `Object.keys()` and `Object.values` in your first implementation. Instead, use `Object.keys()` and `Object.values`
to generate CSV for the header and data rows. to generate CSV for the header and data rows.
- Nested JSON structures are not supported. - Nested JSON structures are not supported.
## User Stories ## User Stories
- [ ] User can paste JSON syntax into a text box - [ ] 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 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 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 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 click a 'Clear' button to clear the contents of both the JSON and CSV text boxes.
## Bonus features ## Bonus features
- [ ] User can enter the path to the JSON file on the local file system in a text box - [ ] 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 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 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 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 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 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 convert CSV data to JSON. See [CSV2JSON](./CSV2JSON-App.md)
## Useful links and resources ## Useful links and resources

@ -1,20 +1,27 @@
---
path: '/javascript-validation-with-regex'
title: 'Javascript Validation With Regex'
tier: 'beginner'
---
# Javascript Validation With Regex # Javascript Validation With Regex
**Tier:** 1-Beginner **Tier:** 1-Beginner
In this challenge, you'd create a javascript validation script to validate the inputs entered by a user using RegEx. 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](<http://regexlib.com/(X(1)A(GijS7qxVy-6Gyc4cweUyFoK4ZvRn2WnlOe8SSKuq9sT7ps-2nbiTmZZMTCn_rFk4-mNoGnYL-DPU8pJhmNNOtkP-syqWE4WO_1aVt4bPa5nTsQPQe6VRAALnm6QW3YIWbYkVS78JFbZN39vmMI1UYiWlHXKwNMB99WjsZOn0qc_8dcN0unp2KMOBw0P__3OH0))/CheatSheet.aspx?AspxAutoDetectCookieSupport=1>) for support
For this project, there'd be three required inputs for validation: 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 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 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). - 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 Stories
- [ ] User should be notified of any invalid inputs by error messages displayed on the form. - [ ] 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. - [ ] The submit button on the form would never be executed until all entries are validated.
## Useful links and resources ## Useful links and resources

@ -1,3 +1,9 @@
---
path: '/key-value-app'
title: 'Key Value App'
tier: 'beginner'
---
# Key Value # Key Value
**Tier:** 1-Beginner **Tier:** 1-Beginner
@ -15,20 +21,20 @@ time a key is pressed on the keyboard.
## User Stories ## User Stories
- [ ] User can see a display panel containing a text area where the key value - [ ] 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 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, indicators related to the keys on the keyboard - alt key, control key,
meta key, and shift key. meta key, and shift key.
- [ ] User can see the key code and key value displayed in the display panel - [ ] User can see the key code and key value displayed in the display panel
corresponding to the key when it is pressed. corresponding to the key when it is pressed.
- [ ] User can see the appropriate indicator change from 'False' to 'True' - [ ] User can see the appropriate indicator change from 'False' to 'True'
when the alt, control, meta, or shift key is pressed. when the alt, control, meta, or shift key is pressed.
## Bonus features ## Bonus features
- [ ] User can hear a unique tone played 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 - [ ] User can see the background color of the key code and value change when
a key is pressed. a key is pressed.
## Useful links and resources ## Useful links and resources

@ -1,3 +1,9 @@
---
path: '/lorem-ipsum-generator'
title: 'Lorem Ipsum Generator'
tier: 'beginner'
---
# Lorem Ipsum Generator # Lorem Ipsum Generator
**Tier:** 1-Beginner **Tier:** 1-Beginner
@ -7,8 +13,8 @@ This app should generate passages of lorem ipsum text suitable for use as placeh
## User Stories ## User Stories
- [ ] User can type into an input field the number of paragraphs of lorem ipsum to be generated - [ ] 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 - [ ] Use can see the generated paragraphs of lorem ipsum and is able to copy them
## Trello Board ## Trello Board
@ -16,9 +22,9 @@ You can track your progress by cloning this [Trello Board](https://trello.com/b/
## Useful links and resources ## Useful links and resources
- [lorem-ipsum npm package](https://www.npmjs.com/package/lorem-ipsum) - [lorem-ipsum npm package](https://www.npmjs.com/package/lorem-ipsum)
- [lorem-ipsum CDN](https://www.jsdelivr.com/package/npm/lorem-ipsum) - [lorem-ipsum CDN](https://www.jsdelivr.com/package/npm/lorem-ipsum)
## Example projects ## Example projects
- [Lipsum.com](https://www.lipsum.com/) - [Lipsum.com](https://www.lipsum.com/)

@ -1,3 +1,9 @@
---
path: '/notes-app'
title: 'Notes App'
tier: 'beginner'
---
# Notes App # Notes App
**Tier:** 1-Beginner **Tier:** 1-Beginner
@ -6,24 +12,24 @@ Create and store your notes for later purpose!
## User Stories ## User Stories
- [ ] User can create a note - [ ] User can create a note
- [ ] User can edit a note - [ ] User can edit a note
- [ ] User can delete 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 - [ ] When closing the browser window the notes will be stored and when the User returns, the data will be retrieved
## Bonus features ## Bonus features
- [ ] User can create and edit a note in Markdown format. On save it will convert Markdown to HTML - [ ] 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 see the date when he created the note
## Useful links and resources ## Useful links and resources
- [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) - [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage)
- [Markdown Guide](https://www.markdownguide.org/basic-syntax/) - [Markdown Guide](https://www.markdownguide.org/basic-syntax/)
- [Marked - A markdown parser](https://github.com/markedjs/marked) - [Marked - A markdown parser](https://github.com/markedjs/marked)
## Example projects ## Example projects
- [Markdown Notes built with Angular on Codepen](https://codepen.io/nickmoreton/full/gbyygq) - [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 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 7 and bootstrap 4](https://github.com/omdnaik/angular-ui)

@ -1,3 +1,9 @@
---
path: '/pearson-regression'
title: 'Pearson Regression'
tier: 'beginner'
---
# Pearson Regression # Pearson Regression
**Tier:** 1-Beginner **Tier:** 1-Beginner
@ -26,31 +32,31 @@ set of car prices this would let the user test whether or not they are related
## User Stories ## User Stories
- [ ] User can see an input panel with two input fields allowing entry of `x` - [ ] User can see an input panel with two input fields allowing entry of `x`
and `y` coordinates, and 'Add' and 'Calculate' buttons. and `y` coordinates, and 'Add' and 'Calculate' buttons.
- [ ] User can enter numbers into these boxes where `x` and `y` are observations - [ ] User can enter numbers into these boxes where `x` and `y` are observations
from the two data sets. from the two data sets.
- [ ] User can click the 'Add' button to add the `x` and `y` to a tabular - [ ] User can click the 'Add' button to add the `x` and `y` to a tabular
output area listing the pairs of observations. output area listing the pairs of observations.
- [ ] User can see and error message if either of the two input fields are - [ ] User can see and error message if either of the two input fields are
empty or do not contain valid real numbers. empty or do not contain valid real numbers.
- [ ] User can see the 'Calculate' button is disabled until errors have been - [ ] User can see the 'Calculate' button is disabled until errors have been
corrected. corrected.
- [ ] User can click the 'Calculate' button to perform the regression analysis - [ ] User can click the 'Calculate' button to perform the regression analysis
and to display its results. and to display its results.
- [ ] User can see results of the calculation which include: - [ ] User can see results of the calculation which include:
- Arithmetic means for both the `x` and `y` observations - Arithmetic means for both the `x` and `y` observations
- Standard deviations 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: - Pearson correlation coefficient with one of the following interpretations:
- No correlation - No correlation
- Neutral - Neutral
- Some correlation - Some correlation
## Bonus features ## Bonus features
- [ ] User can see a scatter plot of the observations - [ ] User can see a scatter plot of the observations
- [ ] User can upload observations from a file on the local machine. - [ ] 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 regression line overlaying the scatter plot
## Useful links and resources ## Useful links and resources

@ -1,3 +1,9 @@
---
path: '/pomodoro-clock'
title: 'Pomodoro Clock'
tier: 'beginner'
---
# Pomodoro Clock # Pomodoro Clock
**Tier:** 1-Beginner **Tier:** 1-Beginner
@ -6,23 +12,23 @@ The Pomodoro Technique is a time management method developed by Francesco Cirill
## User Stories ## User Stories
- [ ] User can see a timer for 25 minutes - the **working** session - [ ] 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 - [ ] 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 _start_ / _pause_, _stop_ and _reset_ the timers
## Bonus features ## Bonus features
- [ ] User can hear a sound playing when the timer hits `00:00` - denoting that the session has ended - [ ] 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 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 set a **long break** session of 10 minutes. This will be activated every 4th **break** session
## Useful links and resources ## 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 ## Example projects
- [Joe Weaver's example](https://codepen.io/JoeWeaver/pen/bLbbxK) - [Joe Weaver's example](https://codepen.io/JoeWeaver/pen/bLbbxK)
- [FreeCodeCamp Pomodoro Clock example](https://codepen.io/freeCodeCamp/full/XpKrrW) - [FreeCodeCamp Pomodoro Clock example](https://codepen.io/freeCodeCamp/full/XpKrrW)
- [A desktop pomodoro app for menubar/tray.](https://github.com/amitmerchant1990/pomolectron) - [A desktop pomodoro app for menubar/tray.](https://github.com/amitmerchant1990/pomolectron)
- [Sheri Richardson's example](https://srd-pomodoro-timer.netlify.com/) - [Sheri Richardson's example](https://srd-pomodoro-timer.netlify.com/)

@ -1,3 +1,9 @@
---
path: '/product-landing-page'
title: 'Product Landing Page'
tier: 'beginner'
---
# Product Landing Page # Product Landing Page
**Tier:** 1-Beginner **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. 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 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 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 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 a contact section (a text with the email)
## Bonus features ## Bonus features
These will cover the functional part of the project. These will cover the functional part of the project.
- [ ] User can see a FAQ section - [ ] User can see a FAQ section
- [ ] User can contact the staff members via a contact form - [ ] User can contact the staff members via a contact form
- [ ] User can sign up to receive notifications about the product - [ ] User can sign up to receive notifications about the product
- [ ] User can purchase the product - [ ] User can purchase the product
## Useful links and resources ## Useful links and resources
@ -34,5 +40,5 @@ There are plenty of Product Landing Pages out there. You can use [Dribbble](www.
## Example projects ## Example projects
- [Netlify](https://www.netlify.com/) - [Netlify](https://www.netlify.com/)
- [Product Landing Page - Codepen](https://codepen.io/l4ci/pen/LoGjk) - [Product Landing Page - Codepen](https://codepen.io/l4ci/pen/LoGjk)

@ -1,3 +1,9 @@
---
path: '/quiz-app'
title: 'Quiz App'
tier: 'beginner'
---
# Quiz App # Quiz App
**Tier:** 1-Beginner **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 Stories
- [ ] User can start the quiz by pressing a `button` - [ ] User can start the quiz by pressing a `button`
- [ ] User can see a question with 4 possible answers - [ ] 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 - [ ] 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 - [ ] At the end, the User can see the following statistics
- Time it took to finish the quiz - Time it took to finish the quiz
- How many correct answers did he get - How many correct answers did he get
- A message showing if he `passed` or `failed` the quiz - A message showing if he `passed` or `failed` the quiz
## Bonus features ## Bonus features
- [ ] User can share the result of a quiz on social media - [ ] User can share the result of a quiz on social media
- [ ] Add multiple quizzes to the application. User can select which one to take - [ ] 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 create an account and have all the scores saved in his dashboard. User can complete a quiz multiple times
## Useful links and resources ## Useful links and resources
- [Open Trivia Database](https://opentdb.com/api_config.php) - [Open Trivia Database](https://opentdb.com/api_config.php)
## Example projects ## 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 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 app interface](https://codepen.io/FlorinPop17/full/qqYNgW)
- [Quiz Progressive Web App built with React](https://github.com/SafdarJamal/quiz-app) - [Quiz Progressive Web App built with React](https://github.com/SafdarJamal/quiz-app)

@ -1,3 +1,9 @@
---
path: '/random-meal-generator'
title: 'Random Meal Generator'
tier: 'beginner'
---
# Random Meal Generator # Random Meal Generator
**Tier:** 1-Beginner **Tier:** 1-Beginner

@ -1,3 +1,9 @@
---
path: '/recipe-app'
title: 'Recipe App'
tier: 'beginner'
---
# Recipe # Recipe
**Tier:** 1-Beginner **Tier:** 1-Beginner
@ -12,32 +18,32 @@ that will make them easy to follow.
### Constraints ### Constraints
- For the initial version of this app the recipe data may be encoded as a - 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 JSON file. After implementing the initial version of this app you may
expand on this to maintain recipes in a file or database. expand on this to maintain recipes in a file or database.
## User Stories ## User Stories
- [ ] User can see a list of recipe titles - [ ] User can see a list of recipe titles
- [ ] User can click a recipe title to display a recipe card containing the - [ ] 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 recipe title, meal type (breakfast, lunch, supper, or snack), number of people
it serves, its difficulty level (beginner, intermediate, advanced), the list it serves, its difficulty level (beginner, intermediate, advanced), the list
of ingredients (including their amounts), and the preparation steps. of ingredients (including their amounts), and the preparation steps.
- [ ] User click a new recipe title to replace the current card with a new - [ ] User click a new recipe title to replace the current card with a new
recipe. recipe.
## Bonus features ## Bonus features
- [ ] User can see a photo showing what the item looks like after it has - [ ] User can see a photo showing what the item looks like after it has
been prepared. been prepared.
- [ ] User can search for a recipe not in the list of recipe titles by - [ ] 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 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 open source recipe API may be used as the source for recipes (see The MealDB
below). below).
- [ ] User can see a list of recipes matching the search terms - [ ] 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 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 see a warning message if no matching recipe was found.
- [ ] User can click a 'Save' button on the cards for recipes located through - [ ] 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. the API to save a copy to this apps recipe file or database.
## Useful links and resources ## Useful links and resources

@ -1,3 +1,9 @@
---
path: '/roman-to-decimal-numbers-converter'
title: 'Roman to Decimal numbers Converter'
tier: 'beginner'
---
# Roman to Decimal numbers Converter # Roman to Decimal numbers Converter
**Tier:** 1-Beginner **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: See the below table the _Symbol - Value_ pairs:
- I - 1 - I - 1
- V - 5 - V - 5
- X - 10 - X - 10
- L - 50 - L - 50
- C - 100 - C - 100
- D - 500 - D - 500
- M - 1000 - M - 1000
## User Stories ## User Stories
- [ ] User should be able to enter one Roman number in an input field - [ ] 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 - [ ] 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 - [ ] If a wrong symbol is entered, the User should see an error
## Bonus features ## Bonus features
- [ ] User could see the conversion to be made automatically as I type - [ ] 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 should be able to convert from decimal to Roman (vice-versa)
## Useful links and resources ## 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 ## Example projects
Try not to view this until you've developed your own solution: 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)

@ -1,3 +1,9 @@
---
path: '/slider-design'
title: 'Slider Design'
tier: 'beginner'
---
# Slider Design # Slider Design
**Tier:** 1-Beginner **Tier:** 1-Beginner
@ -6,20 +12,20 @@ Display multiple images using a slider / carousel.
## User Stories ## User Stories
- [ ] User can see a slider displaying multiple images every `x` seconds - [ ] 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 click on `previous` and `next` buttons and the slider will display the corresponding image
## Bonus features ## Bonus features
- [ ] Add animation to the slides - [ ] Add animation to the slides
- [ ] Add text over the slides - [ ] Add text over the slides
- [ ] Create a 3D effect - [ ] Create a 3D effect
## Useful links and resources ## Useful links and resources
- [Unsplash](https://unsplash.com/) for free images - [Unsplash](https://unsplash.com/) for free images
## Example projects ## Example projects
- [Full Page Slider](https://codepen.io/FlorinPop17/full/zbzbga) - [Full Page Slider](https://codepen.io/FlorinPop17/full/zbzbga)
- [WOWSlider](http://wowslider.com/3d-slider-jquery-fresh-cube-demo.html) - [WOWSlider](http://wowslider.com/3d-slider-jquery-fresh-cube-demo.html)

@ -1,3 +1,9 @@
---
path: '/stopwatch-app'
title: 'Stopwatch App'
tier: 'beginner'
---
# Stopwatch App # Stopwatch App
**Tier:** 1-Beginner **Tier:** 1-Beginner
@ -6,22 +12,22 @@ A stopwatch helps you track the time you spent on activities.
## User Stories ## User Stories
- [ ] User can `start` a clock - [ ] User can `start` a clock
- [ ] User can `stop` the clock - [ ] User can `stop` the clock
- [ ] When the clock is `stopped` the user can click `start` again and the clock will continue counting up - [ ] 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 `restart` the clock
## Bonus features ## Bonus features
- [ ] User can create `laps` - these will be displayed on the screen - [ ] User can create `laps` - these will be displayed on the screen
- [ ] User can clear all the laps - [ ] User can clear all the laps
## Useful links and resources ## 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 ## Example projects
- [Stopwatch by Hilo](https://codepen.io/hilotacker/pen/ONZWoX) - [Stopwatch by Hilo](https://codepen.io/hilotacker/pen/ONZWoX)
- [Stopwatch by Billy Brown](https://codepen.io/_Billy_Brown/pen/dbJeh) - [Stopwatch by Billy Brown](https://codepen.io/_Billy_Brown/pen/dbJeh)
- [Svelte Stopwatch by Gabriele Corti](https://codepen.io/borntofrappe/pen/KKKPZZg) - [Svelte Stopwatch by Gabriele Corti](https://codepen.io/borntofrappe/pen/KKKPZZg)

@ -1,3 +1,9 @@
---
path: '/true-or-false-app'
title: 'TrueOrFalse App'
tier: 'beginner'
---
# TrueOrFalse # TrueOrFalse
**Tier:** 1-Beginner **Tier:** 1-Beginner
@ -16,20 +22,20 @@ the `eval()` function to generate the result of the conditional.
## User Stories ## User Stories
- [ ] User can enter two strings to be compared - [ ] 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 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 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 see a warning if the input strings or conditional operator that has been entered is not valid
## Bonus features ## 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 ## Useful links and resources
- [Comparison Operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators) - [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) - [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/) - [Truthy and Falsy: When all is not equal in Javascript](https://www.sitepoint.com/javascript-truthy-falsy/)
## Example projects ## Example projects

@ -1,3 +1,9 @@
---
path: '/vigenere-cipher'
title: 'Vigenere Cipher'
tier: 'beginner'
---
# Vigenere Cipher # Vigenere Cipher
**Tier:** 1-Beginner **Tier:** 1-Beginner
@ -20,43 +26,40 @@ Cipher to learn the basics of how ciphers work.
### Requirements & Constraints ### Requirements & Constraints
- Developers should use only native language features to implement the Vigenere - 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 - 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 - After successfully implementing this algorithm Developer should ask
themselves these questions: themselves these questions: - Would you feel confident encrypting your financial information using the
- 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? Why? Vigenere Cipher? - How would you go about trying to crack this encryption?
- 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 Stories
- [ ] User can see the app window with these components: - [ ] User can see the app window with these components:
- Plain text message input field - Plain text message input field
- Encryption key input field - Encryption key input field
- Action buttons - 'Encrypt' and 'Decrypt' - Action buttons - 'Encrypt' and 'Decrypt'
- Resulting encrypted or decrypted message - Resulting encrypted or decrypted message
- [ ] User can enter the text to be encrypted in the plain text message input - [ ] User can enter the text to be encrypted in the plain text message input
field field
- [ ] User can enter the Encryption key the Vigenere algorithm will use to - [ ] User can enter the Encryption key the Vigenere algorithm will use to
encrypt the plain text message. encrypt the plain text message.
- [ ] User can click see see the 'Decrypt' button disabled until the plain - [ ] User can click see see the 'Decrypt' button disabled until the plain
text has been encrypted. text has been encrypted.
- [ ] User can click the 'Encrypt' button to encrypt the plain text message - [ ] 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 encrypted message displayed in the result field.
- [ ] User can see the 'Decrypt' button enabled after the encrypted message - [ ] User can see the 'Decrypt' button enabled after the encrypted message
has been displayed. has been displayed.
- [ ] User can click the 'Decrypt' button to decrypt the encrypted message - [ ] User can click the 'Decrypt' button to decrypt the encrypted message
and to display its contents in the result field. and to display its contents in the result field.
## Bonus features ## Bonus features
- [ ] User can see a 'Compare' button after decryption that compares the - [ ] User can see a 'Compare' button after decryption that compares the
original plain text message with the decrypted message original plain text message with the decrypted message
- [ ] User can see an error message if the 'Compare' detects differences - [ ] User can see an error message if the 'Compare' detects differences
in the contents of these two fields. in the contents of these two fields.
## Useful links and resources ## Useful links and resources

@ -1,3 +1,9 @@
---
path: '/windchill-app'
title: 'Windchill App'
tier: 'beginner'
---
# Windchill # Windchill
**Tier:** 1-Beginner **Tier:** 1-Beginner
@ -8,21 +14,21 @@ temperature.
## User Stories ## User Stories
- [ ] User can select the measurement system calculations will be performed in - Metric or English - [ ] 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 enter the actual temperature and the wind speed
- [ ] User can press the `Calculate` button to display the wind chill - [ ] 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 will receive an error message when `Calculate` is clicked if data values are not entered
## Bonus features ## 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 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 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 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 ## Useful links and resources
- [Wikipedia Wind Chill](https://en.wikipedia.org/wiki/Wind_chill) - [Wikipedia Wind Chill](https://en.wikipedia.org/wiki/Wind_chill)
- [JavaScript Assert](https://developer.mozilla.org/en-US/docs/Web/API/console/assert) - [JavaScript Assert](https://developer.mozilla.org/en-US/docs/Web/API/console/assert)
## Example projects ## Example projects

@ -1,3 +1,9 @@
---
path: '/word-frequency-app'
title: 'Word Frequency App'
tier: 'beginner'
---
# Word Frequency # Word Frequency
**Tier:** 1-Beginner **Tier:** 1-Beginner
@ -10,32 +16,32 @@ along with its frequency, in descending order by frequency.
## User Stories ## User Stories
- [ ] User can see a text input box, a 'Translate' button, and a word - [ ] User can see a text input box, a 'Translate' button, and a word
frequency table. frequency table.
- [ ] User can enter text (or cut and paste) into the input box. This input - [ ] 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). 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 - [ ] User can click the 'Translate' button to analyze the word frequency in
the text that has been input. the text that has been input.
- [ ] User can see an error message if the text input box is empty. - [ ] User can see an error message if the text input box is empty.
- [ ] User can see the word frequency table populated when the 'Translate' - [ ] 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 button is clicked. Each row in the table contains a word and the number of times
it occurs in the input text. it occurs in the input text.
- [ ] User can see the word frequency table ordered in descending sequence - [ ] User can see the word frequency table ordered in descending sequence
by word frequency. by word frequency.
## Bonus features ## Bonus features
- [ ] User can see a graphical representation of the word frequency in a - [ ] User can see a graphical representation of the word frequency in a
bubble chart, column chart, or any other form of graphical representation the bubble chart, column chart, or any other form of graphical representation the
developer chooses. developer chooses.
- [ ] User may choose to enter the URL of a web page whose content is to be - [ ] 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 analyzed instead of manually entering text. (Hint: See the
[Podcast Directory](../2-Intermediate/Podcast-Directory-App.md) application for ideas). [Podcast Directory](../2-Intermediate/Podcast-Directory-App.md) application for ideas).
## Useful links and resources ## Useful links and resources
- [Bag of Words Model (Wikipedia)](https://en.wikipedia.org/wiki/Bag-of-words_model) - [Bag of Words Model (Wikipedia)](https://en.wikipedia.org/wiki/Bag-of-words_model)
- [Semantic Analysis (Wikipedia)](https://en.wikipedia.org/wiki/Sentiment_analysis) - [Semantic Analysis (Wikipedia)](https://en.wikipedia.org/wiki/Sentiment_analysis)
## Example projects ## Example projects

@ -1,3 +1,9 @@
---
path: '/bit-masks-app'
title: 'Bit Masks'
tier: 'intermediate'
---
# Bit Masks # Bit Masks
**Tier:** 2-Intermediate **Tier:** 2-Intermediate

@ -1,3 +1,9 @@
---
path: '/book-finder-app'
title: 'Book Finder App'
tier: 'intermediate'
---
# Book Finder App # Book Finder App
**Tier:** 2-Intermediate **Tier:** 2-Intermediate

@ -1,3 +1,9 @@
---
path: '/card-memory-game'
title: 'Card-Memory-Game'
tier: 'intermediate'
---
# Card-Memory-Game # Card-Memory-Game
**Tier:** 2-Intermediate **Tier:** 2-Intermediate

@ -1,3 +1,9 @@
---
path: '/charity-finder'
title: 'Charity Finder'
tier: 'intermediate'
---
# Charity Finder # Charity Finder
**Tier:** 2-Intermediate **Tier:** 2-Intermediate

@ -1,3 +1,9 @@
---
path: '/chrome-theme-extension'
title: 'Chrome Theme Extension'
tier: 'intermediate'
---
# Chrome Theme Extension # Chrome Theme Extension
**Tier:** 2-Intermediate **Tier:** 2-Intermediate

@ -1,3 +1,9 @@
---
path: '/drawing-app'
title: 'Drawing App'
tier: 'intermediate'
---
# Drawing App # Drawing App
**Tier:** 2-Intermediate **Tier:** 2-Intermediate

@ -1,3 +1,9 @@
---
path: '/emoji-translator-app'
title: 'Emoji Translator App'
tier: 'intermediate'
---
# Emoji Translator # Emoji Translator
**Tier:** 2-Intermediate **Tier:** 2-Intermediate

@ -1,3 +1,9 @@
---
path: '/flash-cards-app'
title: 'FlashCards App'
tier: 'intermediate'
---
# FlashCards # FlashCards
**Tier:** 2-Intermediate **Tier:** 2-Intermediate

@ -1,3 +1,9 @@
---
path: '/flip-art-app'
title: 'Flip Art App'
tier: 'intermediate'
---
# Flip Art # Flip Art
**Tier:** 2-Intermediate **Tier:** 2-Intermediate

@ -1,3 +1,8 @@
---
path: '/game-suggestion-app'
title: 'Game Suggestion App'
tier: 'intermediate'
---
# Game suggestion app # Game suggestion app

@ -1,3 +1,9 @@
---
path: '/github-profiles'
title: 'Github Profiles'
tier: 'intermediate'
---
# GitHub Profiles # GitHub Profiles
**Tier:** 2-Intermediate **Tier:** 2-Intermediate

@ -1,3 +1,9 @@
---
path: '/high-striker-game'
title: 'HighStriker Game'
tier: 'intermediate'
---
# HighStriker # HighStriker
**Tier:** 2-Intermediate **Tier:** 2-Intermediate

@ -1,3 +1,9 @@
---
path: '/image-scanner'
title: 'Image Scanner'
tier: 'intermediate'
---
# Image Scanner # Image Scanner
**Tier:** 2-Intermediate **Tier:** 2-Intermediate

@ -1,3 +1,9 @@
---
path: '/markdown-previewer'
title: 'Markdown Previewer'
tier: 'intermediate'
---
# Markdown Previewer # Markdown Previewer
**Tier:** 2-Intermediate **Tier:** 2-Intermediate

@ -1,3 +1,9 @@
---
path: '/markdown-table-generator'
title: 'Markdown Table Generator'
tier: 'intermediate'
---
# Markdown Table Generator # Markdown Table Generator
**Tier:** 2-Intermediate **Tier:** 2-Intermediate

@ -1,3 +1,9 @@
---
path: '/meme-generator-app'
title: 'Meme Generator App'
tier: 'intermediate'
---
# Meme Generator App # Meme Generator App
**Tier:** 2-Intermediate **Tier:** 2-Intermediate

@ -1,3 +1,9 @@
---
path: '/name-generator'
title: 'Name Generator'
tier: 'intermediate'
---
# Name generation using Recurrent Neural Networks # Name generation using Recurrent Neural Networks
**Tier:** 2-Intermediate **Tier:** 2-Intermediate

@ -1,3 +1,9 @@
---
path: '/password-generator'
title: 'Password Generator'
tier: 'intermediate'
---
# Password Generator # Password Generator
**Tier:** 2-Intermediate **Tier:** 2-Intermediate

@ -1,3 +1,9 @@
---
path: '/podcast-directory-app'
title: 'Podcast Directory App'
tier: 'intermediate'
---
# Podcast Directory # Podcast Directory
**Tier:** 2-Intermediate **Tier:** 2-Intermediate

@ -1,3 +1,9 @@
---
path: '/qr-code-badge-app'
title: 'QRCode Badge Generator App'
tier: 'intermediate'
---
# QRCode Badge Generator # QRCode Badge Generator
**Tier:** 2-Intermediate **Tier:** 2-Intermediate

@ -1,3 +1,9 @@
---
path: '/regular-expression-helper-app'
title: 'Regular Expression Helper App'
tier: 'intermediate'
---
# Regular Expression Helper # Regular Expression Helper
**Tier:** 2-Intermediate **Tier:** 2-Intermediate

@ -1,3 +1,9 @@
---
path: '/sales-db-app'
title: 'Sales DB App'
tier: 'intermediate'
---
# Sales Reciepts # Sales Reciepts
**Tier:** 2-Intermediate **Tier:** 2-Intermediate

@ -1,3 +1,9 @@
---
path: '/simple-online-store'
title: 'Simple Online Store'
tier: 'intermediate'
---
# Simple Online Store # Simple Online Store
**Tier:** 2-Intermediate **Tier:** 2-Intermediate

@ -1,3 +1,9 @@
---
path: '/sports-bracket-generator'
title: 'Sports Bracket Generator'
tier: 'intermediate'
---
# Sports Bracket Generator # Sports Bracket Generator
**Tier:** 2-Intermediate **Tier:** 2-Intermediate

@ -1,3 +1,9 @@
---
path: '/string-art'
title: 'StringArt'
tier: 'intermediate'
---
# StringArt # StringArt
**Tier:** 2-Intermediate **Tier:** 2-Intermediate

@ -1,3 +1,9 @@
---
path: '/this-or-that-game'
title: 'This or That Game'
tier: 'intermediate'
---
# This or That Game # This or That Game
**Tier:** 2-Intermediate **Tier:** 2-Intermediate

@ -1,3 +1,9 @@
---
path: '/timezone-slackbot'
title: 'Timezone Slackbot - TZ'
tier: 'intermediate'
---
# Timezone Slackbot - TZ # Timezone Slackbot - TZ
**Tier:** 2-Intermediate **Tier:** 2-Intermediate

@ -1,3 +1,9 @@
---
path: '/to-do-app'
title: 'To-Do App'
tier: 'intermediate'
---
# To-Do App # To-Do App
**Tier:** 2-Intermediate **Tier:** 2-Intermediate

@ -1,3 +1,9 @@
---
path: '/typing-practice-app'
title: 'Typing Practice App'
tier: 'intermediate'
---
# Typing Practice # Typing Practice
**Tier:** 2-Intermediate **Tier:** 2-Intermediate

@ -1,3 +1,9 @@
---
path: '/voting-app'
title: 'Voting App'
tier: 'intermediate'
---
# Voting App # Voting App
**Tier:** 2-Intermediate **Tier:** 2-Intermediate

@ -1,3 +1,9 @@
---
path: '/math-formula-editor'
title: 'Math Formula Editor'
tier: 'intermediate'
---
# Math Formula Editor # Math Formula Editor
**Tier:** 2-Intermediate **Tier:** 2-Intermediate

@ -1,3 +1,9 @@
---
path: '/battleship-bot'
title: 'Battleship Bot'
tier: 'advanced'
---
# Battleship Bot # Battleship Bot
**Tier:** 3-Advanced **Tier:** 3-Advanced
@ -9,16 +15,16 @@ via a Discord chat.
## User Stories ## User Stories
- [ ] User can display game rules by entering `bb help` into the chat window. - [ ] 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 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 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 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 see a congratulations message after the shot that sinks the last remaining ship.
## Bonus features ## Bonus features
- [ ] User can surrender a game by entering `bb surrender` in the chat window. - [ ] 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 see a card containing a graphical representation of the hits and misses rather than a simple 2D table of characters.
## Useful links and resources ## Useful links and resources

@ -1,3 +1,9 @@
---
path: '/battleship-game-engine'
title: 'Battleship Game Engine'
tier: 'advanced'
---
# Battleship Game Engine # Battleship Game Engine
**Tier:** 3-Advanced **Tier:** 3-Advanced
@ -22,48 +28,48 @@ BGE is responsible for maintaining game state.
### BGE ### 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 - Destroyer: 2 squares
- Cruiser: 3 squares - Cruiser: 3 squares
- Battleship: 4 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 ### 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 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 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 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 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 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 be prompted to play again at the end of each game. Declining to play again stops the game.
## Bonus features ## Bonus features
### BGE ### BGE
- [ ] Caller can specify the number of rows and columns in the game board as a parameter to the `startGame()` function. - [ ] 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 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 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 ### 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 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 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 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 both players boards at the end of each turn.
## Useful links and resources ## Useful links and resources
- [Battleship Game (Wikipedia)](<https://en.wikipedia.org/wiki/Battleship_(game)>) - [Battleship Game (Wikipedia)](<https://en.wikipedia.org/wiki/Battleship_(game)>)
- [Battleship Game Rules (Hasbro)](https://www.hasbro.com/common/instruct/battleship.pdf) - [Battleship Game Rules (Hasbro)](https://www.hasbro.com/common/instruct/battleship.pdf)
## Example projects ## 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. 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)

@ -1,3 +1,9 @@
---
path: '/boole-bots-game'
title: 'Boole Bots Game'
tier: 'advanced'
---
# Boole Bots Game # Boole Bots Game
**Tier:** 3-Advanced **Tier:** 3-Advanced
@ -18,72 +24,76 @@ continue moving about the arena until only one remains.
## User Stories ## User Stories
- [ ] User can see the game window with these components - [ ] User can see the game window with these components
- Game configuration input panel - Game configuration input panel
- Leaderboard showing bots ranked by their scores - Leaderboard showing bots ranked by their scores
- Game controls - Game controls
- Arena of 8x8 game tiles where the bots battle - Arena of 8x8 game tiles where the bots battle
### Game Configuration Panel ### 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 - [ ] 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 name, select its Boolean value and operation, select the bots speed using a
slider, and a dropdown to specify its starting direction - North, South, slider, and a dropdown to specify its starting direction - North, South,
East, West East, West
- [ ] User can enter a unique name for each bot into an input text box - [ ] 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 - [ ] User can see an error message if the name entered is the same name
assigned to another bot. assigned to another bot.
- [ ] User can select the bots Boolean value (0 or 1) from a dropdown. - [ ] 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, - [ ] User can select a bots Boolean operation from a dropdown - AND, OR, XOR,
or NOT. or NOT.
- [ ] User can move the speed slider to set a bots speed - [ ] User can move the speed slider to set a bots speed
- [ ] User can select a bots starting direction from the direction dropdown. - [ ] 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 - [ ] User can see the bot randomly assigned to a tile in the arena once its
name has been defined. name has been defined.
### Game Controls ### 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 a button in the game control panel to 'Battle!'
- [ ] User can see bots move based on the speed and direction assigned to them. - [ ] User can click the 'Battle!' button to start the bot battle in the arena.
- [ ] User can see the 'Battle!' button text change to 'Stop!' once a battle - [ ] User can see bots move based on the speed and direction assigned to them.
is started. - [ ] User can see the 'Battle!' button text change to 'Stop!' once a battle
- [ ] User can click the 'Stop!' button to halt gameplay is started.
- [ ] User can see the 'Stop!' button text change back to 'Battle!' once a - [ ] User can click the 'Stop!' button to halt gameplay
single bot wins the match. - [ ] User can see the 'Stop!' button text change back to 'Battle!' once a
single bot wins the match.
### Arena ### Arena
- [ ] User can see bots bounce off the boundary walls of the arena in a new
direction - [ ] User can see bots bounce off the boundary walls of the arena in a new
- [ ] User can see bots pause for an instant when they collide. direction
- [ ] User can see a bot disappear after colliding if the result of it's - [ ] User can see bots pause for an instant when they collide.
boolean operation appied to its boolean value and that of the bot is has - [ ] User can see a bot disappear after colliding if the result of it's
collided with result in 0. boolean operation appied to its boolean value and that of the bot is has
- [ ] User can see a bot that wins a collision resume its path at the same collided with result in 0.
speed and direction. - [ ] User can see a bot that wins a collision resume its path at the same
- [ ] User can see both colliding bots resume their paths at the same speed speed and direction.
and direction in the event of a tie. In other words, when the collision resulted - [ ] User can see both colliding bots resume their paths at the same speed
in the same boolean result (0 or 1) for both. and direction in the event of a tie. In other words, when the collision resulted
- [ ] User can see gameplay stop when only one bot remains. in the same boolean result (0 or 1) for both.
- [ ] User can see gameplay stop when only one bot remains.
### Leaderboard ### Leaderboard
- [ ] User can see the display of wins and losses for each bot on the
leaderboard - [ ] User can see the display of wins and losses for each bot on the
- [ ] User can see the tally of wins incremented for bots winning a collision. leaderboard
- [ ] User can see the tally of losses decremented for bots loosing a collision. - [ ] 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 ## Bonus features
- [ ] User can see a log panel displaying the details of game milestones. - [ ] User can see a log panel displaying the details of game milestones.
Hint: This may be useful to the Developer during development and debugging. 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 - [ ] User can see a game clock displaying current elapsed game time that is
updated every second. updated every second.
- [ ] User may choose a bots starting direction as North, Northeast, Southeast, - [ ] User may choose a bots starting direction as North, Northeast, Southeast,
South, Southwest, West, or Northwest. South, Southwest, West, or Northwest.
- [ ] User may specify the dimensions of the arena. - [ ] User may specify the dimensions of the arena.
- [ ] User may select an unique icon for a bot from a palette of icons. Icons - [ ] User may select an unique icon for a bot from a palette of icons. Icons
in the palette are disabled once they are assigned. in the palette are disabled once they are assigned.
- [ ] User can see the bot with the most wins highlighted in some way in the - [ ] User can see the bot with the most wins highlighted in some way in the
Leaderboard. Leaderboard.
## Useful links and resources ## Useful links and resources

@ -1,3 +1,9 @@
---
path: '/bug-race-game'
title: 'Bug Race Game'
tier: 'advanced'
---
# Bug Race # Bug Race
**Tier:** 3-Advanced **Tier:** 3-Advanced
@ -9,66 +15,67 @@ be customized including bug icons, assigning names to the bugs, making a choice
of who the winner might be, and bug speed. of who the winner might be, and bug speed.
### Constraints ### Constraints
- The developer will need to select the bug icons to be used in the game - 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 - 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 starts so they travel at different rates within the speed selected by the
user (slow, normal, or fast). user (slow, normal, or fast).
- It is up to the developer to define the speed ranges associated with the slow, - 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 - 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 Stories
- [ ] User can see: - [ ] User can see:
- An input panel containing controls to configure the game's UI and - An input panel containing controls to configure the game's UI and
operation. operation.
- A race track consisting of four horizontal lanes the bugs will travel in - 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 radio button associated with each lane to allow the user to select a
potential winner potential winner
- A 'Start' button. - A 'Start' button.
### Game Controls ### Game Controls
- [ ] User can see the following controls in the input panel.
- A list of race lane numbers with radio buttons for each showing - [ ] User can see the following controls in the input panel.
thumbnails for three unique bugs, and a text box the user can use to - A list of race lane numbers with radio buttons for each showing
give the bug a name. thumbnails for three unique bugs, and a text box the user can use to
- An Speed selection control with three radio buttons - Slow, Normal, Fast give the bug a name.
- [ ] User can click a radio button to select the bug icon to be assigned - An Speed selection control with three radio buttons - Slow, Normal, Fast
to a lane. - [ ] User can click a radio button to select the bug icon to be assigned
- [ ] User can see an warning message if the same icon is selected for more to a lane.
than one lane. - [ ] User can see an warning message if the same icon is selected for more
- [ ] User can enter a name for the bug in each lane. than one lane.
- [ ] User can see an error message if the same name is repeated for more than - [ ] User can enter a name for the bug in each lane.
one bug. - [ ] User can see an error message if the same name is repeated for more than
- [ ] User can select the bug speed by clicking one of the Speed radio buttons one bug.
- [ ] User can select the bug speed by clicking one of the Speed radio buttons
### Racing ### Racing
- [ ] User can select a potential winner by clicking on the radio button on - [ ] User can select a potential winner by clicking on the radio button on
any lane. any lane.
- [ ] User can start a race by clicking on the 'Start' button - [ ] 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 the 'Start' button is disabled until the race is over
- [ ] User can see an error message if no winner was selected. - [ ] 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 bugs race across their assigned lane to the finish line
- [ ] User can see all bugs stop moving when the first one reaches the finish - [ ] User can see all bugs stop moving when the first one reaches the finish
line line
- [ ] User can see game metrics updated to show the number of races run in - [ ] User can see game metrics updated to show the number of races run in
this session. this session.
## Bonus features ## Bonus features
- [ ] User can see race metrics for each bug showing the number of races - [ ] User can see race metrics for each bug showing the number of races
run, number of wins, and number of losses. run, number of wins, and number of losses.
- [ ] User can see the winning bug bounce when it wins a race - [ ] 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 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 hear unique sounds played when the race starts and ends.
## Useful links and resources ## 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) - [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) - [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) - [Javascript Animations](https://javascript.info/animation)

@ -1,3 +1,9 @@
---
path: '/calorie-counter-app'
title: 'Calorie Counter App'
tier: 'advanced'
---
# Calorie Counter # Calorie Counter
**Tier:** 3-Advanced **Tier:** 3-Advanced
@ -18,28 +24,28 @@ search at runtime (hint: take a look at the CSV file format).
## User Stories ## User Stories
- [ ] Developer will create a JSON file containing the food items to be - [ ] Developer will create a JSON file containing the food items to be
searched. This will be loaded when the app is started. searched. This will be loaded when the app is started.
- [ ] User can see an panel containing a food description input text box, - [ ] User can see an panel containing a food description input text box,
a 'Search' button, and a 'Clear' button. a 'Search' button, and a 'Clear' button.
- [ ] User can enter search terms into the food description input text box. - [ ] 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 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 and warning message if no search terms were entered.
- [ ] User can see a warning message if no matches were found. - [ ] User can see a warning message if no matches were found.
- [ ] User can see a list of the matching food items, portion sizes, and - [ ] 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. 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 - [ ] User can click on the 'Clear' button to clear the search terms and
results list. results list.
## Bonus features ## Bonus features
- [ ] User can see the count of the number of matching food items adjacent to - [ ] User can see the count of the number of matching food items adjacent to
the results list. the results list.
- [ ] User can use a wildcard character in search terms. - [ ] User can use a wildcard character in search terms.
- [ ] User can see more than 25 entries from a search by clicking a Down - [ ] 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. 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 - [ ] Developer will implement load the MyPyramid data into a database or a
data structure other than an array for faster searching. data structure other than an array for faster searching.
## Useful links and resources ## Useful links and resources

@ -1,3 +1,9 @@
---
path: '/chat-app'
title: 'Chat App'
tier: 'advanced'
---
# Chat App # Chat App
**Tier:** 3-Advanced **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 Stories
- [ ] User is prompted to enter a username when he visits the chat app. The username will be stored in the application - [ ] 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 - [ ] 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!`) - [ ] 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 ## Bonus features
- [ ] The messages will be visible to all the Users that are in the chat app (using WebSockets) - [ ] 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 - [ ] When a new User joins the chat, a message is displayed to all the existing Users
- [ ] Messages are saved in a database - [ ] Messages are saved in a database
- [ ] User can send images, videos and links which will be displayed properly - [ ] User can send images, videos and links which will be displayed properly
- [ ] User can select and send an emoji - [ ] User can select and send an emoji
- [ ] Users can chat in private - [ ] Users can chat in private
- [ ] Users can join `channels` on specific topics - [ ] Users can join `channels` on specific topics
## Useful links and resources ## Useful links and resources
- [Socket.io](https://socket.io) - [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) - [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) - [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 Chat App Using Websockets - Youtube Tutorial](https://www.youtube.com/watch?v=tHbCkikFfDE)
## Example projects ## Example projects
- [Chatty2](https://web-chatty.herokuapp.com/) - [Chatty2](https://web-chatty.herokuapp.com/)

@ -1,3 +1,9 @@
---
path: '/contribution-tracker-app'
title: 'Contribution Tracker App'
tier: 'advanced'
---
# Contribution Tracker # Contribution Tracker
**Tier:** 3-Advanced **Tier:** 3-Advanced
@ -12,92 +18,86 @@ purposes. For example, for tax reporting.
### Constraints ### Constraints
- Developers may use Vanilla JS, or a framework of their choice (like React, - 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 - Developers should not use libraries for calculating and manipulating monetary
amounts. All calculation and formatting should be done in the language chosen amounts. All calculation and formatting should be done in the language chosen
to develop the application. to develop the application.
- Developers may use a graphics presentation library or service of their choice, - 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 - Developers may choose to have transactions persist across sessions using
either files or databases. Sensitive data, like transactions, must not be either files or databases. Sensitive data, like transactions, must not be
maintained in local storage. Remember that although you can implement maintained in local storage. Remember that although you can implement
protections it is impossible to totally secure browser applications. protections it is impossible to totally secure browser applications.
## User Stories ## User Stories
- [ ] User can see a Navigation Bar at the top of each page containing the - [ ] User can see a Navigation Bar at the top of each page containing the
application name and a "hamburger" menu with these option: application name and a "hamburger" menu with these option: - Dashboard - Transactions
- Dashboard - [ ] User can see a Footer Bar at the bottom of each page containing an
- Transactions About link
- [ ] User can see a Footer Bar at the bottom of each page containing an
About link
### Dashboard Page ### Dashboard Page
- [ ] User can see the Dashboard page when the app is started containing
graphical summaries of the following key metrics. The graphical representation - [ ] User can see the Dashboard page when the app is started containing
for each is left up to the Developer. graphical summaries of the following key metrics. The graphical representation
- Contributions by month for the current year 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
- Total contributions by year - [ ] User can return to the Dashboard page, if currently on another page, by
- Contribution increase/decrease by year clicking on the 'Dashboard' option in the hamburger menu in the Navigation Bar.
- 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 ### Transactions Page
- [ ] User can see a transaction input panel containing the following:
- Transaction date - [ ] User can see a transaction input panel containing the following:
- Payee name - Transaction date
- Amount - Payee name
- Memo - Amount
- Action buttons - 'Clear', 'Add' - Memo
- [ ] User can see a tabular transaction ledger containing previously - Action buttons - 'Clear', 'Add'
entered transactions. Each row will also contain a 'Modify' and a 'Delete' - [ ] User can see a tabular transaction ledger containing previously
button. entered transactions. Each row will also contain a 'Modify' and a 'Delete'
- [ ] User can enter values describing the transaction into the input fields button.
- [ ] User can click the 'Clear' button to reset all input fields to an - [ ] User can enter values describing the transaction into the input fields
empty state. - [ ] User can click the 'Clear' button to reset all input fields to an
- [ ] User can click the 'Add' button to validate the input that has been empty state.
entered, add the validated entry to the transaction ledger, and clear the input - [ ] User can click the 'Add' button to validate the input that has been
fields. entered, add the validated entry to the transaction ledger, and clear the input
- [ ] User can see a consolidated error message detailing any errors detected fields.
in input fields, including: - [ ] User can see a consolidated error message detailing any errors detected
- Invalid date in input fields, including: - Invalid date - Blank Payee name - Non-numeric amount field
- Blank Payee name - [ ] User can click on the 'Update' button to modify a previously entered
- Non-numeric amount field transaction. The transaction details will be copied to the transaction input
- [ ] User can click on the 'Update' button to modify a previously entered panel and the 'Add' button will change to 'Modify'.
transaction. The transaction details will be copied to the transaction input - [ ] User can change values in the input fields and click the 'Modify' to
panel and the 'Add' button will change to 'Modify'. validate the input and update that transactions entry in the ledger. If
- [ ] User can change values in the input fields and click the 'Modify' to successful the 'Modify' button will change back to 'Add' and the input fields
validate the input and update that transactions entry in the ledger. If will be cleared.
successful the 'Modify' button will change back to 'Add' and the input fields - [ ] User can click the 'Delete' button to remove a previously entered
will be cleared. transaction. A popup dialog will be displayed containing 'Cancel' and 'Okay'
- [ ] User can click the 'Delete' button to remove a previously entered buttons to cancel or confirm the delete. If the delete is confirmed the
transaction. A popup dialog will be displayed containing 'Cancel' and 'Okay' transaction will be removed from the ledger.
buttons to cancel or confirm the delete. If the delete is confirmed the - [ ] User can return to the Transactions page, if currently on another page,
transaction will be removed from the ledger. by clicking on the 'Transactions' option in the hamburger menu in the Navigation
- [ ] User can return to the Transactions page, if currently on another page, Bar.
by clicking on the 'Transactions' option in the hamburger menu in the Navigation
Bar.
### About Page ### About Page
- [ ] User can click the About link in the Footer Bar to display information
about the Developer. - [ ] User can click the About link in the Footer Bar to display information
- [ ] User can see links to the Developers GitHub and social media accounts about the Developer.
including social media icons (like the Twitter icon). - [ ] User can see links to the Developers GitHub and social media accounts
including social media icons (like the Twitter icon).
## Bonus features ## Bonus features
- [ ] User can click in the transaction date field to display a calendar - [ ] User can click in the transaction date field to display a calendar
the date can be selected from rather than manually entering it. the date can be selected from rather than manually entering it.
- [ ] User can see alternating row background colors in the transaction ledger. - [ ] User can see alternating row background colors in the transaction ledger.
- [ ] User can click on a column heading in the transaction ledger to toggle - [ ] User can click on a column heading in the transaction ledger to toggle
the sort sequence on the values in that column. the sort sequence on the values in that column.
- [ ] User can see a PDF option near the Transaction Ledger to create a PDF - [ ] 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 of all transactions (Hint: checkout how this capability can be implemented via
[Puppeteer](https://github.com/GoogleChrome/puppeteer)). [Puppeteer](https://github.com/GoogleChrome/puppeteer)).
## Useful links and resources ## Useful links and resources

@ -1,3 +1,9 @@
---
path: '/elevator-app'
title: 'Elevator App'
tier: 'advanced'
---
# Elevator # Elevator
**Tier:** 3-Advanced **Tier:** 3-Advanced
@ -16,48 +22,48 @@ they wish to go to.
### Constraints ### Constraints
- You must implement a single event handler for the up and down buttons on - 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 each floor. For example, if there are 4 floors a single event handler should
be implemented rather than 8 (two buttons per floor). be implemented rather than 8 (two buttons per floor).
- Similarly, a single event handler should be implemented for all buttons on - 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 the control panel in the elevator rather than a unique event handler for each
button. button.
## User Stories ## User Stories
- [ ] User can see a cross section diagram of a building with four floors, - [ ] 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 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 down buttons on the second and third floors, and a down button on the fourth
floor. floor.
- [ ] User can see the elevator control panel with a button for each of the - [ ] User can see the elevator control panel with a button for each of the
floors to the side of the diagram. floors to the side of the diagram.
- [ ] User can click the up and down button on any floor to call the - [ ] User can click the up and down button on any floor to call the
elevator. elevator.
- [ ] User can expect that clicking the up and down buttons on any floor - [ ] 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 to request the elevator will be queued and serviced in the sequence they were
clicked. clicked.
- [ ] User can see the elevator move up and down the shaft to the floor it - [ ] User can see the elevator move up and down the shaft to the floor it
was called to. was called to.
- [ ] User can click the elevator control panel to select the floor it - [ ] User can click the elevator control panel to select the floor it
should travel to. should travel to.
- [ ] User can expect the elevator to pause for 5 seconds waiting for a - [ ] 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 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. 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 - [ ] User can expect the elevator to return to the first floor when there
are no requests to process. are no requests to process.
## Bonus features ## Bonus features
- [ ] User can see a warning sound if the number of elevator requests - [ ] User can see a warning sound if the number of elevator requests
exceeds the maximum number allowed. This limit is left to the developer. 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 hear a sound when the elevator arrives at a floor.
- [ ] User can see an occupant randomly arrive at a floor to indicate when - [ ] 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. 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 - [ ] User can specify the time interval between new occupants arriving to
call an elevator. call an elevator.
## Useful links and resources ## 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)](<https://en.wikipedia.org/wiki/FIFO_(computing_and_electronics)>)
## Example projects ## Example projects

@ -1,3 +1,9 @@
---
path: '/fast-food-simulator-app'
title: 'Fast Food Simulator App'
tier: 'advanced'
---
# Fast Food Simulator App # Fast Food Simulator App
**Tier:** 3-Advanced **Tier:** 3-Advanced
@ -26,48 +32,49 @@ interact and incrementally build the app following Agile principles.
### Constraints ### Constraints
- Order tickets can be represented as two different types of Promises - one - 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 the Server waits on while the Cook prepares the order and another the Customer
waits on while in the serving line. waits on while in the serving line.
- Use the native equivalent of JS Promises in whichever language you choose - 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 - 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 - 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 - 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 ## User Stories
### Application Operation ### 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 - [ ] User can see an input area that allows the entry of the time interval
_order ticket_ by the cook. for customer arrival and a time interval for the fulfilment of an
- [ ] User can see a customized warning message if the customer arrival _order ticket_ by the cook.
interval or the order fulfilment interval is incorrectly entered. - [ ] User can see a customized warning message if the customer arrival
- [ ] User can start the simulation by clicking on a Start button. interval or the order fulfilment interval is incorrectly entered.
- [ ] User can see an order line area containing a text box showing the - [ ] User can start the simulation by clicking on a Start button.
number of customers waiting to place orders. - [ ] User can see an order line area containing a text box showing the
- [ ] User can see an order area containing text boxes showing the number of customers waiting to place orders.
_order number_ currently being taken. - [ ] User can see an order area containing text boxes showing the
- [ ] User can see a kitchen area containing a text box showing the _order number_ currently being taken.
_order number_ that's being prepared and a text box listing the waiting - [ ] User can see a kitchen area containing a text box showing the
orders in sequence, along with a count of the number of waiting orders. _order number_ that's being prepared and a text box listing the waiting
- [ ] User can see a Pickup area containing a text box showing the orders in sequence, along with a count of the number of waiting orders.
_order number_ that's currently available for pickup by the Customer and a - [ ] User can see a Pickup area containing a text box showing the
text box showing the number of Customers waiting in the serving line. _order number_ that's currently available for pickup by the Customer and a
- [ ] User can stop the simulation at any time by clicking a Stop button. 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 ## Bonus features
- [ ] User can specify how long it takes for an Order Taker to create an - [ ] User can specify how long it takes for an Order Taker to create an
_order ticket_. _order ticket_.
- [ ] User can specify how long it takes for the Server to deliver an order - [ ] User can specify how long it takes for the Server to deliver an order
to the customer. to the customer.
- [ ] User can specify the total amount of time the simulation is to run - [ ] User can specify the total amount of time the simulation is to run
once the Start button has been clicked. once the Start button has been clicked.
- [ ] User can see an animated view of Customers and orders as they move - [ ] User can see an animated view of Customers and orders as they move
through the workflow. through the workflow.
## Useful links and resources ## Useful links and resources

@ -1,3 +1,9 @@
---
path: '/github-timeline-app'
title: 'GitHub Timeline App'
tier: 'advanced'
---
# GitHub Timeline # GitHub Timeline
**Tier:** 3-Advanced **Tier:** 3-Advanced
@ -16,16 +22,16 @@ Only public GitHub repos should be displayed.
## User Stories ## User Stories
- [ ] User can enter a GitHub user name - [ ] User can enter a GitHub user name
- [ ] User can click a 'Generate' button to create and display the named - [ ] User can click a 'Generate' button to create and display the named
users repo timeline users repo timeline
- [ ] User can see a warning message if the GitHub user name is not a valid - [ ] User can see a warning message if the GitHub user name is not a valid
GitHub user name. GitHub user name.
## Bonus features ## Bonus features
- [ ] User can see a summary of the number of repos tallied by the year they - [ ] User can see a summary of the number of repos tallied by the year they
were created were created
## Useful links and resources ## 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: Documentation for the GitHub API can be found at:
- [GitHub REST API V3](https://developer.github.com/v3/) - [GitHub REST API V3](https://developer.github.com/v3/)
- [GitHub GraphQL API V4](https://developer.github.com/v4/) - [GitHub GraphQL API V4](https://developer.github.com/v4/)
Sample code showing how to use the GitHub API's are: Sample code showing how to use the GitHub API's are:
- [GitHub REST API client for JavaScript ](https://github.com/octokit/rest.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) - [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 You can use this CURL command to see the JSON returned by the V3 REST API for
your repos: your repos:
@ -51,5 +57,5 @@ curl -u "user-id" https://api.github.com/users/user-id/repos
## Example projects ## Example projects
- [CSS Timeline](https://codepen.io/NilsWe/pen/FemfK) - [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) - [Building a Vertical Timeline With CSS and a Touch of JavaScript](https://codepen.io/tutsplus/pen/QNeJgR)

@ -1,3 +1,9 @@
---
path: '/git-tweet-app'
title: 'GitTweet App'
tier: 'advanced'
---
# GitTweet # GitTweet
**Tier:** 3-Advanced **Tier:** 3-Advanced
@ -11,38 +17,38 @@ is created for one of your repos.
## User Stories ## User Stories
- [ ] User can see an input area tabular display prepopulated with rows for - [ ] 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 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. name, a single input date field, and a 'Scan' button.
- [ ] User can click the checkboxes in the repo list to select or deselect - [ ] User can click the checkboxes in the repo list to select or deselect
repos for processing. repos for processing.
- [ ] User can enter a date into the date field. This defines the point after - [ ] User can enter a date into the date field. This defines the point after
which any new PR requests will be tweeted. which any new PR requests will be tweeted.
- [ ] User can click the 'Scan' button to identify repos that have had a new - [ ] 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 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 entering the same date to scan from should only generate tweets for PR's that
have not yet been tweeted. have not yet been tweeted.
- [ ] User can see an error message if no date was entered, if it is not a - [ ] 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. valid date, or if it is a future date.
- [ ] User can see repos highlighted if a tweet will be generated for them - [ ] User can see repos highlighted if a tweet will be generated for them
and the 'Scan' button will change to 'Tweet'. and the 'Scan' button will change to 'Tweet'.
- [ ] User may deselect a repo by clicking on its checkbox. Doing this will - [ ] 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 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 repos that have had new PR's (not yet tweeted) created since the scan date
entered by the user. entered by the user.
- [ ] User may enter an new scan date at this point which also changes the - [ ] User may enter an new scan date at this point which also changes the
button back to 'Scan'. button back to 'Scan'.
- [ ] User may click the 'Tweet' button to send a tweet bearing the following - [ ] User may click the 'Tweet' button to send a tweet bearing the following
message - `Pull Requst #<pr-number> created for repo <repo name> - <repo description>`. message - `Pull Requst #<pr-number> created for repo <repo name> - <repo description>`.
- [ ] User can see this tweet send from her Twitter account. - [ ] User can see this tweet send from her Twitter account.
## Bonus features ## Bonus features
- [ ] User does not need to manually enter a scan date. If omitted the scan - [ ] 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. will resume from the last scan date which must persist across sessions.
- [ ] User may enter a custom tweet message - [ ] User may enter a custom tweet message
- [ ] User repo selections will persist across sessions so they do not have - [ ] User repo selections will persist across sessions so they do not have
to be reselected each time. to be reselected each time.
## Useful links and resources ## Useful links and resources
@ -52,13 +58,13 @@ to be reselected each time.
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: API can be found at:
- [GitHub REST API V3](https://developer.github.com/v3/) - [GitHub REST API V3](https://developer.github.com/v3/)
- [GitHub GraphQL API V4](https://developer.github.com/v4/) - [GitHub GraphQL API V4](https://developer.github.com/v4/)
Sample code showing how to use the GitHub API's are: Sample code showing how to use the GitHub API's are:
- [GitHub REST API client for JavaScript ](https://github.com/octokit/rest.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) - [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 You can use this CURL command to see the JSON returned by the V3 REST API for
your repos: your repos:

@ -1,3 +1,9 @@
---
path: '/instagram-clone-app'
title: 'Instagram Clone App'
tier: 'advanced'
---
# Instagram Clone # Instagram Clone
**Tier:** 3-Advanced **Tier:** 3-Advanced
@ -8,29 +14,29 @@ You should create a MVP (Minimum Viable Product) using a Full stack approach suc
## User Stories ## 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 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 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 has a profile that displays all the images they have uploaded
- [ ] User can follow other users - [ ] User can follow other users
- [ ] User can see other users posts (people who the user follows) - [ ] User can see other users posts (people who the user follows)
## Bonus features ## Bonus features
- [ ] User can see a global feed of images - [ ] User can see a global feed of images
- [ ] The feed auth refreshes when a new post is added (You can use Web Sockets) - [ ] The feed auth refreshes when a new post is added (You can use Web Sockets)
- [ ] User can send messages to other users - [ ] User can send messages to other users
- [ ] User can create a story for followers - [ ] User can create a story for followers
## Useful links and resources ## Useful links and resources
- [How to make an Instagram clone](https://www.youtube.com/watch?v=9dRSNQe7PWw) - [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) - [Node & Mongo Basic CRUD Operations](https://codeburst.io/writing-a-crud-app-with-node-js-and-mongodb-e0827cbbdafb)
- [Socket.io](https://socket.io) - [Socket.io](https://socket.io)
- [MERN Stack](http://mern.io/) - [MERN Stack](http://mern.io/)
- [MEAN Stack](http://mean.io/) - [MEAN Stack](http://mean.io/)
- [User Authentication with Node](https://medium.com/silibrain/using-passport-bcrypt-for-full-stack-app-user-authentication-fe30a013604e) - [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) - [Express File Uploads with Multer](https://scotch.io/tutorials/express-file-uploads-with-multer)
## Example projects ## Example projects
- [Instagram](https://www.instagram.com/) - [Instagram](https://www.instagram.com/)

@ -1,3 +1,9 @@
---
path: '/kudos-slackbot'
title: "Kudo's Slackbot"
tier: 'advanced'
---
# Kudo's Slackbot # Kudo's Slackbot
**Tier:** 3-Advanced **Tier:** 3-Advanced
@ -11,32 +17,32 @@ efforts and to make it available through a simple Slack command.
## User Stories ## User Stories
- [ ] User can create a kudu using the Slack command: `/kudo add <slack-id> <text>` where: - [ ] User can create a kudu using the Slack command: `/kudo add <slack-id> <text>` where:
- `<slack-id>` defines the individual receiving the recognition - `<slack-id>` defines the individual receiving the recognition
- `<text>` is your kudo for that person - `<text>` is your kudo for that person
- [ ] User can modify a kudu using the Slack command: `/kudo replace <kudo-id> <text>` where: - [ ] User can modify a kudu using the Slack command: `/kudo replace <kudo-id> <text>` where:
- `<action>` is 'replace' or 'delete' - `<action>` is 'replace' or 'delete'
- `<kudo-id>` is the kudo identifier - `<kudo-id>` is the kudo identifier
- `<text>` is your kudo for that person - `<text>` is your kudo for that person
- [ ] User can delete a kudu using the Slack command: `/kudo delete <kudo-id>` - [ ] User can delete a kudu using the Slack command: `/kudo delete <kudo-id>`
- [ ] User may display the most recent _n_ kudos using the Slack command: `/kudo list <n>` where `n` is an integer or `*` for all kudos - [ ] User may display the most recent _n_ kudos using the Slack command: `/kudo list <n>` where `n` is an integer or `*` for all kudos
- [ ] User may display all kudos for an individual with the Slack command: `/kudo user <slack-id>` - [ ] User may display all kudos for an individual with the Slack command: `/kudo user <slack-id>`
## Bonus features ## Bonus features
- [ ] User may list the individual having the most kudos, in descending order, user the Slack command: `/kudo top <n>` where `n` is an integer or `*` for all individuals who have received a kudo - [ ] User may list the individual having the most kudos, in descending order, user the Slack command: `/kudo top <n>` where `n` is an integer or `*` for all individuals who have received a kudo
## Useful links and resources ## Useful links and resources
- [Slack API](https://api.slack.com/) - [Slack API](https://api.slack.com/)
## Example project ## Example project
- [Kudos Slackbot Example](https://cubic-quince.glitch.me/) - [Kudos Slackbot Example](https://cubic-quince.glitch.me/)
- -

@ -1,28 +1,34 @@
---
path: '/movie-db-app'
title: 'Movie Database App'
tier: 'advanced'
---
# Movie Database App # Movie Database App
**Tier:** 3-Advanced **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. 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 - 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. - Resource needed for the project is movie api, examples include Imdb, MovieDB etc.
## User Stories ## User Stories
- [ ] User can see all the latest movie on the front 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 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 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 then see all about the movie ratings, about, actors present on each separate movie page
## Bonus features ## Bonus features
- [ ] User can create an account - [ ] User can create an account
- [ ] User can create their own watch list - [ ] User can create their own watch list
- [ ] User can review movies - [ ] User can review movies
## Useful links and resources ## Useful links and resources
- [MovieDB Api](https://developers.themoviedb.org/3) - [MovieDB Api](https://developers.themoviedb.org/3)
## Example projects ## Example projects

@ -1,3 +1,9 @@
---
path: '/my-podcast-library'
title: 'My Podcast Library'
tier: 'advanced'
---
# My Podcast Library # My Podcast Library
**Tier:** 3-Advanced **Tier:** 3-Advanced
@ -21,65 +27,69 @@ free to use your imagination.
### Favorite Podcast Display ### Favorite Podcast Display
- [ ] User can see their favorite podcasts in a tabular display area - [ ] User can see their favorite podcasts in a tabular display area
- [ ] User can see the message 'No podcasts added yet' in watermark format - [ ] User can see the message 'No podcasts added yet' in watermark format
in this area if no podcasts have been added. in this area if no podcasts have been added.
- [ ] User can see an overview of each favorite podcast that has 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 in this area. This includes the podcast icon, it's name, and the number of
most recent episodes. most recent episodes.
- [ ] User can click on the podcast icon to display a page containing a list - [ ] User can click on the podcast icon to display a page containing a list
of the most recent episodes. of the most recent episodes.
### Favorite Podcast Entry ### 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 see a '+' button at the top of the favorite podcast area with
- [ ] User can click the '+' button to display a popup panel to allow a new the hover text 'Add a new podcast'
favorite podcast added. This panel contains an input area containing a text - [ ] User can click the '+' button to display a popup panel to allow a new
input box for the podcasts page on Podbean (e.g. favorite podcast added. This panel contains an input area containing a text
[Techpoint Charlie](https://www.podbean.com/podcast-detail/k76vd-8adc7/Techpoint-Charlie-Podcast)), a 'Save' button, and a 'Cancel' button. input box for the podcasts page on Podbean (e.g.
- [ ] User can click the 'Save' button to validate the URL and add the [Techpoint Charlie](https://www.podbean.com/podcast-detail/k76vd-8adc7/Techpoint-Charlie-Podcast)), a 'Save' button, and a 'Cancel' button.
podcast to the favorite podcast area. - [ ] User can click the 'Save' button to validate the URL and add the
- [ ] User can see a warning message if the url doesn't start with podcast to the favorite podcast area.
```https://www.podbean.com/podcast-detail/``` or if navigating to the page - [ ] User can see a warning message if the url doesn't start with
results in a 404 error. `https://www.podbean.com/podcast-detail/` or if navigating to the page
- [ ] User can see valid URLs for favorite podcasts retained across sessions. results in a 404 error.
- [ ] User can click the 'Cancel' button to discard any data and dismiss the - [ ] User can see valid URLs for favorite podcasts retained across sessions.
popup. - [ ] User can click the 'Cancel' button to discard any data and dismiss the
popup.
### Most Recent Episodes for a Podcast Page ### 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 - [ ] User can see a table of podcast episodes
title of the episode, the date it was originally broadcast, and a heart icon - [ ] User can see rows in this table showing a clickable episode icon, the
button to mark it as a favorite. title of the episode, the date it was originally broadcast, and a heart icon
- [ ] User can scroll through the list button to mark it as a favorite.
- [ ] User can click on the episode icon to display that episodes page on - [ ] User can scroll through the list
the Podbean web site. - [ ] User can click on the episode icon to display that episodes page on
- [ ] User can click on an episode's heart icon to mark it as a favorite. the Podbean web site.
- [ ] User can click on an episode's heart icon to remove it as a favorite. - [ ] User can click on an episode's heart icon to mark it as a favorite.
- [ ] User can see the table sorted with most recent episodes at the top, - [ ] User can click on an episode's heart icon to remove it as a favorite.
followed by those previously marked as favorites. - [ ] User can see the table sorted with most recent episodes at the top,
- [ ] User can see favorite episodes persist across sessions. followed by those previously marked as favorites.
- [ ] User can see favorite episodes persist across sessions.
## Bonus features ## Bonus features
### Episode Ratings ### Episode Ratings
- [ ] User can see 5 star icons with each episode that denotes how the user
rates it. - [ ] User can see 5 star icons with each episode that denotes how the user
- [ ] User may click stars from left-to-right to rate an episode. Stars are rates it.
filled or changed to a new color when clicked. - [ ] User may click stars from left-to-right to rate an episode. Stars are
- [ ] User may change a rating by clicking on the stars from right-to-left filled or changed to a new color when clicked.
to deselect them. - [ ] User may change a rating by clicking on the stars from right-to-left
- [ ] User can see the list of favorite episodes on the page sorted in to deselect them.
descending rating sequence. - [ ] User can see the list of favorite episodes on the page sorted in
descending rating sequence.
### Searching & Hashtags ### 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 enter a freeform hashtag with an episode on the most recent
- [ ] User can see a search box on the main page and a 'Search' button episodes page. This hashtag does not need to be predefined.
- [ ] User can enter hashtags in the search box to display a page of episodes - [ ] User can see a search box on the main page and a 'Search' button
from any podcast with the same format as the most recent episodes page. - [ ] User can enter hashtags in the search box to display a page of episodes
- [ ] User can click on a cancel button on the search results page to return from any podcast with the same format as the most recent episodes page.
to the main page. - [ ] User can click on a cancel button on the search results page to return
to the main page.
## Useful links and resources ## Useful links and resources

@ -1,3 +1,9 @@
---
path: '/nasa-exoplanet-query'
title: 'NASA Exoplanet Query'
tier: 'advanced'
---
# NASA Exoplanet Query # NASA Exoplanet Query
**Tier:** 3-Advanced **Tier:** 3-Advanced
@ -13,42 +19,42 @@ for simple queries by its users.
### Requirements & Constraints ### Requirements & Constraints
- The Developer should implement a means of efficiently loading the exoplanet - 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 - Similarly, the Developer should utilize a data structure and search mechanism
that minimizes the time required to query the exoplanet data and display the that minimizes the time required to query the exoplanet data and display the
results. results.
- The Developer will need to review the Exoplanet Archive documentation to - 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 Stories
- [ ] User can see an query input panel containing dropdowns allowing the - [ ] User can see an query input panel containing dropdowns allowing the
user to query on year of discovery, discovery method, host name, and discovery user to query on year of discovery, discovery method, host name, and discovery
facility. facility.
- [ ] User can also see 'Clear' and 'Search' buttons in the query input panel. - [ ] 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 - [ ] User can select a single value from any one or all of the query
dropdowns. dropdowns.
- [ ] User can click the 'Search' button to search for exoplanets matching - [ ] User can click the 'Search' button to search for exoplanets matching
all of the selected query values. all of the selected query values.
- [ ] User can see an error message if the 'Search' button was clicked, but - [ ] User can see an error message if the 'Search' button was clicked, but
no query values were selected. no query values were selected.
- [ ] User can see the matching exoplanet data displayed in tabular format - [ ] User can see the matching exoplanet data displayed in tabular format
in an results panel below the query panel. Only the queriable fields should in an results panel below the query panel. Only the queriable fields should
be displayed. be displayed.
- [ ] User can click the 'Clear' button to reset the query selections and - [ ] 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. clear any data displayed in the results panel, if a search had been performed.
## Bonus features ## Bonus features
- [ ] User can see the host name as a hyperlink to NASA's Confirmed Planet - [ ] User can see the host name as a hyperlink to NASA's Confirmed Planet
Overview Page for that planet Overview Page for that planet
- [ ] User can click on the host name to display the Confirmed Planet Overview - [ ] User can click on the host name to display the Confirmed Planet Overview
Page in a new browser tab. Page in a new browser tab.
- [ ] User can see icons (such as up and down symbols) in the column headers - [ ] 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 - [ ] User can click on the up symbol to sort the rows in the results panel
in ascending order on the values in that column. in ascending order on the values in that column.
- [ ] User can click on the down symbol to sort the rows in the results panel - [ ] User can click on the down symbol to sort the rows in the results panel
in descending order on the values in the column. in descending order on the values in the column.
## Useful links and resources ## Useful links and resources

@ -1,3 +1,9 @@
---
path: '/shell-game'
title: 'Shell Game'
tier: 'advanced'
---
# Shell Game # Shell Game
**Tier:** 3-Advanced **Tier:** 3-Advanced
@ -17,30 +23,30 @@ is allowed to continue guessing until the pea is located.
## User Stories ## User Stories
- [ ] User can see the canvas with three shells and the pea. - [ ] 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 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 see the pea move under the shell that's been clicked.
- [ ] User can click on a 'Shuffle' button to start an animated shuffling of - [ ] User can click on a 'Shuffle' button to start an animated shuffling of
the shells for 5 seconds. the shells for 5 seconds.
- [ ] User can click on the shell she believes the pea is hidden under when - [ ] User can click on the shell she believes the pea is hidden under when
the animation stops. the animation stops.
- [ ] User can see the shell that has been clicked rise to reveal if the pea - [ ] User can see the shell that has been clicked rise to reveal if the pea
is hidden under it. is hidden under it.
- [ ] User can continue clicking shells until the pea is found. - [ ] User can continue clicking shells until the pea is found.
- [ ] User can see a congratulations message when the pea is located - [ ] 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 - [ ] 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. under (step #2 above). The steps above are then repeated.
## Bonus features ## Bonus features
- [ ] User can see a score panel containing the number of wins and the - [ ] User can see a score panel containing the number of wins and the
number of games played. number of games played.
- [ ] User can see the number of games played increase when the pea is hidden - [ ] User can see the number of games played increase when the pea is hidden
under a shell under a shell
- [ ] User can see the number of wins incremented when the pea is found on - [ ] User can see the number of wins incremented when the pea is found on
the first guess. the first guess.
- [ ] User can see the shell hiding the pea to animate (color, size, or - [ ] User can see the shell hiding the pea to animate (color, size, or
some other effect) when it is clicked (a correct guess). some other effect) when it is clicked (a correct guess).
## Useful links and resources ## Useful links and resources

@ -1,3 +1,9 @@
---
path: '/shuffle-card-deck-app'
title: 'Shuffle Card Deck App'
tier: 'advanced'
---
# Shuffle Card Deck # Shuffle Card Deck
**Tier:** 3-Advanced **Tier:** 3-Advanced
@ -19,31 +25,31 @@ choose to attempt the bonus feature.
## User Stories ## User Stories
- [ ] User can see a panel containing a text box the user can enter the - [ ] 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, 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', ending time, and total time of the test, and two buttons - 'JS Random',
'Xorshift'. 'Xorshift'.
- [ ] User can enter a number from 1 to 10,000 to specify the number of - [ ] 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. 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 - [ ] 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 selected random number algorithm. The random number algorithm will be executed
for the number of rounds entered by the user above. for the number of rounds entered by the user above.
- [ ] User can see a warning message if number of rounds has not been entered, - [ ] 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. 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 - [ ] User can see a tabular output area where the results of each algorithm
are displayed - algorithm name, time started, time ended, and total time. 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 - [ ] 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. number of rounds is changed before all three tests have been run.
- [ ] User can click the 'Cancel' button in the warning dialog to dismiss - [ ] User can click the 'Cancel' button in the warning dialog to dismiss
the dialog with no changes. the dialog with no changes.
- [ ] User can click the 'OK' button in the warning dialog to clear the - [ ] User can click the 'OK' button in the warning dialog to clear the
output area and close the warning dialog. output area and close the warning dialog.
## Bonus features ## Bonus features
- [ ] User can see a third algorithm button - 'WELL512a.c'. - [ ] User can see a third algorithm button - 'WELL512a.c'.
- [ ] Developer should review the output and determine why the fastest - [ ] Developer should review the output and determine why the fastest
algorithm is faster than the slowest algorithm. algorithm is faster than the slowest algorithm.
## Useful links and resources ## Useful links and resources

@ -1,3 +1,9 @@
---
path: '/slack-archiver'
title: 'Slack Archiver'
tier: 'advanced'
---
# Slack Archiver # Slack Archiver
**Tier:** 3-Advanced **Tier:** 3-Advanced
@ -25,15 +31,15 @@ development of this application.
## User Stories ## User Stories
- [ ] Allow the user to specify the channels to be archived. This includes both adding and removing channels from the list - [ ] 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 - [ ] 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 - [ ] 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 - [ ] 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 - [ ] 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 ## 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 ## Useful links and resources

@ -1,3 +1,9 @@
---
path: '/spell-it-app'
title: 'Spell-It App'
tier: 'advanced'
---
# Spell-It # Spell-It
**Tier:** 3-Advanced **Tier:** 3-Advanced
@ -11,33 +17,33 @@ recording of a word the user must then spell using the computer keyboard.
## User Stories ## User Stories
- [ ] User can click the 'Play' button to hear the word that's to be entered - [ ] 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 - [ ] User can see letters displayed in the word input text box as they are
entered on the keyboard entered on the keyboard
- [ ] User can click the 'Enter' button to submit the word that has been - [ ] User can click the 'Enter' button to submit the word that has been
typed in the word input text box typed in the word input text box
- [ ] User can see a confirmation message when the correct word is typed - [ ] 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 - [ ] User can see a message requesting the word be typed again when it is
spelled incorrectly spelled incorrectly
- [ ] User can see a tally of the number of correct spellings, total number - [ ] User can see a tally of the number of correct spellings, total number
of words attempted, and a percentage of successful entries. of words attempted, and a percentage of successful entries.
## Bonus features ## Bonus features
- [ ] User can hear an confirmation sound when the word is correctly spelled - [ ] 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 hear a warning sound when the word is incorrectly spelled
- [ ] User can click the 'Hint' button to highlight the incorrect letters - [ ] User can click the 'Hint' button to highlight the incorrect letters
in the word input text box in the word input text box
- [ ] User can press the 'Enter' key on the keyboard to submit a typed word - [ ] User can press the 'Enter' key on the keyboard to submit a typed word
or click the 'Enter' button in the app window or click the 'Enter' button in the app window
## Useful links and resources ## Useful links and resources
- [Texas Instruments Speak and Spell](<https://en.wikipedia.org/wiki/Speak_%26_Spell_(toy)>) - [Texas Instruments Speak and Spell](<https://en.wikipedia.org/wiki/Speak_%26_Spell_(toy)>)
- [Web Audio API](https://codepen.io/2kool2/pen/RgKeyp) - [Web Audio API](https://codepen.io/2kool2/pen/RgKeyp)
- [Click and Speak](https://codepen.io/shangle/pen/Wvqqzq) - [Click and Speak](https://codepen.io/shangle/pen/Wvqqzq)
## Example projects ## Example projects
- [Speak N Spell on Google Play](https://play.google.com/store/apps/details?id=au.id.weston.scott.SpeakAndSpell&hl=en_US) - [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) - [Word Wizard for iOS](https://itunes.apple.com/app/id447312716)

@ -1,3 +1,9 @@
---
path: '/survey-app'
title: 'Survey App'
tier: 'advanced'
---
# Survey App # Survey App
**Tier:** 3-Advanced **Tier:** 3-Advanced
@ -15,10 +21,10 @@ and present results.
Users of this app are divided into two distinct roles, each having different Users of this app are divided into two distinct roles, each having different
requirements: requirements:
- _Survey Coordinators_ define and conduct surveys. This is an administrative - _Survey Coordinators_ define and conduct surveys. This is an administrative
function not available to normal users. function not available to normal users.
- _Survey Respondents_ Complete surveys and view results. They have no - _Survey Respondents_ Complete surveys and view results. They have no
administrative privileges within the app. administrative privileges within the app.
Commercial survey tools include distribution functionality that mass emails Commercial survey tools include distribution functionality that mass emails
surveys to Survey Respondents. For simplicity, this app assumes that surveys surveys to Survey Respondents. For simplicity, this app assumes that surveys
@ -28,68 +34,68 @@ open for responses will be accessed from the app's web page.
### General ### General
- [ ] Survey Coordinators and Survey Respondents can define, conduct, and - [ ] Survey Coordinators and Survey Respondents can define, conduct, and
view surveys and survey results from a common website view surveys and survey results from a common website
- [ ] Survey Coordinators can login to the app to access administrative - [ ] Survey Coordinators can login to the app to access administrative
functions, like defining a survey. functions, like defining a survey.
### Defining a Survey ### Defining a Survey
- [ ] Survey Coordinator can define a survey containing 1-10 multiple choice - [ ] Survey Coordinator can define a survey containing 1-10 multiple choice
questions. questions.
- [ ] Survey Coordinator can define 1-5 mutually exclusive selections to each - [ ] Survey Coordinator can define 1-5 mutually exclusive selections to each
question. question.
- [ ] Survey Coordinator can enter a title for the survey. - [ ] Survey Coordinator can enter a title for the survey.
- [ ] Survey Coordinator can click a 'Cancel' button to return to the home - [ ] Survey Coordinator can click a 'Cancel' button to return to the home
page without saving the survey. page without saving the survey.
- [ ] Survey Coordinator can click a 'Save' button save a survey. - [ ] Survey Coordinator can click a 'Save' button save a survey.
### Conducting a Survey ### Conducting a Survey
- [ ] Survey Coordinator can open a survey by selecting a survey from a - [ ] Survey Coordinator can open a survey by selecting a survey from a
list of previously defined surveys list of previously defined surveys
- [ ] Survey Coordinators can close a survey by selecting it from a list of - [ ] Survey Coordinators can close a survey by selecting it from a list of
open surveys open surveys
- [ ] Survey Respondent can complete a survey by selecting it from a list of - [ ] Survey Respondent can complete a survey by selecting it from a list of
open surveys open surveys
- [ ] Survey Respondent can select responses to survey questions by clicking - [ ] Survey Respondent can select responses to survey questions by clicking
on a checkbox on a checkbox
- [ ] Survey Respondents can see that a previously selected response will - [ ] Survey Respondents can see that a previously selected response will
automatically be unchecked if a different response is clicked. automatically be unchecked if a different response is clicked.
- [ ] Survey Respondents can click a 'Cancel' button to return to the home - [ ] Survey Respondents can click a 'Cancel' button to return to the home
page without submitting the survey. page without submitting the survey.
- [ ] Survey Respondents can click a 'Submit' button submit their responses - [ ] Survey Respondents can click a 'Submit' button submit their responses
to the survey. to the survey.
- [ ] Survey Respondents can see an error message if 'Submit' is clicked, - [ ] Survey Respondents can see an error message if 'Submit' is clicked,
but not all questions have been responded to. but not all questions have been responded to.
### Viewing Survey Results ### Viewing Survey Results
- [ ] Survey Coordinators and Survey Respondents can select the survey to - [ ] Survey Coordinators and Survey Respondents can select the survey to
display from a list of closed surveys display from a list of closed surveys
- [ ] Survey Coordinators and Survey Respondents can view survey results as - [ ] Survey Coordinators and Survey Respondents can view survey results as
in tabular format showing the number of responses for each of the possible in tabular format showing the number of responses for each of the possible
selections to the questions. selections to the questions.
## Bonus features ## Bonus features
- [ ] Survey Respondents can create a unique account in the app - [ ] Survey Respondents can create a unique account in the app
- [ ] Survey Respondents can login to the app - [ ] Survey Respondents can login to the app
- [ ] Survey Respondents cannot complete the same survey more than once - [ ] Survey Respondents cannot complete the same survey more than once
- [ ] Survey Coordinators and Survey Respondents can view graphical - [ ] Survey Coordinators and Survey Respondents can view graphical
representations of survey results (e.g. pie, bar, column, etc. charts) representations of survey results (e.g. pie, bar, column, etc. charts)
## Useful links and resources ## Useful links and resources
Libraries for building surveys: Libraries for building surveys:
- [SurveyJS](https://surveyjs.io/Overview/Library/) - [SurveyJS](https://surveyjs.io/Overview/Library/)
Some commercial survey services include: Some commercial survey services include:
- [Survey Monkey](https://www.surveymonkey.com/) - [Survey Monkey](https://www.surveymonkey.com/)
- [Traversy](https://youtu.be/SSDED3XKz-0) - [Traversy](https://youtu.be/SSDED3XKz-0)
- [Typeform](https://www.typeform.com/) - [Typeform](https://www.typeform.com/)
## Example projects ## Example projects

Loading…
Cancel
Save