From 545b473b90c9bb1a19307fb9e183bfa8d2061f77 Mon Sep 17 00:00:00 2001 From: jdmedlock Date: Wed, 10 Apr 2019 17:13:50 -0500 Subject: [PATCH 1/3] Feature: Add Recipe app specification Add Recipe app specification Resolves: N/a See also: N/a --- Projects/Recipe-App.md | 51 ++++++++++++++++++++++++++++++++++++++++++ README.md | 7 +++--- 2 files changed, 55 insertions(+), 3 deletions(-) create mode 100644 Projects/Recipe-App.md diff --git a/Projects/Recipe-App.md b/Projects/Recipe-App.md new file mode 100644 index 00000000..4d4df68a --- /dev/null +++ b/Projects/Recipe-App.md @@ -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) diff --git a/README.md b/README.md index ca1b3acf..f96246f9 100644 --- a/README.md +++ b/README.md @@ -48,11 +48,12 @@ 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 | +| [Pomodoro Clock](./Projects/Pomodoro-Clock.md) | Task timer to aid personal productivity | 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 | | [TrueOrFalse](./Projects/True-or-False-App.md) | Identify the result of a conditional comparison | 1-Beginner | | [Wind Chill](./Projects/Windchill-App.md) | Calculate the windchill factor from an actual temperature | 1-Beginner | From f4485a379912a1856aac3d60114de10c87b9dce4 Mon Sep 17 00:00:00 2001 From: jdmedlock Date: Thu, 11 Apr 2019 17:34:24 -0500 Subject: [PATCH 2/3] Feature: Add Simple Online Store app specification Add Simple Online Store app specification Resolves: N/a See also: N/a --- Projects/Product-Landing-Page.md | 4 ++ Projects/Simple-Online-Store.md | 74 ++++++++++++++++++++++++++++++++ README.md | 1 + 3 files changed, 79 insertions(+) create mode 100644 Projects/Simple-Online-Store.md diff --git a/Projects/Product-Landing-Page.md b/Projects/Product-Landing-Page.md index fa30a070..d51aa65f 100644 --- a/Projects/Product-Landing-Page.md +++ b/Projects/Product-Landing-Page.md @@ -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. diff --git a/Projects/Simple-Online-Store.md b/Projects/Simple-Online-Store.md new file mode 100644 index 00000000..eec7f136 --- /dev/null +++ b/Projects/Simple-Online-Store.md @@ -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) + diff --git a/README.md b/README.md index 695d9227..d4731c11 100644 --- a/README.md +++ b/README.md @@ -73,6 +73,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 | From a28dc0d08e52e81da3f4d87442cbd6e722fca24d Mon Sep 17 00:00:00 2001 From: Florin Pop Date: Fri, 12 Apr 2019 07:55:38 +0300 Subject: [PATCH 3/3] Update Typing-Practice-App.md --- Projects/Typing-Practice-App.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Projects/Typing-Practice-App.md b/Projects/Typing-Practice-App.md index 74e38141..eb1492df 100644 --- a/Projects/Typing-Practice-App.md +++ b/Projects/Typing-Practice-App.md @@ -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