pull/43/head
Florin Pop 6 years ago
commit 235ea60911

@ -6,6 +6,10 @@ Whenever you have a product (or a service) that you want to sell, you'll want to
Conversion rate - the % of the visitors which purchase the product or service.
When you have completed this app and the bonus features try leveling up your
skills by expanding it to incorporate the features specified in the
[Simple Online Store](./Simple-Online-Store.md).
## User Stories
These will cover the visual part of the project.

@ -0,0 +1,51 @@
# Recipe
**Tier:** 1-Beginner
You might not have realized this, but recipe's are nothing more than culinary
algorithms. Like programs, recipe's are a series of imperative steps which,
if followed correctly, result in a tasty dish.
The objective of the Recipe app is to help the user manage recipes in a way
that will make them easy to follow.
### Constraints
- For the inital version of this app the recipe data may be encoded as a
JSON file. After implementing the initial version of this app you may
expand on this to maintain recipes in a file or database.
## User Stories
- [ ] User can see a list of recipe titles
- [ ] User can click a recipe title to display a recipe card containing the
recipe title, meal type (breakfast, lunch, supper, or snack), number of people
it serves, its difficulty level (beginner, intermediate, advanced), the list
of ingredients (including their amounts), and the preparation steps.
- [ ] User click a new recipe title to replace the current card with a new
recipe.
## Bonus features
- [ ] User can see a photo showing what the item looks like after it has
been prepared.
- [ ] User can search for a recipe not in the list of recipe titles by
entering the meal name into a search box and clicking a 'Search' button. Any
open source recipe API may be used as the source for recipes (see The MealDB
below).
- [ ] User can see a list of recipes matching the search terms
- [ ] User can click the name of the recipe to display its recipe card.
- [ ] User can see a warning message if no matching recipe was found.
- [ ] User can click a 'Save' button on the cards for recipes located through
the API to save a copy to this apps recipe file or database.
## Useful links and resources
- [Using Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
- [Axios](https://www.npmjs.com/package/axios)
- [The MealDB API](https://www.themealdb.com/api.php)
## Example projects
- [Recipe Box - a Free Code Camp Project (FCC)](https://codepen.io/eddyerburgh/pen/xVeJvB)
- [React Recipe Box](https://codepen.io/inkblotty/pen/oxWRme)

@ -0,0 +1,74 @@
# Simple Online Store
**Tier:** 2-Intermediate
In the [Product Landing Page](./Product-Landing-Page.md) project you implemented
a landing page to provide your users with information about a product and to
hopefully increase your sites conversion rate.
The goal of the Simple Online Store is to give your users the capability of
selecting a product to purchase, viewing purchase information, adding it to
an online shopping cart, and finally, actually purchasing the products in the
shopping cart.
### Constraints
- Starting out you may implement your product inventory as an array of
Javascript objects if you are developing in Javascript. For other languages
feel free to choose the in memory solution of your choice.
## User Stories
- [ ] User can click on a 'View Products' button on the Landing Page to
display the Products Page.
- [ ] User can see a card on the Products Page for each
Product showing the product thumbnail, name, price, a short description,
and a 'Select' button.
- [ ] User can see a Product Details page displayed when the 'Select' button
is clicked showing the same information from the product card, but also a
unique product id, a long description, 'Add to Cart' button, and a
'See More Products' button.
- [ ] User can see a confirmation message when the product is added to the
shopping cart.
- [ ] User can click on the 'See More Products' page to return to the
Products Page.
- [ ] User can see a 'Shopping Cart' button on both the Landing
Page or the Products Page. Hint: a top bar might be a good common location
for this button.
- [ ] User can click on the 'Shopping Cart' button to display the Shopping
Cart page containing the product id, name, price, and quantity
ordered input box for each product previously added to the Shopping Cart.
- [ ] User can see a total purchase amount on the Shopping Card that is
calculated as the sum of the quantities multiplied by the unit price for each
product ordered.
- [ ] User can adjust the quantity ordered for any product to adjust the
total purchase amount.
- [ ] User can click a 'Place Order' button on the Shopping Cart Page to
complete the order. User will see a confirmation number when the order has been
placed.
- [ ) User can click a 'Cancel Order' button on the Shopping Cart Page to
cancel the order. User will see the product quantities and the total purchase
amount reset to zero.
- [ ] User can click a 'See More Products' button on the Shopping Cart Page
to return to the Products Page. If the order hasn't been placed yet this will
not clear the products that have already been added to the Products Page.
## Bonus features
- [ ] User can see an error message if the quantity ordered exceeds the
"on hand" quantity of the product.
- [ ] User can specify a bill to and ship to address when the order is
placed from the Shopping Cart Page
- [ ] User can see shipping charges added to the total purchase amount
- [ ] User can see sales taxes added to the total purchase amount
- [ ] Developer will implement the product inventory in an external file or
a database.
## Useful links and resources
There are plenty of eCommerce Stie Pages out there. You can use [Dribbble](www.dribbble.com) and [Behance](www.behance.net) for inspiration.
## Example projects
- [eCommerce Animations](https://codepen.io/RSH87/pen/RagqEv)

@ -48,8 +48,8 @@ practice sessions.
## Useful links and resources
[keydown](https://developer.mozilla.org/en-US/docs/Web/Events/keydown)
[setInterval](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval)
- [keydown](https://developer.mozilla.org/en-US/docs/Web/Events/keydown)
- [setInterval](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval)
## Example projects

@ -48,12 +48,13 @@ required to complete them.
| [CSV2JSON App](./Projects/CSV2JSON-App.md) | CSV to JSON converter | 1-Beginner |
| [Flip Image](./Projects/Flip-Image-App.md) | Change the orientation of images across two axes | 1-Beginner |
| [JSON2CSV App](./Projects/JSON2CSV-App.md) | JSON to CSV converter | 1-Beginner |
| [Lorem Ipsum Generator](./Projects/Lorem-Ipsum-Generator.md) | Generate lorem ipsum placeholder text | 1-Beginner |
| [Lorem Ipsum Generator](./Projects/Lorem-Ipsum-Generator.md) | Generate lorem ipsum placeholder text | 1-Beginner |
| [Notes App](./Projects/Notes-App.md) | Create and online note pad | 1-Beginner |
| [Pomodoro Clock](./Projects/Pomodoro-Clock.md) | Task timer to aid personal productivity | 1-Beginner |
| [:star2: Product Landing Page](./Projects/Product-Landing-Page.md) | Showcase product details for possible buyers | 1-Beginner |
| [Quiz App](./Projects/Quiz-App.md) | Test your knowledge by answering questions | 1-Beginner |
| [Roman to Decimal Converter](./Projects/Roman-to-Decimal-Converter.md) | Convert Roman to Decimal numbers | 1-Beginner |
| [🌟Recipe App](./Projects/Recipe-App.md) | Recipe | 1-Beginner |
| [Roman to Decimal Converter](./Projects/Roman-to-Decimal-Converter.md) | Convert Roman to Decimal numbers | 1-Beginner |
| [Slider Design](./Projects/Slider-Design.md) | Display images using a slider control | 1-Beginner |
| [:star2: Stopwatch App](./Projects/Stopwatch-App.md) | Count time spent on activities | 1-Beginner |
| [TrueOrFalse](./Projects/True-or-False-App.md) | Identify the result of a conditional comparison | 1-Beginner |
@ -73,6 +74,7 @@ required to complete them.
| [Markdown Table Generator](./Projects/Markdown-Table-Generator.md) | Convert a table into Markdown-formatted text | 2-Intermediate |
| [🌟Meme Generator App](./Projects/Meme-Generator-App.md) | Create custom memes | 2-Intermediate |
| [Regular Expression Helper](./Projects/RegExp-Helper-App.md) | Test Regular Expressions | 2-Intermediate |
| [🌟Simple Online Store](./Projects/Simple-Online-Store.md) | Simple Online Store | 2-Intermediate |
| [Sports Bracket Generator](./Projects/Sports-Bracket-Generator.md) | Generate a sports bracket diagram | 2-Intermediate |
| [String Art](./Projects/String-Art.md) | An animation of moving, colored strings | 2-Intermediate |
| [Timezone Slackbot](./Projects/Timezone-Slackbot.md) | Display Team Timezones | 2-Intermediate |

Loading…
Cancel
Save