Shantanu Dutta
6 years ago
committed by
GitHub
commit
ea5f3eaacc
@ -0,0 +1,76 @@
|
|||||||
|
# Bit Masks
|
||||||
|
|
||||||
|
**Tier:** 2-Intermediate
|
||||||
|
|
||||||
|
It's difficult to find an app that doesn't rely on some form of conditional
|
||||||
|
logic to implement its functionality. This is almost always performed using
|
||||||
|
statements like:
|
||||||
|
```
|
||||||
|
if (processAccount === true) {
|
||||||
|
/* do something */
|
||||||
|
}
|
||||||
|
```
|
||||||
|
If and switch statements work well for a limited number of conditionals, but
|
||||||
|
what if your app had 10's or 100's of conditionals to evaluate? Luckily, there's
|
||||||
|
another way.
|
||||||
|
|
||||||
|
The goal of the Bit Masks app is demonstrate how to use bit masks to evaluate
|
||||||
|
longer sequences of switches without having to rely on long strings of
|
||||||
|
conditional statements.
|
||||||
|
|
||||||
|
## User Stories
|
||||||
|
|
||||||
|
- [ ] User can see a vertical list of checkboxes with the following cities
|
||||||
|
and their timezones:
|
||||||
|
- Moscow: GMT +3
|
||||||
|
- Paris: GMT +2
|
||||||
|
- Berlin: GMT +2
|
||||||
|
- Brussels: GMT +2
|
||||||
|
- Amsterdam: GMT +2
|
||||||
|
- Rome: GMT +2
|
||||||
|
- London: GMT +1
|
||||||
|
- Dublin: GMT +1
|
||||||
|
- New York: GMT -4
|
||||||
|
- Washington, DC: GMT -4
|
||||||
|
- St. Louis: GMT -5
|
||||||
|
- Los Angeles: GMT -7
|
||||||
|
- Tokyo: GMT +9
|
||||||
|
- Beijing: GMT +8
|
||||||
|
- Ho Chi Mihn City: GMT +7
|
||||||
|
- Mumbai: GMT +5
|
||||||
|
- [ ] User can see a GMT search box where an integer representing a GMT offset
|
||||||
|
can be entered into and a 'Find Cities' button.
|
||||||
|
- [ ] User can click the 'Find Cities' button to display the names of the
|
||||||
|
cities in that GMT offset in an output area.
|
||||||
|
|
||||||
|
### Developer Notes
|
||||||
|
|
||||||
|
For this exercise the developer should use sequences of 24
|
||||||
|
binary bits, each corresponding a GMT time zone from +12 to -12 to map cities
|
||||||
|
to their timezones.
|
||||||
|
|
||||||
|
Searches should be conducted by combining a bit mask for the desired time zone
|
||||||
|
against the city-specific bit sequences to identify matches. Determining if a
|
||||||
|
city meets the search criteria shouldn't rely on a statement such as
|
||||||
|
```
|
||||||
|
if (city[i].gmtOffset === searchOffset ) {
|
||||||
|
/* Found it! */
|
||||||
|
}
|
||||||
|
```
|
||||||
|
It should instead rely on a bitwise operation.
|
||||||
|
|
||||||
|
## Bonus features
|
||||||
|
|
||||||
|
- [ ] User can search for cities NOT in the GMT offset entered in the
|
||||||
|
search box.
|
||||||
|
- [ ] User can see a summary count of the number of cities that met the
|
||||||
|
search criteria.
|
||||||
|
|
||||||
|
## Useful links and resources
|
||||||
|
|
||||||
|
- [World Time Zones](https://greenwichmeantime.com/time-zone/definition/)
|
||||||
|
- [Bitwise Operators (MDN)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators)
|
||||||
|
|
||||||
|
## Example projects
|
||||||
|
|
||||||
|
[Bitwise Operation](https://codepen.io/Lunoware/pen/XBWEPY)
|
||||||
@ -0,0 +1,96 @@
|
|||||||
|
# Boole Bots Game
|
||||||
|
|
||||||
|
**Tier:** 3-Advanced
|
||||||
|
|
||||||
|
Boole Bots is a game that is not only fun, but also an aid in helping to
|
||||||
|
understand basic Boolean logic. This game has an arena of 8x8 game tiles in
|
||||||
|
which your bots move at random speeds and trajectories. The Bots are assigned
|
||||||
|
boolean values of 0 or 1 and boolean operations - AND, OR, NOR, NOT.
|
||||||
|
|
||||||
|
When a bot collides with another bot its boolean operation is applied to both
|
||||||
|
it and the other bots' boolean value to determine which one wins or looses, or
|
||||||
|
if the collision results in a tie. Loosing bots disappear and winning bots
|
||||||
|
continue moving about the arena until only one remains.
|
||||||
|
|
||||||
|
### Requirements & Constraints
|
||||||
|
|
||||||
|
- Developers may use graphics and game physics libraries to build the game.
|
||||||
|
|
||||||
|
## User Stories
|
||||||
|
|
||||||
|
- [ ] User can see the game window with these components
|
||||||
|
- Game configuration input panel
|
||||||
|
- Leaderboard showing bots ranked by their scores
|
||||||
|
- Game controls
|
||||||
|
- Arena of 8x8 game tiles where the bots battle
|
||||||
|
|
||||||
|
### Game Configuration Panel
|
||||||
|
- [ ] User can see a game configuration panel with these subcomponents:
|
||||||
|
- Four bot panels with controls to allow the user to input a unique bot
|
||||||
|
name, select its Boolean value and operation, select the bots speed using a
|
||||||
|
slider, and a dropdown to specify its starting direction - North, South,
|
||||||
|
East, West
|
||||||
|
- [ ] User can enter a unique name for each bot into an input text box
|
||||||
|
- [ ] User can see an error message if the name entered is the same name
|
||||||
|
assigned to another bot.
|
||||||
|
- [ ] User can select the bots Boolean value (0 or 1) from a dropdown.
|
||||||
|
- [ ] User can select a bots Boolean operation from a dropdown - AND, OR, XOR,
|
||||||
|
or NOT.
|
||||||
|
- [ ] User can move the speed slider to set a bots speed
|
||||||
|
- [ ] User can select a bots starting direction from the direction dropdown.
|
||||||
|
- [ ] User can see the bot randomly assigned to a tile in the arena once its
|
||||||
|
name has been defined.
|
||||||
|
|
||||||
|
### Game Controls
|
||||||
|
- [ ] User can a button in the game control panel to 'Battle!'
|
||||||
|
- [ ] User can click the 'Battle!' button to start the bot battle in the arena.
|
||||||
|
- [ ] User can see bots move based on the speed and direction assigned to them.
|
||||||
|
- [ ] User can see the 'Battle!' button text change to 'Stop!' once a battle
|
||||||
|
is started.
|
||||||
|
- [ ] User can click the 'Stop!' button to halt gameplay
|
||||||
|
- [ ] User can see the 'Stop!' button text change back to 'Battle!' once a
|
||||||
|
single bot wins the match.
|
||||||
|
|
||||||
|
### Arena
|
||||||
|
- [ ] User can see bots bounce off the boundary walls of the arena in a new
|
||||||
|
direction
|
||||||
|
- [ ] User can see bots pause for an instant when they collide.
|
||||||
|
- [ ] User can see a bot disappear after colliding if the result of it's
|
||||||
|
boolean operation appied to its boolean value and that of the bot is has
|
||||||
|
collided with result in 0.
|
||||||
|
- [ ] User can see a bot that wins a collision resume its path at the same
|
||||||
|
speed and direction.
|
||||||
|
- [ ] User can see both colliding bots resume their paths at the same speed
|
||||||
|
and direction in the event of a tie. In other words, when the collision resulted
|
||||||
|
in the same boolean result (0 or 1) for both.
|
||||||
|
- [ ] User can see gameplay stop when only one bot remains.
|
||||||
|
|
||||||
|
### Leaderboard
|
||||||
|
- [ ] User can see the display of wins and losses for each bot on the
|
||||||
|
leaderboard
|
||||||
|
- [ ] User can see the tally of wins incremented for bots winning a collision.
|
||||||
|
- [ ] User can see the tally of losses decremented for bots loosing a collision.
|
||||||
|
|
||||||
|
## Bonus features
|
||||||
|
|
||||||
|
- [ ] User can see a log panel displaying the details of game milestones.
|
||||||
|
Hint: This may be useful to the Developer during development and debugging.
|
||||||
|
- [ ] User can see a game clock displaying current elapsed game time that is
|
||||||
|
updated every second.
|
||||||
|
- [ ] User may choose a bots starting direction as North, Northeast, Southeast,
|
||||||
|
South, Southwest, West, or Northwest.
|
||||||
|
- [ ] User may specify the dimensions of the arena.
|
||||||
|
- [ ] User may select an unique icon for a bot from a palette of icons. Icons
|
||||||
|
in the palette are disabled once they are assigned.
|
||||||
|
- [ ] User can see the bot with the most wins highlighted in some way in the
|
||||||
|
Leaderboard.
|
||||||
|
|
||||||
|
## Useful links and resources
|
||||||
|
|
||||||
|
- [George Boole (Wikipedia)](https://en.wikipedia.org/wiki/George_Boole)
|
||||||
|
- [Boolean Algebra (Wikipedia)](https://en.wikipedia.org/wiki/Boolean_algebra)
|
||||||
|
- [Video Game Physics Tutorial - Part I: An Introduction to Rigid Body Dynamics](https://www.toptal.com/game/video-game-physics-part-i-an-introduction-to-rigid-body-dynamics)
|
||||||
|
|
||||||
|
## Example projects
|
||||||
|
|
||||||
|
- N/a
|
||||||
@ -0,0 +1,79 @@
|
|||||||
|
# Bug Race
|
||||||
|
|
||||||
|
**Tier:** 3-Advanced
|
||||||
|
|
||||||
|
In this project you will test your animation skills by creating a game that
|
||||||
|
lets the user race bugs while trying to guess the winner. As part of this
|
||||||
|
you'll need to provide the user with various controls that allow the game to
|
||||||
|
be customized including bug icons, assigning names to the bugs, making a choice
|
||||||
|
of who the winner might be, and bug speed.
|
||||||
|
|
||||||
|
### Constraints
|
||||||
|
- The developer will need to select the bug icons to be used in the game
|
||||||
|
- The developer should randomly adjust the speed of each bug before a race
|
||||||
|
starts so they travel at different rates within the speed selected by the
|
||||||
|
user (slow, normal, or fast).
|
||||||
|
- It is up to the developer to define the speed ranges associated with the slow,
|
||||||
|
normal, and fast speed setting.
|
||||||
|
- You may use an animation library, but you'll get more out of this project
|
||||||
|
if you try to implement it using native language features.
|
||||||
|
|
||||||
|
## User Stories
|
||||||
|
|
||||||
|
- [ ] User can see:
|
||||||
|
- An input panel containing controls to configure the game's UI and
|
||||||
|
operation.
|
||||||
|
- A race track consisting of four horizontal lanes the bugs will travel in
|
||||||
|
- A radio button associated with each lane to allow the user to select a
|
||||||
|
potential winner
|
||||||
|
- A 'Start' button.
|
||||||
|
|
||||||
|
### Game Controls
|
||||||
|
- [ ] User can see the following controls in the input panel.
|
||||||
|
- A list of race lane numbers with radio buttons for each showing
|
||||||
|
thumbnails for three unique bugs, and a text box the user can use to
|
||||||
|
give the bug a name.
|
||||||
|
- An Speed selection control with three radio buttons - Slow, Normal, Fast
|
||||||
|
- [ ] User can click a radio button to select the bug icon to be assigned
|
||||||
|
to a lane.
|
||||||
|
- [ ] User can see an warning message if the same icon is selected for more
|
||||||
|
than one lane.
|
||||||
|
- [ ] User can enter a name for the bug in each lane.
|
||||||
|
- [ ] User can see an error message if the same name is repeated for more than
|
||||||
|
one bug.
|
||||||
|
- [ ] User can select the bug speed by clicking one of the Speed radio buttons
|
||||||
|
|
||||||
|
### Racing
|
||||||
|
|
||||||
|
- [ ] User can select a potential winner by clicking on the radio button on
|
||||||
|
any lane.
|
||||||
|
- [ ] User can start a race by clicking on the 'Start' button
|
||||||
|
- [ ] User can see the 'Start' button is disabled until the race is over
|
||||||
|
- [ ] User can see an error message if no winner was selected.
|
||||||
|
- [ ] User can see bugs race across their assigned lane to the finish line
|
||||||
|
- [ ] User can see all bugs stop moving when the first one reaches the finish
|
||||||
|
line
|
||||||
|
- [ ] User can see game metrics updated to show the number of races run in
|
||||||
|
this session.
|
||||||
|
|
||||||
|
## Bonus features
|
||||||
|
|
||||||
|
- [ ] User can see race metrics for each bug showing the number of races
|
||||||
|
run, number of wins, and number of losses.
|
||||||
|
- [ ] User can see the winning bug bounce when it wins a race
|
||||||
|
- [ ] User can see loosing bugs flip on their backs when they loose a race
|
||||||
|
- [ ] User can hear unique sounds played when the race starts and ends.
|
||||||
|
|
||||||
|
## Useful links and resources
|
||||||
|
|
||||||
|
- [3D Bug Images](https://www.google.com/search?q=3d+bug+drawings&tbm=isch&source=hp&sa=X&ved=2ahUKEwjxkNT7--jhAhUI-6wKHW3_CgQQsAR6BAgHEAE&biw=1279&bih=550)
|
||||||
|
- [Basic Animations (MDN)](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations
|
||||||
|
)
|
||||||
|
- [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)
|
||||||
|
|
||||||
|
## Example projects
|
||||||
|
|
||||||
|
- [Arcade Game](https://jdmedlock.github.io/arcadegame/)
|
||||||
|
- [Drag Race Animation](https://codepen.io/Delime/pen/IyuAr)
|
||||||
|
- [Horse Race](https://codepen.io/nathanielzanzouri/pen/jVgEZY)
|
||||||
@ -0,0 +1,150 @@
|
|||||||
|
# Charity Finder
|
||||||
|
|
||||||
|
**Tier:** 2-Intermediate
|
||||||
|
|
||||||
|
With the Charity Finder app you'll not only get to refine your Web Developer
|
||||||
|
skills, but you will also have an opportunity to see how you can do good. The
|
||||||
|
objective of this app is to utilize the [Global Giving](https://www.globalgiving.org/) organizations API to provide your users with a list of global charities they
|
||||||
|
can search to find a charity that matches their philanthropic interests.
|
||||||
|
|
||||||
|
### Constraints
|
||||||
|
- Since the app is asking the user to choose and contribute to a charitable
|
||||||
|
cause it's important that the presentation of information be clear and concise.
|
||||||
|
Just as important is the need for the UI/UX to be polished and engaging to use.
|
||||||
|
|
||||||
|
Although this is true of all apps, its even more the case here since each
|
||||||
|
user that abandons the site represents the loss of an opportunity to do good
|
||||||
|
(see ['What is Web Site Conversion?](##useful-links-and-resources)) below.
|
||||||
|
|
||||||
|
## User Stories
|
||||||
|
|
||||||
|
- [ ] User can see a page heading containing the application name.
|
||||||
|
- [ ] User can see an overview of what the app is intended for in 'splash'
|
||||||
|
page format.
|
||||||
|
- [ ] User can see a search area containing an set of drop down boxes that
|
||||||
|
allow the user to specify search criteria for charitable organizations
|
||||||
|
including:
|
||||||
|
- Organization name
|
||||||
|
- Organizations home country
|
||||||
|
- Countries the organization serves
|
||||||
|
- [ ] User can see a 'Search' button
|
||||||
|
- [ ] User can click on the 'Search' button to display information cards
|
||||||
|
for the matching organizations in a search results area.
|
||||||
|
- [ ] User can see organization information cards in the search results area
|
||||||
|
containing:
|
||||||
|
- ID
|
||||||
|
- Name
|
||||||
|
- Address
|
||||||
|
- Logo
|
||||||
|
- [ ] User can click the logo in the organizations information card to open a
|
||||||
|
new window to that organizations home page.
|
||||||
|
- [ ] User can see a page footer with links to your GitHub and social media
|
||||||
|
accounts including social media icons (like the Twitter icon).
|
||||||
|
|
||||||
|
## Bonus features
|
||||||
|
|
||||||
|
- [ ] User can see a search dropdown for themes the charity focuses on.
|
||||||
|
- [ ] User can select multiple options in the search dropdowns.
|
||||||
|
- [ ] User can see a project link (e.g. 'PROJECT') on the organization
|
||||||
|
information card.
|
||||||
|
- [ ] User can click on the project link to display a page with information
|
||||||
|
describing the Global Giving project the organization is associated with.
|
||||||
|
Hint: examine the structure of the JSON returned from the API to understand
|
||||||
|
the relationship between projects and organizations.
|
||||||
|
|
||||||
|
## Useful links and resources
|
||||||
|
|
||||||
|
- [What is Web Site Conversion?](https://www.marketing91.com/what-is-website-conversion/)
|
||||||
|
- [Global Giving API](https://www.globalgiving.org/api/)
|
||||||
|
- Sample JSON for a project returned through the API:
|
||||||
|
```
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
|
||||||
|
<projects numberFound="26842">
|
||||||
|
<hasNext>true</hasNext>
|
||||||
|
<nextProjectId>367</nextProjectId>
|
||||||
|
<project>
|
||||||
|
<active>false</active>
|
||||||
|
<activities>To fund the training of health professionals including nurses, psychologists, and social workers, and buy medicine and equipment.</activities>
|
||||||
|
<additionalDocumentation>https://www.globalgiving.org/pfil/359/projdoc.doc</additionalDocumentation>
|
||||||
|
<approvedDate>2004-06-01T12:43:27-04:00</approvedDate>
|
||||||
|
<contactAddress>28 Pine Street</contactAddress>
|
||||||
|
<contactCity>Mechanic Falls</contactCity>
|
||||||
|
<contactCountry>United States</contactCountry>
|
||||||
|
<contactPostal>04256</contactPostal>
|
||||||
|
<contactState>Maine</contactState>
|
||||||
|
<contactUrl>http://groups.yahoo.com/group/FOCUSonCambodia</contactUrl>
|
||||||
|
<country>Cambodia</country>
|
||||||
|
<funding>8239.33</funding>
|
||||||
|
<goal>55000.00</goal>
|
||||||
|
<id>359</id>
|
||||||
|
<image id="0">
|
||||||
|
<imagelink size="small">
|
||||||
|
<url>https://www.globalgiving.org/pfil/359/pict_grid1.jpg</url>
|
||||||
|
</imagelink>
|
||||||
|
<imagelink size="thumbnail">
|
||||||
|
<url>https://www.globalgiving.org/pfil/359/pict_thumbnail.jpg</url>
|
||||||
|
</imagelink>
|
||||||
|
<imagelink size="medium">
|
||||||
|
<url>https://www.globalgiving.org/pfil/359/pict_med.jpg</url>
|
||||||
|
</imagelink>
|
||||||
|
<imagelink size="large">
|
||||||
|
<url>https://www.globalgiving.org/pfil/359/pict_grid7.jpg</url>
|
||||||
|
</imagelink>
|
||||||
|
<imagelink size="extraLarge">
|
||||||
|
<url>https://www.globalgiving.org/pfil/359/pict_large.jpg</url>
|
||||||
|
</imagelink>
|
||||||
|
<imagelink size="original">
|
||||||
|
<url>https://www.globalgiving.org/pfil/359/pict_original.jpg</url>
|
||||||
|
</imagelink>
|
||||||
|
<title>Improving the Health of Children in Cambodia</title>
|
||||||
|
</image>
|
||||||
|
<imageGallerySize>1</imageGallerySize>
|
||||||
|
<imageLink>https://www.globalgiving.org/pfil/359/pict.jpg</imageLink>
|
||||||
|
<iso3166CountryCode>KH</iso3166CountryCode>
|
||||||
|
<longTermImpact>This project will help improve the mental and physical health of orphaned children in Cambodia. This project will also ensure the sustainability of the Nutrition Center in Child Mental Health Center.</longTermImpact>
|
||||||
|
<need>Our beneficiaries will be orphaned children suffering from AIDS/HIV and other diseases and children with mental health problems whose parents do not know how to cope because they were deprived of family experiences by the forced separations of the Pol Pot regime. At the Nutrition Center in Phnom Penh, we will help urban orphans from brothels and hospitals that have abandoned them. At the Child Mental Health Center, we will help families, largely the working poor, from all over Cambodia.</need>
|
||||||
|
<numberOfDonations>102</numberOfDonations>
|
||||||
|
<organization>
|
||||||
|
<activeProjects>0</activeProjects>
|
||||||
|
<addressLine1>1062 Lewiston Road</addressLine1>
|
||||||
|
<addressLine2></addressLine2>
|
||||||
|
<bridgeId>5824171103</bridgeId>
|
||||||
|
<city>New Gloucester</city>
|
||||||
|
<countries>
|
||||||
|
<country>
|
||||||
|
<iso3166CountryCode>KH</iso3166CountryCode>
|
||||||
|
<name>Cambodia</name>
|
||||||
|
</country>
|
||||||
|
</countries>
|
||||||
|
<country>United States</country>
|
||||||
|
<id>10</id>
|
||||||
|
<iso3166CountryCode>US</iso3166CountryCode>
|
||||||
|
<mission>The mission of FOCUS is to pursue humanitarian programs that include medical aid, school construction and supplies, distribution of rice and rice seeds, road improvements, agricultural improvements, fish farms, basic housing, hospital restoration, school scholarships, and loans for infrastructure improvements. We want to help disadvantaged youth and their families, if they have any, in a country where the infrastructure is still weak due to Khmer Rouge depredations.</mission>
|
||||||
|
<name>Friends of Cambodia in the U.S. (FOCUS)</name>
|
||||||
|
<postal>4260</postal>
|
||||||
|
<state>Maine</state>
|
||||||
|
<themes>
|
||||||
|
<theme>
|
||||||
|
<id>health</id>
|
||||||
|
<name>Health</name>
|
||||||
|
</theme>
|
||||||
|
</themes>
|
||||||
|
<totalProjects>2</totalProjects>
|
||||||
|
<url></url>
|
||||||
|
</organization>
|
||||||
|
<progressReportLink>https://www.globalgiving.org/projects/educating-children-of-cambodia/updates/</progressReportLink>
|
||||||
|
<projectLink>https://www.globalgiving.org/projects/educating-children-of-cambodia/</projectLink>
|
||||||
|
<region>Asia and Oceania</region>
|
||||||
|
<remaining>46760.67</remaining>
|
||||||
|
<status>funded</status>
|
||||||
|
<summary>To help abandoned children, many afflicted with HIV/AIDS, and children with mental health problems. We want to address lack of food, medicine and staff training.</summary>
|
||||||
|
<themeName>Health</themeName>
|
||||||
|
<title>Improving the Health of Children in Cambodia</title>
|
||||||
|
<type>project</type>
|
||||||
|
</project>
|
||||||
|
</projects>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Example projects
|
||||||
|
|
||||||
|
[Playing with card layout](https://codepen.io/bradjdouglas/pen/xOZJRz)
|
||||||
@ -0,0 +1,110 @@
|
|||||||
|
# Contribution Tracker
|
||||||
|
|
||||||
|
**Tier:** 3-Advanced
|
||||||
|
|
||||||
|
In the [Charity Finder](./Charity-Finder-App.md) project you created an app to
|
||||||
|
help you locate a charity worthy of your contributions. Once a contribution
|
||||||
|
has been made the goal of the Contribution Tracker app is to track it so to
|
||||||
|
provide users with a record of all contributions for use in monitoring how
|
||||||
|
funds are being directed and to provide records for financial reporting
|
||||||
|
purposes. For example, for tax reporting.
|
||||||
|
|
||||||
|
### Constraints
|
||||||
|
|
||||||
|
- Developers may use Vanilla JS, or a framework of their choice (like React,
|
||||||
|
VueJS, etc.).
|
||||||
|
|
||||||
|
- Developers should not use libraries for calculating and manipulating monetary
|
||||||
|
amounts. All calculation and formatting should be done in the language chosen
|
||||||
|
to develop the application.
|
||||||
|
|
||||||
|
- Developers may use a graphics presentation library or service of their choice,
|
||||||
|
like [AMCharts](https://www.amcharts.com/).
|
||||||
|
|
||||||
|
- Developers may choose to have transactions persist across sessions using
|
||||||
|
either files or databases. Sensitive data, like transactions, must not be
|
||||||
|
maintained in local storage. Remember that although you can implement
|
||||||
|
protections it is impossible to totally secure browser applications.
|
||||||
|
|
||||||
|
## User Stories
|
||||||
|
|
||||||
|
- [ ] User can see a Navigation Bar at the top of each page containing the
|
||||||
|
application name and a "hamburger" menu with these option:
|
||||||
|
- Dashboard
|
||||||
|
- Transactions
|
||||||
|
- [ ] User can see a Footer Bar at the bottom of each page containing an
|
||||||
|
About link
|
||||||
|
|
||||||
|
### Dashboard Page
|
||||||
|
- [ ] User can see the Dashboard page when the app is started containing
|
||||||
|
graphical summaries of the following key metrics. The graphical representation
|
||||||
|
for each is left up to the Developer.
|
||||||
|
- Contributions by month for the current year
|
||||||
|
- Total contributions by year
|
||||||
|
- Contribution increase/decrease by year
|
||||||
|
- Average contribution amount by month and year
|
||||||
|
- [ ] User can return to the Dashboard page, if currently on another page, by
|
||||||
|
clicking on the 'Dashboard' option in the hamburger menu in the Navigation Bar.
|
||||||
|
|
||||||
|
### Transactions Page
|
||||||
|
- [ ] User can see a transaction input panel containing the following:
|
||||||
|
- Transaction date
|
||||||
|
- Payee name
|
||||||
|
- Amount
|
||||||
|
- Memo
|
||||||
|
- Action buttons - 'Clear', 'Add'
|
||||||
|
- [ ] User can see a tabular transaction ledger containing previously
|
||||||
|
entered transactions. Each row will also contain a 'Modify' and a 'Delete'
|
||||||
|
button.
|
||||||
|
- [ ] User can enter values describing the transaction into the input fields
|
||||||
|
- [ ] User can click the 'Clear' button to reset all input fields to an
|
||||||
|
empty state.
|
||||||
|
- [ ] User can click the 'Add' button to validate the input that has been
|
||||||
|
entered, add the validated entry to the transaction ledger, and clear the input
|
||||||
|
fields.
|
||||||
|
- [ ] User can see a consolidated error message detailing any errors detected
|
||||||
|
in input fields, including:
|
||||||
|
- Invalid date
|
||||||
|
- Blank Payee name
|
||||||
|
- Non-numeric amount field
|
||||||
|
- [ ] User can click on the 'Update' button to modify a previously entered
|
||||||
|
transaction. The transaction details will be copied to the transaction input
|
||||||
|
panel and the 'Add' button will change to 'Modify'.
|
||||||
|
- [ ] User can change values in the input fields and click the 'Modify' to
|
||||||
|
validate the input and update that transactions entry in the ledger. If
|
||||||
|
successful the 'Modify' button will change back to 'Add' and the input fields
|
||||||
|
will be cleared.
|
||||||
|
- [ ] User can click the 'Delete' button to remove a previously entered
|
||||||
|
transaction. A popup dialog will be displayed containing 'Cancel' and 'Okay'
|
||||||
|
buttons to cancel or confirm the delete. If the delete is confirmed the
|
||||||
|
transaction will be removed from the ledger.
|
||||||
|
- [ ] User can return to the Transactions page, if currently on another page,
|
||||||
|
by clicking on the 'Transactions' option in the hamburger menu in the Navigation
|
||||||
|
Bar.
|
||||||
|
|
||||||
|
### About Page
|
||||||
|
- [ ] User can click the About link in the Footer Bar to display information
|
||||||
|
about the Developer.
|
||||||
|
- [ ] User can see links to the Developers GitHub and social media accounts
|
||||||
|
including social media icons (like the Twitter icon).
|
||||||
|
|
||||||
|
## Bonus features
|
||||||
|
|
||||||
|
- [ ] User can click in the transaction date field to display a calendar
|
||||||
|
the date can be selected from rather than manually entering it.
|
||||||
|
- [ ] User can see alternating row background colors in the transaction ledger.
|
||||||
|
- [ ] User can click on a column heading in the transaction ledger to toggle
|
||||||
|
the sort sequence on the values in that column.
|
||||||
|
- [ ] User can see a PDF option near the Transaction Ledger to create a PDF
|
||||||
|
of all transactions (Hint: checkout how this capability can be implemented via
|
||||||
|
[Puppeteer](https://github.com/GoogleChrome/puppeteer)).
|
||||||
|
|
||||||
|
## Useful links and resources
|
||||||
|
|
||||||
|
- [How to Handle Monetary Values in Javascript](https://frontstuff.io/how-to-handle-monetary-values-in-javascript)
|
||||||
|
- [How to Format Number as Currency](https://flaviocopes.com/how-to-format-number-as-currency-javascript/)
|
||||||
|
- [Mintable (GitHub)](https://github.com/kevinschaich/mintable)
|
||||||
|
|
||||||
|
## Example projects
|
||||||
|
|
||||||
|
N/a
|
||||||
@ -0,0 +1,49 @@
|
|||||||
|
# Dynamic CSS Variables
|
||||||
|
|
||||||
|
**Tier:** 1-Beginner
|
||||||
|
|
||||||
|
CSS variables are a powerful tool that lets the developer associate a symbolic
|
||||||
|
name with a value, and then use that name in the stylesheet wherever that
|
||||||
|
value is required. The advantage is that when a change to that value is
|
||||||
|
required it only needs to change in the CSS variable definition rather than in
|
||||||
|
the many spots it may be used.
|
||||||
|
|
||||||
|
What can make this even more powerful is to dynamically change the value of a
|
||||||
|
CSS variable at runtime.
|
||||||
|
|
||||||
|
The goal of this app is to dynamically change the background color of text boxes
|
||||||
|
based to let you gain experience using both CSS variables and dynamically
|
||||||
|
changing them from within the app.
|
||||||
|
|
||||||
|
## User Stories
|
||||||
|
|
||||||
|
- [ ] User can see three two boxes to be used to enter a User ID and Password
|
||||||
|
along with 'Cancel' and 'Login' buttons underneath them. The default background
|
||||||
|
color of the text boxes is white.
|
||||||
|
- [ ] User can enter a user id and password into the text boxes.
|
||||||
|
- [ ] User can click the 'Login' button to validate the user id and password.
|
||||||
|
- [ ] User can see a warning message if one or both of the text boxes contains
|
||||||
|
spaces and the background color of the empty text box will change to light
|
||||||
|
yellow.
|
||||||
|
- [ ] User can see a warning message if the user id doesn't match 'testuser'
|
||||||
|
and the background color of the text box will change to light red.
|
||||||
|
- [ ] User can see a warning message if the password doesn't match 'mypassword'
|
||||||
|
and the background color of the text box will change to light red.
|
||||||
|
- [ ] User can click the 'Cancel' button to clear the text boxes and reset
|
||||||
|
their background colors to white.
|
||||||
|
|
||||||
|
## Bonus features
|
||||||
|
|
||||||
|
- [ ] User can see the color of the text box border change when an error is
|
||||||
|
detected
|
||||||
|
- [ ] User can see the size and font of the contents of the text box change
|
||||||
|
when an error is detected.
|
||||||
|
|
||||||
|
## Useful links and resources
|
||||||
|
|
||||||
|
- [Custom properties (--*): CSS variables (MDN)](https://developer.mozilla.org/en-US/docs/Web/CSS/--*)
|
||||||
|
- [CSSStyleDeclaration (MDN)](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration)
|
||||||
|
|
||||||
|
## Example projects
|
||||||
|
|
||||||
|
[Dynamic CSS Variables](https://codepen.io/gordawn/pen/oOWBXX)
|
||||||
@ -0,0 +1,200 @@
|
|||||||
|
# Your First DB App
|
||||||
|
|
||||||
|
**Tier:** 1-Beginner
|
||||||
|
|
||||||
|
Understanding database concepts and how to use them in your applications is
|
||||||
|
knowledge all developers need to acquire. The objective of Your First DB App
|
||||||
|
is to provide a gentle introduction to database concepts and learning one
|
||||||
|
use case for databases in a frontend app.
|
||||||
|
|
||||||
|
So, did you know that modern browsers have a database management system
|
||||||
|
built into them? IndexedDB is built into most modern browsers and provides
|
||||||
|
developers with basic database features, transaction support, and client-side
|
||||||
|
cross-session persistance.
|
||||||
|
|
||||||
|
### Requirements & Constraints
|
||||||
|
|
||||||
|
- The primary use case for a browser based database is to maintain state or
|
||||||
|
status information that needs to persist across sessions, or as a work area
|
||||||
|
for temporary data. For example, data retrieved from a server that must be
|
||||||
|
reformatted or cleansed before it's presented to the user.
|
||||||
|
|
||||||
|
- It is important to keep in mind that since the client-side browser
|
||||||
|
environment cannot be secured you should not maintain any confidential or
|
||||||
|
personal identifying information (PII) in a browser based database.
|
||||||
|
|
||||||
|
- The following Javascript class is provided with the functionality to allow
|
||||||
|
your app to initially populate and clear the database from the browser so you
|
||||||
|
can test the query logic you'll be adding. You'll be required to hook up
|
||||||
|
buttons on the web page you build to the `clearDB` and `loadDB` functions, and
|
||||||
|
to write your own `queryDB` handler to connect to the `Query DB` button. You'll
|
||||||
|
also need to add a `queryAllRows` function to the Customer class.
|
||||||
|
```
|
||||||
|
class Customer {
|
||||||
|
constructor(dbName) {
|
||||||
|
this.dbName = dbName;
|
||||||
|
if (!window.indexedDB) {
|
||||||
|
window.alert("Your browser doesn't support a stable version of IndexedDB. \
|
||||||
|
Such and such feature will not be available.");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove all rows from the database
|
||||||
|
* @memberof Customer
|
||||||
|
*/
|
||||||
|
removeAllRows = () => {
|
||||||
|
const request = indexedDB.open(this.dbName, 1);
|
||||||
|
|
||||||
|
request.onerror = (event) => {
|
||||||
|
console.log('removeAllRows - Database error: ', event.target.error.code,
|
||||||
|
" - ", event.target.error.message);
|
||||||
|
};
|
||||||
|
|
||||||
|
request.onsuccess = (event) => {
|
||||||
|
console.log('Deleting all customers...');
|
||||||
|
const db = event.target.result;
|
||||||
|
const txn = db.transaction('customers', 'readwrite');
|
||||||
|
txn.onerror = (event) => {
|
||||||
|
console.log('removeAllRows - Txn error: ', event.target.error.code,
|
||||||
|
" - ", event.target.error.message);
|
||||||
|
};
|
||||||
|
txn.oncomplete = (event) => {
|
||||||
|
console.log('All rows removed!');
|
||||||
|
};
|
||||||
|
const objectStore = txn.objectStore('customers');
|
||||||
|
const getAllKeysRequest = objectStore.getAllKeys();
|
||||||
|
getAllKeysRequest.onsuccess = (event) => {
|
||||||
|
getAllKeysRequest.result.forEach(key => {
|
||||||
|
objectStore.delete(key);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Populate the Customer database with an initial set of customer data
|
||||||
|
* @param {[object]} customerData Data to add
|
||||||
|
* @memberof Customer
|
||||||
|
*/
|
||||||
|
initialLoad = (customerData) => {
|
||||||
|
const request = indexedDB.open(this.dbName, 1);
|
||||||
|
|
||||||
|
request.onerror = (event) => {
|
||||||
|
console.log('initialLoad - Database error: ', event.target.error.code,
|
||||||
|
" - ", event.target.error.message);
|
||||||
|
};
|
||||||
|
|
||||||
|
request.onupgradeneeded = (event) => {
|
||||||
|
console.log('Populating customers...');
|
||||||
|
const db = event.target.result;
|
||||||
|
const objectStore = db.createObjectStore('customers', { keyPath: 'userid' });
|
||||||
|
objectStore.onerror = (event) => {
|
||||||
|
console.log('initialLoad - objectStore error: ', event.target.error.code,
|
||||||
|
" - ", event.target.error.message);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Create an index to search customers by name and email
|
||||||
|
objectStore.createIndex('name', 'name', { unique: false });
|
||||||
|
objectStore.createIndex('email', 'email', { unique: true });
|
||||||
|
|
||||||
|
// Populate the database with the initial set of rows
|
||||||
|
customerData.forEach(function(customer) {
|
||||||
|
objectStore.put(customer);
|
||||||
|
});
|
||||||
|
db.close();
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Web page event handlers
|
||||||
|
const DBNAME = 'customer_db';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Clear all customer data from the database
|
||||||
|
*/
|
||||||
|
const clearDB = () => {
|
||||||
|
console.log('Delete all rows from the Customers database');
|
||||||
|
let customer = new Customer(DBNAME);
|
||||||
|
customer.removeAllRows();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add customer data to the database
|
||||||
|
*/
|
||||||
|
const loadDB = () => {
|
||||||
|
console.log('Load the Customers database');
|
||||||
|
|
||||||
|
// Customers to add to initially populate the database with
|
||||||
|
const customerData = [
|
||||||
|
{ userid: '444', name: 'Bill', email: 'bill@company.com' },
|
||||||
|
{ userid: '555', name: 'Donna', email: 'donna@home.org' }
|
||||||
|
];
|
||||||
|
let customer = new Customer(DBNAME);
|
||||||
|
customer.initialLoad(customerData);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
## User Stories
|
||||||
|
|
||||||
|
- [ ] User can see a web page containing a control panel containing three
|
||||||
|
buttons - 'Load DB', 'Query DB', and 'Clear DB'.
|
||||||
|
- [ ] User can see a notification panel where status messages will be posted.
|
||||||
|
- [ ] User can see a scrollable log panel where execution details describing
|
||||||
|
the apps operation and interface with the Customer instance will be posted.
|
||||||
|
- [ ] User can see a running history of notification panel messages in the log
|
||||||
|
panel.
|
||||||
|
- [ ] User can see a scrollable query results area where retrieved customer
|
||||||
|
data will be displayed.
|
||||||
|
- [ ] User can click the 'Load DB' button to populate the database with data.
|
||||||
|
The 'Load DB' button in your UI should be hooked to the `loadDB` event handler
|
||||||
|
that's provided.
|
||||||
|
- [ ] User can see a message displayed in the notification panel when the
|
||||||
|
data load operation starts and ends.
|
||||||
|
- [ ] User can click the 'Query DB' button to list all customers in the query
|
||||||
|
results area. The 'Query DB' button in your UI should be hooked to a `queryDB`
|
||||||
|
event handler you will add to the program.
|
||||||
|
- [ ] User can see a message in the notification panel when the query starts
|
||||||
|
and ends.
|
||||||
|
- [ ] User can see a message in the query results area if there are no rows
|
||||||
|
to display.
|
||||||
|
- [ ] User can click on the 'Clear DB' button to remove all rows from the
|
||||||
|
database. The 'Clear DB' button in your UI should be hooked to the `clearDB`
|
||||||
|
event handler that's provided.
|
||||||
|
- [ ] User can see a message in the notification panel when the clear
|
||||||
|
operation starts and ends.
|
||||||
|
|
||||||
|
## Bonus features
|
||||||
|
|
||||||
|
- [ ] User can see buttons enabled and disabled according to the following
|
||||||
|
table.
|
||||||
|
|
||||||
|
| State | Load DB | Query DB | Clear DB |
|
||||||
|
|---------------------|----------|----------|----------|
|
||||||
|
| Initial App display | enabled | enabled | disabled |
|
||||||
|
| Load DB clicked | disabled | enabled | enabled |
|
||||||
|
| Query DB clicked | disabled | enabled | enabled |
|
||||||
|
| Clear DB clicked | enabled | enabled | disabled |
|
||||||
|
|
||||||
|
- [ ] User can see additional Customer data fields added to those included
|
||||||
|
in the code provided. Developer should add date of last order and total sales
|
||||||
|
for the year.
|
||||||
|
- [ ] Developer should conduct a retrospection on this project:
|
||||||
|
- What use cases can you see for using IndexedDB in your frontend apps?
|
||||||
|
- What advantages and disadvantages can you see over using a file or
|
||||||
|
local storage?
|
||||||
|
- In general, what criteria might you use to determine if IndexedDB is right
|
||||||
|
for your app. (Hint: 100% yes or no is not a valid answer).
|
||||||
|
|
||||||
|
|
||||||
|
## Useful links and resources
|
||||||
|
|
||||||
|
- [IndexedDB Concepts (MDN)](http://tinyw.in/7TIr)
|
||||||
|
- [Using IndexedDB (MDN)](http://tinyw.in/w6k0)
|
||||||
|
- [IndexedDB API (MDN)](http://tinyw.in/GqnF)
|
||||||
|
- [IndexedDB Browser Support](https://caniuse.com/#feat=indexeddb)
|
||||||
|
|
||||||
|
## Example projects
|
||||||
|
|
||||||
|
- N/a
|
||||||
@ -0,0 +1,86 @@
|
|||||||
|
# Flip Art
|
||||||
|
|
||||||
|
**Tier:** 2-Intermediate
|
||||||
|
|
||||||
|
Many developers have found that adding animation to an application is a
|
||||||
|
useful technique that adds impact to the UI, to make it more appealing to its users,
|
||||||
|
and to explain complex subject matter. But, as a developer how do you create
|
||||||
|
these and how do you know what images make effective animations?
|
||||||
|
|
||||||
|
The objective of the Flip Art app is to address both of these needs by
|
||||||
|
providing a simple way to collect and arrange a set of images into an
|
||||||
|
animated sequence that can be replayed and adjusted to achieve the desired
|
||||||
|
impact and effect.
|
||||||
|
|
||||||
|
### Requirements & Constraints
|
||||||
|
|
||||||
|
Developers should not rely on animation or graphics libraries to implement
|
||||||
|
this app. Instead, try using vanilla Javascript, CSS, and HTML.
|
||||||
|
|
||||||
|
## User Stories
|
||||||
|
|
||||||
|
- [ ] User can see the following primary components in the app window:
|
||||||
|
- Configuration panel containing elements used to tailor the animation
|
||||||
|
process.
|
||||||
|
- Operation buttons
|
||||||
|
- Animation display panel animations will be presented in
|
||||||
|
|
||||||
|
### Configuration Panel
|
||||||
|
- [ ] User can see eight thumbnails that will contain individual animation
|
||||||
|
frames
|
||||||
|
- [ ] User can see a button under each thumbnail - '+'
|
||||||
|
- [ ] User can click the '+' button to add a new image to an empty thumbnail
|
||||||
|
- [ ] User can see a file open dialog when the '+' button is clicked to
|
||||||
|
allow an `.jpg` image to be loaded into the thumbnail.
|
||||||
|
- [ ] User can see the '+' button label change to '-' after a thumbnail is
|
||||||
|
loaded.
|
||||||
|
- [ ] User can click the '-' button to remove or replace a thumbnail.
|
||||||
|
- [ ] User can see an 'Transition Speed' slider control.
|
||||||
|
- [ ] User can adjust the 'Transition Speed' slider from slow to fast to
|
||||||
|
adjust the transition time between thumbnails in the Animation Display.
|
||||||
|
|
||||||
|
### Operation Buttons
|
||||||
|
- [ ] User can see two buttons - 'Clear Configuration' and 'Start Animation'
|
||||||
|
- [ ] User can see the 'Start Animation' button disabled until at least one
|
||||||
|
thumbnail has been added via the Configuration Panel.
|
||||||
|
- [ ] User can click the 'Clear Configuration' button to clear all thumbnails
|
||||||
|
from the configuration panel.
|
||||||
|
- [ ] User can click the 'Start Animation' button to begin the Animation
|
||||||
|
Display panel
|
||||||
|
- [ ] User can see the 'Start Animation' button label change to 'Stop
|
||||||
|
Animation' once an animation has been started.
|
||||||
|
- [ ] User can click the 'Stop Animation' button to halt the animation in
|
||||||
|
the animation display
|
||||||
|
- [ ] User can see the 'Stop Animation' button label change to 'Start
|
||||||
|
Animation' when an animation has been stopped.
|
||||||
|
|
||||||
|
### Animation Display Panel
|
||||||
|
- [ ] User can see thumbnails added in the Configuration panel displayed
|
||||||
|
when theh 'Start Animation' button is clicked.
|
||||||
|
- [ ] User can see thumbnails transtion from one to the next at the rate
|
||||||
|
defined by the 'Transition Speed' slider.
|
||||||
|
|
||||||
|
## Bonus features
|
||||||
|
|
||||||
|
- [ ] User can see the border around the thumbnail in the Configuration Panel
|
||||||
|
highlighted when that thumbnail is displayed in the Animation Display panel.
|
||||||
|
- [ ] User can dynamically add any number of thumbnails rather than being
|
||||||
|
restricted to just eight.
|
||||||
|
- [ ] User can hear unique sounds associated with modifying thumbnails in the
|
||||||
|
Configuration Panel.
|
||||||
|
- [ ] User can see a transition type dropdown in the Configuration Panel to
|
||||||
|
define the transition effect between thumbnails in the Animation Display -
|
||||||
|
ease, ease-in, ease-out, ease-in-out
|
||||||
|
- [ ] User can drag and drop thumbnails to reorder them
|
||||||
|
- [ ] User can save the animation as a `.gif` file.
|
||||||
|
|
||||||
|
## Useful links and resources
|
||||||
|
|
||||||
|
- [How to Make Flip Book Animation](https://www.youtube.com/watch?v=Njl-uqnmBGA)
|
||||||
|
- [CSS Animation (MDN)](https://developer.mozilla.org/en-US/docs/Web/CSS/animation)
|
||||||
|
- [Using CSS Transitions (MDN)](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions)
|
||||||
|
- [CSS Transition (MDN)](https://developer.mozilla.org/en-US/docs/Web/CSS/transition)
|
||||||
|
|
||||||
|
## Example projects
|
||||||
|
|
||||||
|
[FlipAnim](http://flipanim.com/)
|
||||||
@ -0,0 +1,72 @@
|
|||||||
|
# GitTweet
|
||||||
|
|
||||||
|
**Tier:** 3-Advanced
|
||||||
|
|
||||||
|
In the [GitHub Timeline](./GitHub-Timeline-App.md) app you used GitHub's API to
|
||||||
|
create a timeline of your repos. What could be more powerful that using an API
|
||||||
|
such as this? Why using two API's, of course.
|
||||||
|
|
||||||
|
The goal of GitTweet is to create a GitHub app to tweet when a pull request
|
||||||
|
is created for one of your repos.
|
||||||
|
|
||||||
|
## User Stories
|
||||||
|
|
||||||
|
- [ ] User can see an input area tabular display prepopulated with rows for
|
||||||
|
each of the GitHub repos she owns and a selection checkbox next to each repo
|
||||||
|
name, a single input date field, and a 'Scan' button.
|
||||||
|
- [ ] User can click the checkboxes in the repo list to select or deselect
|
||||||
|
repos for processing.
|
||||||
|
- [ ] User can enter a date into the date field. This defines the point after
|
||||||
|
which any new PR requests will be tweeted.
|
||||||
|
- [ ] User can click the 'Scan' button to identify repos that have had a new
|
||||||
|
PR created that has not been previously tweeted. In other words. Consecutively
|
||||||
|
entering the same date to scan from should only generate tweets for PR's that
|
||||||
|
have not yet been tweeted.
|
||||||
|
- [ ] User can see an error message if no date was entered, if it is not a
|
||||||
|
valid date, or if it is a future date.
|
||||||
|
- [ ] User can see repos highlighted if a tweet will be generated for them
|
||||||
|
and the 'Scan' button will change to 'Tweet'.
|
||||||
|
- [ ] User may deselect a repo by clicking on its checkbox. Doing this will
|
||||||
|
change the button back to 'Scan' and clicking it will repeat the search for
|
||||||
|
repos that have had new PR's (not yet tweeted) created since the scan date
|
||||||
|
entered by the user.
|
||||||
|
- [ ] User may enter an new scan date at this point which also changes the
|
||||||
|
button back to 'Scan'.
|
||||||
|
- [ ] User may click the 'Tweet' button to send a tweet bearing the following
|
||||||
|
message - `Pull Requst #<pr-number> created for repo <repo name> - <repo description>`.
|
||||||
|
- [ ] User can see this tweet send from her Twitter account.
|
||||||
|
|
||||||
|
## Bonus features
|
||||||
|
|
||||||
|
- [ ] User does not need to manually enter a scan date. If omitted the scan
|
||||||
|
will resume from the last scan date which must persist across sessions.
|
||||||
|
- [ ] User may enter a custom tweet message
|
||||||
|
- [ ] User repo selections will persist across sessions so they do not have
|
||||||
|
to be reselected each time.
|
||||||
|
|
||||||
|
## Useful links and resources
|
||||||
|
|
||||||
|
- [Twitter Developer Docs](https://developer.twitter.com/en.html)
|
||||||
|
- [GitHub Apps](https://developer.github.com/apps//)
|
||||||
|
- GitHub offers two API's you may use to access repo data. You may also choose
|
||||||
|
to use an NPM package to access the GitHub API. Documentation for the GitHub
|
||||||
|
API can be found at:
|
||||||
|
|
||||||
|
- [GitHub REST API V3](https://developer.github.com/v3/)
|
||||||
|
- [GitHub GraphQL API V4](https://developer.github.com/v4/)
|
||||||
|
|
||||||
|
Sample code showing how to use the GitHub API's are:
|
||||||
|
|
||||||
|
- [GitHub REST API client for JavaScript ](https://github.com/octokit/rest.js/)
|
||||||
|
- [GitHub GraphQL API client for browsers and Node](https://github.com/octokit/graphql.js)
|
||||||
|
|
||||||
|
You can use this CURL command to see the JSON returned by the V3 REST API for
|
||||||
|
your repos:
|
||||||
|
|
||||||
|
```
|
||||||
|
curl -u "user-id" https://api.github.com/users/user-id/repos
|
||||||
|
```
|
||||||
|
|
||||||
|
## Example projects
|
||||||
|
|
||||||
|
[Zapier GitHub Integration](https://zapier.com/apps/github/integrations/twitter)
|
||||||
@ -0,0 +1,66 @@
|
|||||||
|
# Hello
|
||||||
|
|
||||||
|
**Tier:** 1-Beginner
|
||||||
|
|
||||||
|
It is a given that applications must provide users with the functionality
|
||||||
|
necessary to accomplish some task or goal. The effectiveness of app functionality
|
||||||
|
is the first determinate of how users perceive the apps they use. However, it
|
||||||
|
is not the only thing that influences user satisfaction.
|
||||||
|
|
||||||
|
The User Interface and User Experience (UI/UX) features developers build into
|
||||||
|
apps have at least an equal amount of influence on users perception of an app.
|
||||||
|
It may be an oversimplification, but UI/UX is largely (but not wholly)
|
||||||
|
concerned with an apps "form". Personalization is an aspect of UX that tailors
|
||||||
|
characteristics and actions to
|
||||||
|
the individual user. Personalizing app functionality in this manner works to
|
||||||
|
make the app easier and more pleasing to use.
|
||||||
|
|
||||||
|
The objective of the Hello app is to leverage geolocation to obtain the users
|
||||||
|
country so it can then generate a customized greeting in the users native
|
||||||
|
language.
|
||||||
|
|
||||||
|
### Constraints
|
||||||
|
|
||||||
|
- Developers should use the [IP-API](http://ip-api.com/docs/api:json) service
|
||||||
|
to obtain the users country code.
|
||||||
|
- Developers should use the
|
||||||
|
[Fourtonfish](https://www.fourtonfish.com/hellosalut/hello/) service to
|
||||||
|
obtain the greeting in the users native language by passing the country code.
|
||||||
|
|
||||||
|
## User Stories
|
||||||
|
|
||||||
|
- [ ] User can see a mock login panel containing a user name text input field,
|
||||||
|
a password text input field, and 'Login' and 'Logout' buttons.
|
||||||
|
- [ ] User can enter a mock login name into the User Name field.
|
||||||
|
- [ ] User can enter a mock password into the Password field. Input should
|
||||||
|
be masked so the user see's asterisks (`*`) for each character that is entered
|
||||||
|
rather than the plaintext password.
|
||||||
|
- [ ] User can click the 'Login' button to perform a mock login.
|
||||||
|
- [ ] User can see a message if either or both of the input fields are empty
|
||||||
|
and the border color of the field(s) in error should be changed to red.
|
||||||
|
- [ ] User can see a login acknowledgement message in the format:
|
||||||
|
`<hello-in-native-language> <user-name> you have successfully logged in!`
|
||||||
|
- [ ] User can click the 'Logout' button to clear the text input fields and
|
||||||
|
any previous messages.
|
||||||
|
- [ ] User can see a new message when successfully logged out in the format:
|
||||||
|
`Have a great day <user-name>!`
|
||||||
|
|
||||||
|
## Bonus features
|
||||||
|
|
||||||
|
- [ ] User can see an additional text input field for a country code which
|
||||||
|
will be used to override the country code obtained through geolocation. Hint:
|
||||||
|
this is a great feature for testing your app.
|
||||||
|
- [ ] User can see additional geolocation information after logging on that
|
||||||
|
includes at least the local IP address, city, region, country name, zip code,
|
||||||
|
longitude, latitude, and timezone.
|
||||||
|
|
||||||
|
## Useful links and resources
|
||||||
|
|
||||||
|
- [Form Follows Function (Wikipedia)](https://en.wikipedia.org/wiki/Form_follows_function)
|
||||||
|
- [Personalization (Wikipedia)](https://en.wikipedia.org/wiki/Personalization)
|
||||||
|
- [Fourtonfish](https://www.fourtonfish.com/hellosalut/hello/)
|
||||||
|
- [IP-API](http://ip-api.com/docs/api:json)
|
||||||
|
|
||||||
|
## Example projects
|
||||||
|
|
||||||
|
[Fourtonfish Hello World](https://fourtonfish.com/hellosalut/helloworld/)
|
||||||
@ -0,0 +1,122 @@
|
|||||||
|
# IOT Mailbox Simulator
|
||||||
|
|
||||||
|
**Tier:** 1-Beginner
|
||||||
|
|
||||||
|
The objective of the IOT Mailbox Simulator is to mimic how an Internet of Things
|
||||||
|
(IOT) enabled physical mailbox might be used to notify you when "snail" mail
|
||||||
|
has arrived. In doing so it will provide you with experience using callbacks
|
||||||
|
to communicate state between different components of an app that are dependent
|
||||||
|
on one another.
|
||||||
|
|
||||||
|
### Requirements & Constraints
|
||||||
|
|
||||||
|
- Even though this app is specified using Javascript concepts and terminology
|
||||||
|
you are free to implement it in the language of your choice.
|
||||||
|
|
||||||
|
- The following Javascript class is provided to start and stop the monitoring
|
||||||
|
process, and to signal the app web page with the state of the mailbox door
|
||||||
|
(open or closed) at preset intervals. Keep in mind that the interval you specify
|
||||||
|
shouldn't exceed the time it normally takes to open or close the door or you
|
||||||
|
might miss a delivery!
|
||||||
|
```
|
||||||
|
/**
|
||||||
|
* Monitor the light levels inside an IOT enabled snail mailbox to detect
|
||||||
|
* when the mailbox door has been opened and closed.
|
||||||
|
* @class IOTMailbox
|
||||||
|
*/
|
||||||
|
class IOTMailbox {
|
||||||
|
/**
|
||||||
|
* Creates an instance of IOTMailbox.
|
||||||
|
* @param {number} [signalInterval=500] Timer interval for checking mailbox status.
|
||||||
|
* @param {function} signalCallback Function to invoke when the timer interval expires.
|
||||||
|
* @memberof IOTMailbox
|
||||||
|
*/
|
||||||
|
constructor(signalInterval = 500, signalCallback) {
|
||||||
|
this.signalInterval = signalInterval;
|
||||||
|
this.signalCallback = signalCallback;
|
||||||
|
this.intervalID = null;
|
||||||
|
this.lastLightLevel = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Start monitoring of the mailbox and invoke the caller specified callback
|
||||||
|
* function when the interval expires.
|
||||||
|
* @memberof IOTMailbox
|
||||||
|
*/
|
||||||
|
startMonitoring = () => {
|
||||||
|
console.log(`Starting monitoring of mailbox...`);
|
||||||
|
this.intervalID = window.setInterval(this.signalStateChange, this.signalInterval);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Stop monitoring the mailbox status
|
||||||
|
* @memberof IOTMailbox
|
||||||
|
*/
|
||||||
|
stopMonitoring = () => {
|
||||||
|
if (this.intervalID === null) return;
|
||||||
|
window.clearInterval(this.intervalID);
|
||||||
|
this.intervalID = null;
|
||||||
|
console.log(`Mailbox monitoring stopped...`);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Pass the current light level inside the mailbox to the users callback
|
||||||
|
* function. The positive light levels indicate the door is open while
|
||||||
|
* negative levels indicate it is closed. Depending on the sampling interval
|
||||||
|
* the mailbox door could be in any postion from fully closed to fully open.
|
||||||
|
* This means the light level varies from interval-to-interval.
|
||||||
|
* @memberof IOTMailbox
|
||||||
|
*/
|
||||||
|
signalStateChange = () => {
|
||||||
|
const lightLevel = this.lastLightLevel >= 0
|
||||||
|
? Math.random().toFixed(2) * -1
|
||||||
|
: Math.random().toFixed(2);
|
||||||
|
console.log(`Mailbox state changed - lightLevel: ${lightLevel}`);
|
||||||
|
this.signalCallback(this.lightLevel);
|
||||||
|
this.lastLightLevel = lightLevel;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
## User Stories
|
||||||
|
|
||||||
|
- [ ] User can see a web page containing a control panel containing three
|
||||||
|
buttons - 'Start Monitoring', 'Stop Monitoring', and 'Reset'.
|
||||||
|
- [ ] User can see a notification panel where the mailbox status will be posted.
|
||||||
|
- [ ] User can see a scrollable log panel where execution details describing
|
||||||
|
the apps operation and interface with the IOTMailbox instance will be posted.
|
||||||
|
- [ ] User can click the 'Start Monitoring' button to begin receiving state
|
||||||
|
notifications from the mailbox.
|
||||||
|
- [ ] User can see a message added to the log panel when monitoring starts.
|
||||||
|
- [ ] User can see a message added to the log panel for light level passed
|
||||||
|
through the callback function. This should include the numerical light level
|
||||||
|
and whether the door is open or closed.
|
||||||
|
- [ ] User can see a message added to the notification panel when the door has
|
||||||
|
been opened.
|
||||||
|
- [ ] User can click the 'Stop Monitoring' button to stop receiving state
|
||||||
|
notifications from the mailbox.
|
||||||
|
- [ ] User can see a message added to the log panel when monitoring stops.
|
||||||
|
|
||||||
|
## Bonus features
|
||||||
|
|
||||||
|
- [ ] User can see the 'Start Monitoring' button disabled until monitoring is
|
||||||
|
stopped.
|
||||||
|
- [ ] User can see the 'Stop Monitoring' button disabled until monitoring is
|
||||||
|
started.
|
||||||
|
- [ ] User can see an field in the control panel allowing the length of the
|
||||||
|
monitoring interval to be specified.
|
||||||
|
- [ ] User can see a message added to the notification panel if the door is
|
||||||
|
left open.
|
||||||
|
- [ ] User can hear an audible alert when the door is opened.
|
||||||
|
|
||||||
|
## Useful links and resources
|
||||||
|
|
||||||
|
- [Snail Mail (Wikipedia)](https://en.wikipedia.org/wiki/Snail_mail)
|
||||||
|
- [Internet of Things (Wikipedia)](https://en.wikipedia.org/wiki/Internet_of_things)
|
||||||
|
- [IOT Mailbox: An Introduction](https://iotexpert.com/2018/08/13/iot-mailbox-an-introduction/)
|
||||||
|
- [What the Heck is a Callback?](https://codeburst.io/javascript-what-the-heck-is-a-callback-aba4da2deced)
|
||||||
|
- [window.setInterval (MDN)](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval)
|
||||||
|
|
||||||
|
## Example projects
|
||||||
|
|
||||||
|
N/a
|
||||||
@ -0,0 +1,30 @@
|
|||||||
|
# Movie Database App
|
||||||
|
|
||||||
|
**Tier:** 3-Advanced
|
||||||
|
|
||||||
|
Find your next movie or create your watchlist with this App. It include reviews, rating, actors and anything you need to know about the movie.
|
||||||
|
|
||||||
|
- This application will help users find their next movie to watch by showing helpful stats
|
||||||
|
- Resource needed for the project is movie api, examples include Imdb, MovieDB etc.
|
||||||
|
|
||||||
|
## User Stories
|
||||||
|
|
||||||
|
- [ ] User can see all the latest movie on the front page
|
||||||
|
- [ ] User scroll down to see all other movies according to release date
|
||||||
|
- [ ] User can click on any of the movie to go to their own separate page
|
||||||
|
- [ ] User can then see all about the movie ratings, about, actors present on each separate movie page
|
||||||
|
|
||||||
|
## Bonus features
|
||||||
|
|
||||||
|
- [ ] User can create an account
|
||||||
|
- [ ] User can create their own watch list
|
||||||
|
- [ ] User can review movies
|
||||||
|
|
||||||
|
## Useful links and resources
|
||||||
|
|
||||||
|
- [MovieDB Api](https://developers.themoviedb.org/3)
|
||||||
|
|
||||||
|
## Example projects
|
||||||
|
|
||||||
|
[Movie Database App w/ React by Oliver Gomes](http://phobic-heat.surge.sh/)
|
||||||
|
[Movie Browser App w/ React&Redux&Bootstrap by Nataliia Pylypenko](https://api-cinema-10d15.firebaseapp.com/)
|
||||||
@ -0,0 +1,92 @@
|
|||||||
|
# My Podcast Library
|
||||||
|
|
||||||
|
**Tier:** 3-Advanced
|
||||||
|
|
||||||
|
In the [GitHub Status](./GitHub-Status-App.md) and [Podcast Directory](./Podcast-Directory-App.md) you learned what web scraping is and how you can
|
||||||
|
use it as an alternative data source when API's and backend databases aren't
|
||||||
|
available. The _My Podcast Library_ app merges your newfound knowledge of
|
||||||
|
web scraping with your frontend skills to extend the simple Podcast Directory
|
||||||
|
app into something more complex and useful.
|
||||||
|
|
||||||
|
The goal of _My Podcast Library_ is to build a more personalized library of
|
||||||
|
your favorite podcasts and episodes. In this app you'll use
|
||||||
|
[Puppeteer](https://github.com/GoogleChrome/puppeteer) and
|
||||||
|
[Podbean](https://www.podbean.com) to create an app to maintain your
|
||||||
|
personal library of podcasts.
|
||||||
|
|
||||||
|
This project is described in detail by the following user stories, but feel
|
||||||
|
free to use your imagination.
|
||||||
|
|
||||||
|
## User Stories
|
||||||
|
|
||||||
|
### Favorite Podcast Display
|
||||||
|
|
||||||
|
- [ ] User can see their favorite podcasts in a tabular display area
|
||||||
|
- [ ] User can see the message 'No podcasts added yet' in watermark format
|
||||||
|
in this area if no podcasts have been added.
|
||||||
|
- [ ] User can see an overview of each favorite podcast that has been added
|
||||||
|
in this area. This includes the podcast icon, it's name, and the number of
|
||||||
|
most recent episodes.
|
||||||
|
- [ ] User can click on the podcast icon to display a page containing a list
|
||||||
|
of the most recent episodes.
|
||||||
|
|
||||||
|
### Favorite Podcast Entry
|
||||||
|
- [ ] User can see a '+' button at the top of the favorite podcast area with
|
||||||
|
the hover text 'Add a new podcast'
|
||||||
|
- [ ] User can click the '+' button to display a popup panel to allow a new
|
||||||
|
favorite podcast added. This panel contains an input area containing a text
|
||||||
|
input box for the podcasts page on Podbean (e.g.
|
||||||
|
[Techpoint Charlie](https://www.podbean.com/podcast-detail/k76vd-8adc7/Techpoint-Charlie-Podcast)), a 'Save' button, and a 'Cancel' button.
|
||||||
|
- [ ] User can click the 'Save' button to validate the URL and add the
|
||||||
|
podcast to the favorite podcast area.
|
||||||
|
- [ ] User can see a warning message if the url doesn't start with
|
||||||
|
```https://www.podbean.com/podcast-detail/``` or if navigating to the page
|
||||||
|
results in a 404 error.
|
||||||
|
- [ ] User can see valid URLs for favorite podcasts retained across sessions.
|
||||||
|
- [ ] User can click the 'Cancel' button to discard any data and dismiss the
|
||||||
|
popup.
|
||||||
|
|
||||||
|
### Most Recent Episodes for a Podcast Page
|
||||||
|
- [ ] User can see a table of podcast episodes
|
||||||
|
- [ ] User can see rows in this table showing a clickable episode icon, the
|
||||||
|
title of the episode, the date it was originally broadcast, and a heart icon
|
||||||
|
button to mark it as a favorite.
|
||||||
|
- [ ] User can scroll through the list
|
||||||
|
- [ ] User can click on the episode icon to display that episodes page on
|
||||||
|
the Podbean web site.
|
||||||
|
- [ ] User can click on an episode's heart icon to mark it as a favorite.
|
||||||
|
- [ ] User can click on an episode's heart icon to remove it as a favorite.
|
||||||
|
- [ ] User can see the table sorted with most recent episodes at the top,
|
||||||
|
followed by those previously marked as favorites.
|
||||||
|
- [ ] User can see favorite episodes persist across sessions.
|
||||||
|
|
||||||
|
## Bonus features
|
||||||
|
|
||||||
|
### Episode Ratings
|
||||||
|
- [ ] User can see 5 star icons with each episode that denotes how the user
|
||||||
|
rates it.
|
||||||
|
- [ ] User may click stars from left-to-right to rate an episode. Stars are
|
||||||
|
filled or changed to a new color when clicked.
|
||||||
|
- [ ] User may change a rating by clicking on the stars from right-to-left
|
||||||
|
to deselect them.
|
||||||
|
- [ ] User can see the list of favorite episodes on the page sorted in
|
||||||
|
descending rating sequence.
|
||||||
|
|
||||||
|
### Searching & Hashtags
|
||||||
|
- [ ] User can enter a freeform hashtag with an episode on the most recent
|
||||||
|
episodes page. This hashtag does not need to be predefined.
|
||||||
|
- [ ] User can see a search box on the main page and a 'Search' button
|
||||||
|
- [ ] User can enter hashtags in the search box to display a page of episodes
|
||||||
|
from any podcast with the same format as the most recent episodes page.
|
||||||
|
- [ ] User can click on a cancel button on the search results page to return
|
||||||
|
to the main page.
|
||||||
|
|
||||||
|
## Useful links and resources
|
||||||
|
|
||||||
|
- [Puppeteer](https://github.com/GoogleChrome/puppeteer)
|
||||||
|
- [Web Scraping with a Headless Browser: A Puppeteer Tutorial](https://www.toptal.com/puppeteer/headless-browser-puppeteer-tutorial)
|
||||||
|
- [querySelectorAll](https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/querySelectorAll)
|
||||||
|
|
||||||
|
## Example projects
|
||||||
|
|
||||||
|
N/a
|
||||||
@ -0,0 +1,62 @@
|
|||||||
|
# NASA Exoplanet Query
|
||||||
|
|
||||||
|
**Tier:** 3-Advanced
|
||||||
|
|
||||||
|
Since 1992 over 4,000 exoplanets have been discovered outside our solar
|
||||||
|
system. The United States National Aeronautics and Space Administration (NASA)
|
||||||
|
maintains a publicly accessible archive of the data collected on these in
|
||||||
|
comma separated value (CSV) format.
|
||||||
|
|
||||||
|
The objective of the NASA Exoplanet Query app is to make this data available
|
||||||
|
for simple queries by its users.
|
||||||
|
|
||||||
|
### Requirements & Constraints
|
||||||
|
|
||||||
|
- The Developer should implement a means of efficiently loading the exoplanet
|
||||||
|
CSV data obtained from NASA to minimize any delays when the application starts.
|
||||||
|
- Similarly, the Developer should utilize a data structure and search mechanism
|
||||||
|
that minimizes the time required to query the exoplanet data and display the
|
||||||
|
results.
|
||||||
|
- The Developer will need to review the Exoplanet Archive documentation to
|
||||||
|
understand the format of the data fields.
|
||||||
|
|
||||||
|
## User Stories
|
||||||
|
|
||||||
|
- [ ] User can see an query input panel containing dropdowns allowing the
|
||||||
|
user to query on year of discovery, discovery method, host name, and discovery
|
||||||
|
facility.
|
||||||
|
- [ ] User can also see 'Clear' and 'Search' buttons in the query input panel.
|
||||||
|
- [ ] User can select a single value from any one or all of the query
|
||||||
|
dropdowns.
|
||||||
|
- [ ] User can click the 'Search' button to search for exoplanets matching
|
||||||
|
all of the selected query values.
|
||||||
|
- [ ] User can see an error message if the 'Search' button was clicked, but
|
||||||
|
no query values were selected.
|
||||||
|
- [ ] User can see the matching exoplanet data displayed in tabular format
|
||||||
|
in an results panel below the query panel. Only the queriable fields should
|
||||||
|
be displayed.
|
||||||
|
- [ ] User can click the 'Clear' button to reset the query selections and
|
||||||
|
clear any data displayed in the results panel, if a search had been performed.
|
||||||
|
|
||||||
|
## Bonus features
|
||||||
|
|
||||||
|
- [ ] User can see the host name as a hyperlink to NASA's Confirmed Planet
|
||||||
|
Overview Page for that planet
|
||||||
|
- [ ] User can click on the host name to display the Confirmed Planet Overview
|
||||||
|
Page in a new browser tab.
|
||||||
|
- [ ] User can see icons (such as up and down symbols) in the column headers
|
||||||
|
- [ ] User can click on the up symbol to sort the rows in the results panel
|
||||||
|
in ascending order on the values in that column.
|
||||||
|
- [ ] User can click on the down symbol to sort the rows in the results panel
|
||||||
|
in descending order on the values in the column.
|
||||||
|
|
||||||
|
## Useful links and resources
|
||||||
|
|
||||||
|
- [Big O Notation (Wikipedia)](https://en.wikipedia.org/wiki/Big_O_notation)
|
||||||
|
- [CSV2JSON](./CSV2JSON-App.md)
|
||||||
|
- [Exoplanet (Wikipedia)](https://en.wikipedia.org/wiki/Exoplanet)
|
||||||
|
- [NASA Exoplanet Archive](https://exoplanetarchive.ipac.caltech.edu/cgi-bin/TblView/nph-tblView?app=ExoTbls&config=planets)
|
||||||
|
|
||||||
|
## Example projects
|
||||||
|
|
||||||
|
N/a
|
||||||
@ -0,0 +1,63 @@
|
|||||||
|
# Pearson Regression
|
||||||
|
|
||||||
|
**Tier:** 1-Beginner
|
||||||
|
|
||||||
|
There are few, if any, applications that don't require some form of
|
||||||
|
cross-disciplinary knowledge in order to implement useful functionality for
|
||||||
|
a user. In the case of an app for the medical profession it might be domain
|
||||||
|
expertise in biology or pharmacology. A paint manufacturer or a crop science
|
||||||
|
business might rely on apps with an intimate knowledge of chemistry. And, a
|
||||||
|
payroll application will certainly incorporate HR and accounting concepts.
|
||||||
|
|
||||||
|
Regardless of the industry segment an app is developed for one cross domain
|
||||||
|
expertise in common with them all is mathematics. As an application developer
|
||||||
|
you don't have to be a mathematician, but it's useful to have an understanding
|
||||||
|
of how to apply mathematical concepts to the problems you are trying to solve.
|
||||||
|
|
||||||
|
The objective of this app is to apply the Pearson Correlation Coefficient
|
||||||
|
against two sets of data to provide the user with the degree to which they
|
||||||
|
may or may not be related. For example, given a set of temperatures and another
|
||||||
|
set of car prices this would let the user test whether or not they are related
|
||||||
|
(spoiler alert: they are unrelated!).
|
||||||
|
|
||||||
|
### Constraints
|
||||||
|
|
||||||
|
- The Developer must program all calculations without relying on a package.
|
||||||
|
|
||||||
|
## User Stories
|
||||||
|
|
||||||
|
- [ ] User can see an input panel with two input fields allowing entry of `x`
|
||||||
|
and `y` coordinates, and 'Add' and 'Calculate' buttons.
|
||||||
|
- [ ] User can enter numbers into these boxes where `x` and `y` are observations
|
||||||
|
from the two data sets.
|
||||||
|
- [ ] User can click the 'Add' button to add the `x` and `y` to a tabular
|
||||||
|
output area listing the pairs of observations.
|
||||||
|
- [ ] User can see and error message if either of the two input fields are
|
||||||
|
empty or do not contain valid real numbers.
|
||||||
|
- [ ] User can see the 'Calculate' button is disabled until errors have been
|
||||||
|
corrected.
|
||||||
|
- [ ] User can click the 'Calculate' button to perform the regression analysis
|
||||||
|
and to display its results.
|
||||||
|
- [ ] User can see results of the calculation which include:
|
||||||
|
- Arithmetic means for both the `x` and `y` observations
|
||||||
|
- Standard deviations for both the `x` and `y` observations
|
||||||
|
- Pearson correlation coefficient with one of the following interpretations:
|
||||||
|
- No correlation
|
||||||
|
- Neutral
|
||||||
|
- Some correlation
|
||||||
|
|
||||||
|
## Bonus features
|
||||||
|
|
||||||
|
- [ ] User can see a scatter plot of the observations
|
||||||
|
- [ ] User can upload observations from a file on the local machine.
|
||||||
|
- [ ] User can see a regression line overlaying the scatter plot
|
||||||
|
|
||||||
|
## Useful links and resources
|
||||||
|
|
||||||
|
- [Pearson Correlation Coefficient (Wikipedia)](https://en.wikipedia.org/wiki/Pearson_correlation_coefficient)
|
||||||
|
- [Linear Regression](https://en.wikipedia.org/wiki/Linear_regression)
|
||||||
|
- [Pearson's Correlation Coefficient](http://www.code-in-javascript.com/pearsons-correlation-coefficient-in-javascript/)
|
||||||
|
|
||||||
|
## Example projects
|
||||||
|
|
||||||
|
[Correlation](https://memory.psych.mun.ca/tech/js/correlation.shtml)
|
||||||
@ -0,0 +1,70 @@
|
|||||||
|
# QRCode Badge Generator
|
||||||
|
|
||||||
|
**Tier:** 2-Intermediate
|
||||||
|
|
||||||
|
At some point in your career you will probably find yourself involved helping
|
||||||
|
to coordinate a company-sponsored event or a local technical Meetup. It's not
|
||||||
|
uncommon in these types of gatherings for attendees to want to exchange contact
|
||||||
|
information between themselves.
|
||||||
|
|
||||||
|
But how to do that? Attendees could always exchange business cards or write
|
||||||
|
down each others email or social media account names, but that can be slow and
|
||||||
|
error prone. Wouldn't it be nice to be able to scan a each others badges to
|
||||||
|
capture this type of information quickly and more dependably?
|
||||||
|
|
||||||
|
If you answered 'Yes!" to this question then QRCode Badge Generator is an
|
||||||
|
app you will be interested in creating. The objective of this application is
|
||||||
|
to collect a meeting attendee's name, email address, Twitter, and GitHub
|
||||||
|
account names and print a name badge with a QRcode that can be scanned using
|
||||||
|
a smartphone.
|
||||||
|
|
||||||
|
### Requirements & Constraints
|
||||||
|
|
||||||
|
- For this app you'll want to use the NPM package
|
||||||
|
[QRCode Generator](https://www.npmjs.com/package/qrcode-generator) to encode
|
||||||
|
the information you collect from the attendee in a QR code.
|
||||||
|
|
||||||
|
- To test your implementation you'll need to download a QR code reader onto
|
||||||
|
your smartphone or tablet. There are many such readers that are free of charge.
|
||||||
|
Check the app store for your device to find the one that best suites your needs.
|
||||||
|
|
||||||
|
## User Stories
|
||||||
|
|
||||||
|
- [ ] User can see an input panel containing input fields for the attendee
|
||||||
|
name, email address, Twitter account name, GitHub account name, and 'Cancel'
|
||||||
|
and 'Create' buttons.
|
||||||
|
- [ ] User can enter data into these input fields. Note that attendee name
|
||||||
|
and email address are required, but the Twitter and GitHub account names are
|
||||||
|
optional fields.
|
||||||
|
- [ ] User can click the 'Cancel' button to clear all input fields as well as
|
||||||
|
the badge panel (see below) if it has been created.
|
||||||
|
- [ ] User can click the 'Create' button to generated an image of the
|
||||||
|
attendees name badge.
|
||||||
|
- [ ] User can see an error message if any of the following are true:
|
||||||
|
- Required fields are empty
|
||||||
|
- A first name and last name have not been entered
|
||||||
|
- Email input field isn't a properly formatted email address
|
||||||
|
- Twitter account name doesn't start with '@'
|
||||||
|
- [ ] User can see an badge panel displayed on screen containing this
|
||||||
|
information, plus a QR code encoded with this information.
|
||||||
|
|
||||||
|
## Bonus features
|
||||||
|
|
||||||
|
- [ ] User can see a 'Print' button below the badge panel.
|
||||||
|
- [ ] User can see the 'Print' button enabled only after the input fields
|
||||||
|
have been validated and the badge is displayed in the badge panel.
|
||||||
|
- [ ] User can make corrections to the input fields and click 'Create' to
|
||||||
|
update the contents of the badge panel.
|
||||||
|
- [ ] User can click the 'Print' button to reproduce the badge panel on a
|
||||||
|
label or hardcopy.
|
||||||
|
- [ ] User can see the '@' symbol automatically prepended to the Twitter
|
||||||
|
account name so it doesn't have to be manually entered.
|
||||||
|
|
||||||
|
## Useful links and resources
|
||||||
|
|
||||||
|
- [QR code (Wikipedia)](https://en.wikipedia.org/wiki/QR_code)
|
||||||
|
- [QRCode Generator](https://www.npmjs.com/package/qrcode-generator)
|
||||||
|
|
||||||
|
## Example projects
|
||||||
|
|
||||||
|
[QRCode Generator](https://kazuhikoarase.github.io/qrcode-generator/js/demo/)
|
||||||
@ -0,0 +1,87 @@
|
|||||||
|
# Sales Reciepts
|
||||||
|
|
||||||
|
**Tier:** 2-Intermediate
|
||||||
|
|
||||||
|
In the [First DB App](./First-DB-App.md) you were able to learn the basics of
|
||||||
|
how to use the IndexedDB database that's built into the browser. In Sales
|
||||||
|
Reciepts you'll take this a step further by creating an app that records
|
||||||
|
point of sales receipts, presumably for subsequent balancing against cash in
|
||||||
|
the stores cash register.
|
||||||
|
|
||||||
|
The objective of Sales Receipts is to implement point-of-sale functionality for
|
||||||
|
a merchant and to make a record of all sales in a database.
|
||||||
|
|
||||||
|
### Requirements & Constraints
|
||||||
|
|
||||||
|
- Developer should implement this app as a frontend application that uses the
|
||||||
|
IndexedDB database in the browser to record all sales receipts.
|
||||||
|
|
||||||
|
- Developer may implement the inventory of items available for sale as an
|
||||||
|
array of objects in the application source. Each item should be defined with
|
||||||
|
the following attributes:
|
||||||
|
- Item number (unique)
|
||||||
|
- Description
|
||||||
|
- Unit price
|
||||||
|
|
||||||
|
- Developer should use her UI/UX skills to create a pleasant and efficient
|
||||||
|
window layout that makes it easy for the user to purchase items and display
|
||||||
|
purchase history.
|
||||||
|
|
||||||
|
- The primary use case for a browser based database is to maintain state or
|
||||||
|
status information that needs to persist across sessions, or as a work area for
|
||||||
|
temporary data. For example, data retrieved from a server that must be
|
||||||
|
reformatted or cleansed before it's presented to the user.
|
||||||
|
|
||||||
|
- It is important to keep in mind that since the client-side browser environment
|
||||||
|
cannot be secured you should not maintain any confidential or personal
|
||||||
|
identifying information (PII) in a browser based database.
|
||||||
|
|
||||||
|
## User Stories
|
||||||
|
|
||||||
|
- [ ] User can see an purchase panel containing buttons for each item containing
|
||||||
|
the item number, description, and unit price, as well as a 'Clear' and a
|
||||||
|
'Checkout' button.
|
||||||
|
- [ ] User can click an item button to make a purchase.
|
||||||
|
- [ ] User can see an field displaying the total sale amount incremented as
|
||||||
|
items are purchased.
|
||||||
|
- [ ] User can see a reciept panel displaying the date and time of the sale,
|
||||||
|
as well as all items selected for purchase. This includes the item number,
|
||||||
|
description, and unit price.
|
||||||
|
- [ ] User can click the 'Clear' button to clear all purchases at any time
|
||||||
|
before checking out.
|
||||||
|
- [ ] User can click the 'Checkout' button to complete purchase all selected
|
||||||
|
items. The final total purchase amount will be added to the end of the reciept
|
||||||
|
panel and all selected items will be added to the database.
|
||||||
|
- [ ] User can see the receipt panel cleared after all items have been added
|
||||||
|
to the database.
|
||||||
|
- [ ] User can see a 'Daily Sales' and a 'Clear All' button at the bottom of
|
||||||
|
the app window.
|
||||||
|
- [ ] User can click the 'Daily Sales' button to display all items purchased
|
||||||
|
by all customers in the receipt panel along with the total of them all.
|
||||||
|
- [ ] User can click the 'Clear All' button to clear the receipt panel and
|
||||||
|
delete the record of all purchases from the database.
|
||||||
|
|
||||||
|
## Bonus features
|
||||||
|
|
||||||
|
- [ ] User can see an thumbnail image of the items on the item buttons.
|
||||||
|
- [ ] User can see the 'Clear' button replaced by 'Clear Entry' and 'Cancel
|
||||||
|
All' buttons under the purchase panel
|
||||||
|
- [ ] User can click the 'Clear Entry' button to clear the last selected item
|
||||||
|
from the receipt panel. This has the effect of unselecting that item.
|
||||||
|
- [ ] User can click the 'Cancel All' button to clear all purchases made
|
||||||
|
before checking out.
|
||||||
|
- [ ] User can see an input field in the input panel the user may enter the
|
||||||
|
name of the customer into when a purchase is made. The customer name will be
|
||||||
|
added to all items purchased by that customer in the receipt panel and in the
|
||||||
|
rows added to the database.
|
||||||
|
|
||||||
|
## Useful links and resources
|
||||||
|
|
||||||
|
- [IndexedDB Concepts (MDN)](http://tinyw.in/7TIr)
|
||||||
|
- [Using IndexedDB (MDN)](http://tinyw.in/w6k0)
|
||||||
|
- [IndexedDB API (MDN)](http://tinyw.in/GqnF)
|
||||||
|
- [IndexedDB Browser Support](https://caniuse.com/#feat=indexeddb)
|
||||||
|
|
||||||
|
## Example projects
|
||||||
|
|
||||||
|
- N/a
|
||||||
@ -0,0 +1,60 @@
|
|||||||
|
# Shuffle Card Deck
|
||||||
|
|
||||||
|
**Tier:** 3-Advanced
|
||||||
|
|
||||||
|
As a Web Developer you'll be asked to come up with innovative applications that
|
||||||
|
solve real world problems for real people. But something you'll quickly learn
|
||||||
|
is that no matter how many wonderful features you pack into an app users won't
|
||||||
|
use it if it isn't performant. In other words, there is a direct link between
|
||||||
|
how an app performs and whether users perceive it as usable.
|
||||||
|
|
||||||
|
The objective of the Shuffle Card Deck app is to find the fastest technique for
|
||||||
|
shuffling a deck of cards you can use in game apps you create. But, more
|
||||||
|
important it will provide you with experience at measuring and evaluating app
|
||||||
|
performance.
|
||||||
|
|
||||||
|
Your task is to implement the performance evaluation algorithm, the Xorshift
|
||||||
|
pseudorandom number generator, as well as the WELL512a.c algorithm if you
|
||||||
|
choose to attempt the bonus feature.
|
||||||
|
|
||||||
|
## User Stories
|
||||||
|
|
||||||
|
- [ ] User can see a panel containing a text box the user can enter the
|
||||||
|
number of rounds into, three output text boxes to contain the starting time,
|
||||||
|
ending time, and total time of the test, and two buttons - 'JS Random',
|
||||||
|
'Xorshift'.
|
||||||
|
- [ ] User can enter a number from 1 to 10,000 to specify the number of
|
||||||
|
times (or rounds) the selected random number is to be executed.
|
||||||
|
- [ ] User can click one of the three buttons to start the evaluation of the
|
||||||
|
selected random number algorithm. The random number algorithm will be executed
|
||||||
|
for the number of rounds entered by the user above.
|
||||||
|
- [ ] User can see a warning message if number of rounds has not been entered,
|
||||||
|
if it is not within the range 1 to 10,000, or if it is not a valid integer.
|
||||||
|
- [ ] User can see a tabular output area where the results of each algorithm
|
||||||
|
are displayed - algorithm name, time started, time ended, and total time.
|
||||||
|
- [ ] User can see a warning dialog with a 'Cancel' and a 'OK' button if the
|
||||||
|
number of rounds is changed before all three tests have been run.
|
||||||
|
- [ ] User can click the 'Cancel' button in the warning dialog to dismiss
|
||||||
|
the dialog with no changes.
|
||||||
|
- [ ] User can click the 'OK' button in the warning dialog to clear the
|
||||||
|
output area and close the warning dialog.
|
||||||
|
|
||||||
|
## Bonus features
|
||||||
|
|
||||||
|
- [ ] User can see a third algorithm button - 'WELL512a.c'.
|
||||||
|
- [ ] Developer should review the output and determine why the fastest
|
||||||
|
algorithm is faster than the slowest algorithm.
|
||||||
|
|
||||||
|
## Useful links and resources
|
||||||
|
|
||||||
|
- [Random Number Generation (Wikipedia)](https://en.wikipedia.org/wiki/Random_number_generation)
|
||||||
|
- [Math.random (MDN)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random)
|
||||||
|
- [Xorshift (Wikipedia)](https://en.wikipedia.org/wiki/Xorshift)
|
||||||
|
- [WELL512a.c](http://www.iro.umontreal.ca/~panneton/well/WELL512a.c)
|
||||||
|
- [console.time (MDN)](https://developer.mozilla.org/en-US/docs/Web/API/Console/time)
|
||||||
|
- [Using the Chrome DevTools Audit Feature to Measure and Optimize Performance (Part 1)](https://medium.com/chingu/using-the-chrome-devtools-audit-feature-to-measure-and-optimize-performance-part-1-868a20bbfde8)
|
||||||
|
- [Using the Chrome DevTools Audit Feature to Measure and Optimize Performance (Part 2)](https://medium.com/chingu/using-the-chrome-devtools-audit-feature-to-measure-and-optimize-performance-part-2-af4a78bc6cf0)
|
||||||
|
|
||||||
|
## Example projects
|
||||||
|
|
||||||
|
Add one or more examples of projects that have similar functionalities to this application. This will act as a guide for the developer.
|
||||||
@ -0,0 +1,68 @@
|
|||||||
|
# Vigenere Cipher
|
||||||
|
|
||||||
|
**Tier:** 1-Beginner
|
||||||
|
|
||||||
|
The rate and impact of security breaches in recent years makes it imperative
|
||||||
|
that developers understand the methods bad actors use to compromise apps.
|
||||||
|
Understanding how an app can be compromised is the first step in coming up
|
||||||
|
with effective protection measures.
|
||||||
|
|
||||||
|
One of the easiest ways bad actors can compromise an app is to access
|
||||||
|
data that's left unencrypted by the developer. There are a number of strong
|
||||||
|
encryption algorithms available to ensure that data is not readable even if
|
||||||
|
access is compromised. These include AES, Blowfish, and TripleDES to name a
|
||||||
|
few.
|
||||||
|
|
||||||
|
However, these algorithms can be quite complex to implement so the objective
|
||||||
|
of this app is to implement a classical encryption algorithm, the Vigenere
|
||||||
|
Cipher to learn the basics of how ciphers work.
|
||||||
|
|
||||||
|
### Requirements & Constraints
|
||||||
|
|
||||||
|
- Developers should use only native language features to implement the Vigenere
|
||||||
|
Cipher. Libraries are not allowed.
|
||||||
|
- Developers should design and implement their own solution using only the
|
||||||
|
description of the steps in the Vigenere Cipher algorithm.
|
||||||
|
- After successfully implementing this algorithm Developer should ask
|
||||||
|
themselves these questions:
|
||||||
|
- Would you feel confident encrypting your financial information using the
|
||||||
|
Vigenere Cipher? Why?
|
||||||
|
- How would you detect that a message had been encrypted using the
|
||||||
|
Vigenere Cipher?
|
||||||
|
- How would you go about trying to crack this encryption?
|
||||||
|
|
||||||
|
## User Stories
|
||||||
|
|
||||||
|
- [ ] User can see the app window with these components:
|
||||||
|
- Plain text message input field
|
||||||
|
- Encryption key input field
|
||||||
|
- Action buttons - 'Encrypt' and 'Decrypt'
|
||||||
|
- Resulting encrypted or decrypted message
|
||||||
|
- [ ] User can enter the text to be encrypted in the plain text message input
|
||||||
|
field
|
||||||
|
- [ ] User can enter the Encryption key the Vigenere algorithm will use to
|
||||||
|
encrypt the plain text message.
|
||||||
|
- [ ] User can click see see the 'Decrypt' button disabled until the plain
|
||||||
|
text has been encrypted.
|
||||||
|
- [ ] User can click the 'Encrypt' button to encrypt the plain text message
|
||||||
|
- [ ] User can see the encrypted message displayed in the result field.
|
||||||
|
- [ ] User can see the 'Decrypt' button enabled after the encrypted message
|
||||||
|
has been displayed.
|
||||||
|
- [ ] User can click the 'Decrypt' button to decrypt the encrypted message
|
||||||
|
and to display its contents in the result field.
|
||||||
|
|
||||||
|
## Bonus features
|
||||||
|
|
||||||
|
- [ ] User can see a 'Compare' button after decryption that compares the
|
||||||
|
original plain text message with the decrypted message
|
||||||
|
- [ ] User can see an error message if the 'Compare' detects differences
|
||||||
|
in the contents of these two fields.
|
||||||
|
|
||||||
|
## Useful links and resources
|
||||||
|
|
||||||
|
- [Bad Actors](http://solutionsreservoir.com/resources/introduction-to-cybersecurity/part-1-cybersecurity-overview)
|
||||||
|
- [Vigenere Cypher](https://www.geeksforgeeks.org/vigenere-cipher/)
|
||||||
|
|
||||||
|
## Example projects
|
||||||
|
|
||||||
|
[Vigenere Encryption](https://codepen.io/max1128/pen/VdyJmd)
|
||||||
@ -0,0 +1,43 @@
|
|||||||
|
# Word Frequency
|
||||||
|
|
||||||
|
**Tier:** 1-Beginner
|
||||||
|
|
||||||
|
Calculating the frequency of words in a block of text is a technique which has
|
||||||
|
various uses in algorithms such as searching, sorting, and semantic analysis.
|
||||||
|
The objective of the Word Frequency app is count the frequency of words in a
|
||||||
|
block of text and create a tabular display of each unique word in the text
|
||||||
|
along with its frequency, in descending order by frequency.
|
||||||
|
|
||||||
|
## User Stories
|
||||||
|
|
||||||
|
- [ ] User can see a text input box, a 'Translate' button, and a word
|
||||||
|
frequency table.
|
||||||
|
- [ ] User can enter text (or cut and paste) into the input box. This input
|
||||||
|
box must allow the entry of large blocks of text (maximum of 2048 characters).
|
||||||
|
- [ ] User can click the 'Translate' button to analyze the word frequency in
|
||||||
|
the text that has been input.
|
||||||
|
- [ ] User can see an error message if the text input box is empty.
|
||||||
|
- [ ] User can see the word frequency table populated when the 'Translate'
|
||||||
|
button is clicked. Each row in the table contains a word and the number of times
|
||||||
|
it occurs in the input text.
|
||||||
|
- [ ] User can see the word frequency table ordered in descending sequence
|
||||||
|
by word frequency.
|
||||||
|
|
||||||
|
## Bonus features
|
||||||
|
|
||||||
|
- [ ] User can see a graphical representation of the word frequency in a
|
||||||
|
bubble chart, column chart, or any other form of graphical representation the
|
||||||
|
developer chooses.
|
||||||
|
- [ ] User may choose to enter the URL of a web page whose content is to be
|
||||||
|
analyzed instead of manually entering text. (Hint: See the
|
||||||
|
[Podcast Directory](./Podcast-Directory-App.md) application for ideas).
|
||||||
|
|
||||||
|
## Useful links and resources
|
||||||
|
|
||||||
|
- [Bag of Words Model (Wikipedia)](https://en.wikipedia.org/wiki/Bag-of-words_model)
|
||||||
|
- [Semantic Analysis (Wikipedia)](https://en.wikipedia.org/wiki/Sentiment_analysis)
|
||||||
|
|
||||||
|
## Example projects
|
||||||
|
|
||||||
|
- [Word Frequency Counter](https://codepen.io/maxotar/pen/aLrwJM)
|
||||||
|
- [Bubble Chart](https://codepen.io/Quendoline/pen/pjELpM)
|
||||||
Loading…
Reference in new issue