diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..270fb19 Binary files /dev/null and b/.DS_Store differ diff --git a/README.md b/README.md index d075d75..347a50b 100644 --- a/README.md +++ b/README.md @@ -1,28 +1,29 @@ -# voyage-tasks +# Zero-Waste Recipes -Your project's `readme` is as important to success as your code. For -this reason you should put as much care into its creation and maintenance -as you would any other component of the application. +## Overview: +Reduce food waste by searching our database for an ingredient that you have getting ready to spoil in your refrigerator or pantry. You'll get a list of delicious recipes made with that exact ingredient. -If you are unsure of what should go into the `readme` let this article, -written by an experienced Chingu, be your starting point - -[Keys to a well written README](https://tinyurl.com/yk3wubft). +## Features: -And before we go there's "one more thing"! Once you decide what to include -in your `readme` feel free to replace the text we've provided here. +- Design comp built on Figma, including mobile and tablet versions + - All colors checked with [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) + - Fonts no smaller than 16px, larger readable recipe cards +- Sass: variables, partials, and nesting +- Built using Agile principles and SCRUM methodology in a series of sprints +- Our team frequently employed pair programming to teach other Sass and work on Javascript together +- Semantic Accessible layout: + - BEM for classes for easy readbility for anyone reading the code + - All buttons inputs and icons are labeled for screen readers + - The "View Recipes" buttons have an additional `aria-describedby` +attirbute so that people who use screen readers are forewarned that a modal will be opening up +- Vanilla Javascript that prioritizes readability + - Async fetch functions -> Own it & Make it your Own! +## Running the Project: +- Deployed to: [GH-Pages](link) +- [Github Repo](https://github.com/chingu-voyages/v46-tier1-team-06) -## Team Documents +## Dependencies: -You may find these helpful as you work together to organize your project. +**TastyAPI** Our app fetches recipes from the TastyAPI found at [Rapid API: Tasty API](https://rapidapi.com/apidojo/api/tasty). The call is made to the `recipes/list` endpoint. -- [Team Project Ideas](./docs/team_project_ideas.md) -- [Team Decision Log](./docs/team_decision_log.md) - -Meeting Agenda templates (located in the `/docs` directory in this repo): - -- Meeting - Voyage Kickoff --> ./docs/meeting-voyage_kickoff.docx -- Meeting - App Vision & Feature Planning --> ./docs/meeting-vision_and_feature_planning.docx -- Meeting - Sprint Retrospective, Review, and Planning --> ./docs/meeting-sprint_retrospective_review_and_planning.docx -- Meeting - Sprint Open Topic Session --> ./docs/meeting-sprint_open_topic_session.docx diff --git a/recipe-app-code/.editorconfig b/docs/.editorconfig similarity index 100% rename from recipe-app-code/.editorconfig rename to docs/.editorconfig diff --git a/recipe-app-code/.gitattributes b/docs/.gitattributes similarity index 100% rename from recipe-app-code/.gitattributes rename to docs/.gitattributes diff --git a/recipe-app-code/.gitignore b/docs/.gitignore similarity index 93% rename from recipe-app-code/.gitignore rename to docs/.gitignore index 427305a..7ecfd9c 100644 --- a/recipe-app-code/.gitignore +++ b/docs/.gitignore @@ -3,4 +3,5 @@ # Useful .gitignore templates: https://github.com/github/gitignore node_modules dist -.cache \ No newline at end of file +.cache +.DS_Store \ No newline at end of file diff --git a/recipe-app-code/.htaccess b/docs/.htaccess similarity index 100% rename from recipe-app-code/.htaccess rename to docs/.htaccess diff --git a/recipe-app-code/404.html b/docs/404.html similarity index 100% rename from recipe-app-code/404.html rename to docs/404.html diff --git a/recipe-app-code/LICENSE.txt b/docs/LICENSE.txt similarity index 100% rename from recipe-app-code/LICENSE.txt rename to docs/LICENSE.txt diff --git a/recipe-app-code/browserconfig.xml b/docs/browserconfig.xml similarity index 100% rename from recipe-app-code/browserconfig.xml rename to docs/browserconfig.xml diff --git a/docs/meeting-vision_and_feature_planning.docx b/docs/chingu_templates/Meeting - App Vision Statement and Feature Planning.docx similarity index 99% rename from docs/meeting-vision_and_feature_planning.docx rename to docs/chingu_templates/Meeting - App Vision Statement and Feature Planning.docx index 303a4b7..5cc5c0d 100644 Binary files a/docs/meeting-vision_and_feature_planning.docx and b/docs/chingu_templates/Meeting - App Vision Statement and Feature Planning.docx differ diff --git a/docs/meeting-voyage_kickoff.docx b/docs/chingu_templates/Meeting - Sprint #1 - Voyage Kickoff.docx similarity index 99% rename from docs/meeting-voyage_kickoff.docx rename to docs/chingu_templates/Meeting - Sprint #1 - Voyage Kickoff.docx index bb48860..744475f 100644 Binary files a/docs/meeting-voyage_kickoff.docx and b/docs/chingu_templates/Meeting - Sprint #1 - Voyage Kickoff.docx differ diff --git a/docs/meeting-sprint_open_topic_session.docx b/docs/chingu_templates/Meeting - Sprint #n - Open Topic Session.docx similarity index 96% rename from docs/meeting-sprint_open_topic_session.docx rename to docs/chingu_templates/Meeting - Sprint #n - Open Topic Session.docx index a34af88..2ecf0b0 100644 Binary files a/docs/meeting-sprint_open_topic_session.docx and b/docs/chingu_templates/Meeting - Sprint #n - Open Topic Session.docx differ diff --git a/docs/chingu_templates/Meeting - Sprint #n_n - Sprint Retrospective, Review, _ Planning.docx b/docs/chingu_templates/Meeting - Sprint #n_n - Sprint Retrospective, Review, _ Planning.docx new file mode 100644 index 0000000..3049b95 Binary files /dev/null and b/docs/chingu_templates/Meeting - Sprint #n_n - Sprint Retrospective, Review, _ Planning.docx differ diff --git a/docs/chingu_templates/Team Decision Log.xlsx b/docs/chingu_templates/Team Decision Log.xlsx new file mode 100644 index 0000000..a6abc13 Binary files /dev/null and b/docs/chingu_templates/Team Decision Log.xlsx differ diff --git a/docs/chingu_templates/Team Project Ideas.xlsx b/docs/chingu_templates/Team Project Ideas.xlsx new file mode 100644 index 0000000..d58418d Binary files /dev/null and b/docs/chingu_templates/Team Project Ideas.xlsx differ diff --git a/docs/css/main.css b/docs/css/main.css new file mode 100644 index 0000000..062dd1c --- /dev/null +++ b/docs/css/main.css @@ -0,0 +1,287 @@ +h1, h2, h3, p { + color: #384547; +} + +h1, h2, h3 { + font-family: "Josefin Sans", sans-serif; +} + +h1 { + font-size: 3.5rem; + margin-bottom: 1rem; +} + +h2, .recipe-button { + font-size: 1.5rem; + font-weight: bold; + line-height: 1.5rem; + text-align: center; +} + +.recipe-button { + color: white; +} + +.recipe-category { + color: black; +} + +h3 { + font-size: 2rem; +} + +h1, h2, h3, p { + color: #384547; +} + +h1, h2, h3 { + font-family: "Josefin Sans", sans-serif; +} + +h1 { + font-size: 3.5rem; + margin-bottom: 1rem; +} + +h2, .recipe-button { + font-size: 1.5rem; + font-weight: bold; + line-height: 1.5rem; + text-align: center; +} + +.recipe-button { + color: white; +} + +.recipe-category { + color: black; +} + +h3 { + font-size: 2rem; +} + +* { + box-sizing: border-box; +} + +body { + max-width: 100vw; + min-height: 100vh; + margin: 0; + font-family: "Open Sans", sans-serif; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +header, +section, +article, +footer { + display: flex; + justify-content: center; + align-items: center; +} + +article { + flex-direction: column; + width: 70vw; +} + +.icon { + display: inline-block; + color: #444444; + width: 1em; + height: 1em; + fill: currentColor; +} + +/* ===== HEADER AND SEARCH BAR ===== */ +header { + flex-direction: column; +} +header .search-container { + display: flex; + flex-direction: row; +} +header .search-form__input { + background-color: #C9E8BA; + border: 0.1em solid rgba(0, 0, 0, 0.2); + border-radius: 50px 0 0 50px; + font-size: 1.25rem; + font-weight: bold; + padding-left: 30px; + height: 55px; + min-width: 341px; +} +header .search-form__search-button { + background-color: #196160; + border: 0.1em solid rgba(0, 0, 0, 0.2); + border-radius: 0 50px 50px 0; + margin-right: 20px; + padding: 8px 11px; +} +header .search-form__search-button:hover, +header .search-form__search-button:focus { + background-color: #0D9D9B; +} +header .search-form__refresh-button { + background-color: #8F2D56; + border: 0.1em solid rgba(0, 0, 0, 0.2); + border-radius: 15px; + height: 55px; + padding: 0 10px; +} +header .search-form__refresh-button:hover, +header .search-form__refresh-button:focus { + background-color: #C5497F; +} +header .icon-search { + /* Using currentColor above lets + us use `color` for changing the color + of our icons: */ + color: white; + /* The width and height of the SVG + was previously set to 1em. + This allows us to use `font-size` + to change the size of our icon: */ + font-size: 34px; +} +header .icon-spinner11 { + color: white; + font-size: 35px; +} +header .app-instructions { + font-weight: bold; + margin-top: 2rem; +} + +/* ===== RECIPES DISPLAY ===== */ +.recipes { + width: 85vw; + display: flex; + justify-content: space-around; + align-items: stretch; + padding-top: 3rem; +} +.recipes .recipe { + margin: 0 0.5vw; + padding-bottom: 2rem; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + box-shadow: 3px 3px 5px silver; + border-radius: 20px; +} +.recipes .recipe .recipe-image { + width: 100%; + border-radius: 20px 20px 0 0; +} +.recipes .recipe .recipe-category { + margin: 0; + padding: 0.5rem 0.75rem; + background-color: #58BC82; + align-self: flex-start; +} +.recipes .recipe .recipe-title-container { + flex-grow: 2; + margin: 0; + padding: 1rem; + width: 50%; + display: flex; + justify-content: center; + align-items: center; +} +.recipes .recipe .recipe-button { + margin: 0; + padding: 10px; + width: 80%; + background-color: #196160; + border: 0.1em solid rgba(0, 0, 0, 0.2); + border-radius: 15px; +} +.recipes .recipe .recipe-button:hover, .recipes .recipe .recipe-button:focus { + background-color: #0D9D9B; +} + +/* ===== LANDING ===== */ +.quote-section { + padding: 5rem; +} + +/* ===== FOOTER ===== */ +footer { + background-color: #196160; + padding: 5rem 0; + width: 100%; +} +footer .icon-github { + color: white; + font-size: 75px; +} + +/*! HTML5 Boilerplate v8.0.0 | MIT License | https://html5boilerplate.com/ */ +/* main.css 2.1.0 | MIT License | https://github.com/h5bp/main.css#readme */ +/* + * What follows is the result of much research on cross-browser styling. + * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, + * Kroc Camen, and the H5BP dev community and team. + */ +/* ========================================================================== + Helper classes + ========================================================================== */ +/* + * Hide visually and from screen readers + */ +.hidden, +[hidden] { + display: none !important; +} + +/* + * Hide only visually, but have it available for screen readers: + * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility + * + * 1. For long content, line feeds are not interpreted as spaces and small width + * causes content to wrap 1 word per line: + * https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe + */ +.sr-only { + border: 0; + clip: rect(0, 0, 0, 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + white-space: nowrap; + width: 1px; + /* 1 */ +} + +/* + * Extends the .sr-only class to allow the element + * to be focusable when navigated to via the keyboard: + * https://www.drupal.org/node/897638 + */ +.sr-only.focusable:active, +.sr-only.focusable:focus { + clip: auto; + height: auto; + margin: 0; + overflow: visible; + position: static; + white-space: inherit; + width: auto; +} + +/* + * Hide visually and from screen readers, but maintain layout + */ +.invisible { + visibility: hidden; +}/*# sourceMappingURL=main.css.map */ \ No newline at end of file diff --git a/docs/css/main.css.map b/docs/css/main.css.map new file mode 100644 index 0000000..f774785 --- /dev/null +++ b/docs/css/main.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["sass-partials/_fonts.scss","sass-partials/_color.scss","main.css","sass-partials/_general-layout.scss","main.scss"],"names":[],"mappings":"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","file":"main.css"} \ No newline at end of file diff --git a/docs/css/main.scss b/docs/css/main.scss new file mode 100644 index 0000000..32888e2 --- /dev/null +++ b/docs/css/main.scss @@ -0,0 +1,212 @@ +@charset "utf-8"; +@use 'sass-partials/fonts' as fonts; +@use 'sass-partials/color' as color; +@use 'sass-partials/general-layout'as general-layout; + + +/* ===== HEADER AND SEARCH BAR ===== */ +header { + flex-direction: column; + + .search-container { + display: flex; + flex-direction: row; + } + + .search-form__input { + background-color: color.$green-tea-green; + border: 0.1em solid rgb(0 0 0 / 0.2); + border-radius: 50px 0 0 50px; + font-size: 1.25rem; + font-weight: bold; + padding-left: 30px; + height: 55px; + min-width: 341px; + } + + .search-form__search-button { + background-color: color.$dark-teal; + border: 0.1em solid rgb(0 0 0 / 0.2); + border-radius: 0 50px 50px 0; + margin-right: 20px; + padding: 8px 11px; + } + + .search-form__search-button:hover, + .search-form__search-button:focus { + background-color: color.$light-teal; + } + + .search-form__refresh-button { + background-color: color.$dark-magenta; + border: 0.1em solid rgb(0 0 0 / 0.2); + border-radius: 15px; + height: 55px; + padding: 0 10px; + } + + .search-form__refresh-button:hover, + .search-form__refresh-button:focus { + background-color: color.$light-magenta; + } + + .icon-search { + /* Using currentColor above lets + us use `color` for changing the color + of our icons: */ + color: white; + /* The width and height of the SVG + was previously set to 1em. + This allows us to use `font-size` + to change the size of our icon: */ + font-size: 34px; + } + + .icon-spinner11 { + color: white; + font-size: 35px; + } + + .app-instructions { + font-weight: bold; + margin-top: 2rem; + } +} + +/* ===== RECIPES DISPLAY ===== */ +.recipes { + width: 85vw; + display: flex; + justify-content: space-around; + align-items: stretch; + padding-top: 3rem; + .recipe { + margin: 0 0.5vw; // small margin left and right, so they never touch + padding-bottom: 2rem; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + box-shadow: 3px 3px 5px silver; + border-radius: 20px; + .recipe-image { + width: 100%; + border-radius: 20px 20px 0 0; + } + .recipe-category { + margin: 0; + padding: 0.5rem 0.75rem; + background-color: color.$emerald; + align-self: flex-start; + } + .recipe-title-container { + flex-grow: 2; + margin: 0; + padding: 1rem; + width: 50%; + display: flex; + justify-content: center; + align-items: center; + } + .recipe-button { + margin: 0; + padding: 10px; + width: 80%; + background-color: color.$dark-teal; + border: 0.1em solid rgb(0 0 0 / 0.2); + border-radius: 15px; + + &:hover, &:focus { + background-color: color.$light-teal; + } + } + } +} + + +/* ===== LANDING ===== */ + +.quote-section { + padding: 5rem; +} + +/* ===== FOOTER ===== */ +footer { + background-color: color.$dark-teal; + padding: 5rem 0; + width: 100%; + + .icon-github { + color: white; + font-size: 75px; + } +} + +/*! HTML5 Boilerplate v8.0.0 | MIT License | https://html5boilerplate.com/ */ + +/* main.css 2.1.0 | MIT License | https://github.com/h5bp/main.css#readme */ +/* + * What follows is the result of much research on cross-browser styling. + * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, + * Kroc Camen, and the H5BP dev community and team. + */ + +/* ========================================================================== + Helper classes + ========================================================================== */ + +/* + * Hide visually and from screen readers + */ + + .hidden, + [hidden] { + display: none !important; + } + + /* + * Hide only visually, but have it available for screen readers: + * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility + * + * 1. For long content, line feeds are not interpreted as spaces and small width + * causes content to wrap 1 word per line: + * https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe + */ + + .sr-only { + border: 0; + clip: rect(0, 0, 0, 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + white-space: nowrap; + width: 1px; + /* 1 */ + } + + /* + * Extends the .sr-only class to allow the element + * to be focusable when navigated to via the keyboard: + * https://www.drupal.org/node/897638 + */ + + .sr-only.focusable:active, + .sr-only.focusable:focus { + clip: auto; + height: auto; + margin: 0; + overflow: visible; + position: static; + white-space: inherit; + width: auto; + } + + /* + * Hide visually and from screen readers, but maintain layout + */ + + .invisible { + visibility: hidden; + } \ No newline at end of file diff --git a/recipe-app-code/css/normalize.css b/docs/css/normalize.css similarity index 99% rename from recipe-app-code/css/normalize.css rename to docs/css/normalize.css index 192eb9c..3719a77 100644 --- a/recipe-app-code/css/normalize.css +++ b/docs/css/normalize.css @@ -176,7 +176,8 @@ textarea { button, input { /* 1 */ overflow: visible; -} +} + /** * Remove the inheritance of text transform in Edge, Firefox, and IE. diff --git a/docs/css/recipe_details.css b/docs/css/recipe_details.css new file mode 100644 index 0000000..b794846 --- /dev/null +++ b/docs/css/recipe_details.css @@ -0,0 +1,43 @@ +* { + margin: 0px auto; + padding: 0px; + font-family: 'Open Sans'; +} + +body { + background-color: #8F2D56; +} + +h1, h2, ul, ol { + color:white; +} + +.exit-button { + background-color: #196160; + border-radius: 50%; + padding: 5px 5px; + color:white; + float:right; + margin-right:50px; +} +.img-title-row { + display:flex; + flex:2; + margin:20px; + align-items: center; + text-align: center; +} + +.ingredients { + margin: 50px;; +} + +.instructions { + margin:50px; +} +.meal-label { + padding: 5px 28px; + background-color: #58BC82; + width:225px; + border-radius: 20%; +} diff --git a/docs/css/sass-partials/_color.scss b/docs/css/sass-partials/_color.scss new file mode 100644 index 0000000..dd806bd --- /dev/null +++ b/docs/css/sass-partials/_color.scss @@ -0,0 +1,7 @@ +$dark-forest-green: #384547; +$green-tea-green: #C9E8BA; +$dark-magenta: #8F2D56; +$light-magenta: #C5497F; +$dark-teal: #196160; +$light-teal: #0D9D9B; +$emerald: #58BC82; diff --git a/docs/css/sass-partials/_fonts.scss b/docs/css/sass-partials/_fonts.scss new file mode 100644 index 0000000..e4bc093 --- /dev/null +++ b/docs/css/sass-partials/_fonts.scss @@ -0,0 +1,38 @@ +@use 'color'; + +$default-font: 'Open Sans', sans-serif; +$heading-font: 'Josefin Sans', sans-serif; + +h1, h2, h3, p { + color: color.$dark-forest-green; +} + +h1, h2, h3 { + font-family: $heading-font; +} + +// Brand title +h1 { + font-size: 3.5rem; + margin-bottom: 1rem; +} + +// Recipe titles and buttons on landing page +h2, .recipe-button { + font-size: 1.5rem; + font-weight: bold; + line-height: 1.5rem; + text-align: center; +} + +.recipe-button { + color: white; +} +.recipe-category { + color: black; +} + +// "Global food waste ..." +h3 { + font-size: 2rem; +} \ No newline at end of file diff --git a/docs/css/sass-partials/_general-layout.scss b/docs/css/sass-partials/_general-layout.scss new file mode 100644 index 0000000..2ae129c --- /dev/null +++ b/docs/css/sass-partials/_general-layout.scss @@ -0,0 +1,36 @@ +@use 'color'; +@import 'fonts'; + +* { + box-sizing: border-box; +} +body { + max-width: 100vw; + min-height: 100vh; + margin: 0; + font-family: $default-font; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +header, +section, +article, +footer { + display: flex; + justify-content: center; + align-items: center; +} +article { + flex-direction: column; + width: 70vw; +} +.icon { + display: inline-block; + color: #444444; + width: 1em; + height: 1em; + fill: currentColor; +} \ No newline at end of file diff --git a/recipe-app-code/doc/TOC.md b/docs/doc/TOC.md similarity index 100% rename from recipe-app-code/doc/TOC.md rename to docs/doc/TOC.md diff --git a/recipe-app-code/doc/css.md b/docs/doc/css.md similarity index 100% rename from recipe-app-code/doc/css.md rename to docs/doc/css.md diff --git a/recipe-app-code/doc/extend.md b/docs/doc/extend.md similarity index 100% rename from recipe-app-code/doc/extend.md rename to docs/doc/extend.md diff --git a/recipe-app-code/doc/faq.md b/docs/doc/faq.md similarity index 100% rename from recipe-app-code/doc/faq.md rename to docs/doc/faq.md diff --git a/recipe-app-code/doc/html.md b/docs/doc/html.md similarity index 100% rename from recipe-app-code/doc/html.md rename to docs/doc/html.md diff --git a/recipe-app-code/doc/js.md b/docs/doc/js.md similarity index 100% rename from recipe-app-code/doc/js.md rename to docs/doc/js.md diff --git a/recipe-app-code/doc/misc.md b/docs/doc/misc.md similarity index 100% rename from recipe-app-code/doc/misc.md rename to docs/doc/misc.md diff --git a/recipe-app-code/doc/usage.md b/docs/doc/usage.md similarity index 100% rename from recipe-app-code/doc/usage.md rename to docs/doc/usage.md diff --git a/recipe-app-code/favicon.ico b/docs/favicon.ico similarity index 100% rename from recipe-app-code/favicon.ico rename to docs/favicon.ico diff --git a/recipe-app-code/humans.txt b/docs/humans.txt similarity index 100% rename from recipe-app-code/humans.txt rename to docs/humans.txt diff --git a/recipe-app-code/icon.png b/docs/icon.png similarity index 100% rename from recipe-app-code/icon.png rename to docs/icon.png diff --git a/recipe-app-code/img/.gitignore b/docs/img/.gitignore similarity index 100% rename from recipe-app-code/img/.gitignore rename to docs/img/.gitignore diff --git a/docs/img/example1.png b/docs/img/example1.png new file mode 100644 index 0000000..6a4737a Binary files /dev/null and b/docs/img/example1.png differ diff --git a/docs/img/example2.png b/docs/img/example2.png new file mode 100644 index 0000000..6c98a30 Binary files /dev/null and b/docs/img/example2.png differ diff --git a/docs/img/example3.png b/docs/img/example3.png new file mode 100644 index 0000000..7b7befe Binary files /dev/null and b/docs/img/example3.png differ diff --git a/docs/index.html b/docs/index.html new file mode 100644 index 0000000..741ece0 --- /dev/null +++ b/docs/index.html @@ -0,0 +1,124 @@ + + + + + + Zero-Waste Recipe + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

Zero-Waste Recipe

+
+
+ + +
+ + +
+

Start decreasing your food waste by searching for recipes by ingredient!

+
+
+
+ food picture +

dinner

+
+

Chili Prawn Linguine

+
+ + A popout window will open with recipe details +
+
+ food picture +

dinner

+
+

Kapsalo

+
+ +
+
+ food picture +

dinner

+
+

Chivito Uruguayo

+
+ +
+ +
+
+

Global food waste is the 3rd greatest carbon emitter after the US and China!

+

Here are some ways you can help the planet by focusing on your food ingredients!

+ +
+ + + + + diff --git a/recipe-app-code/js/main.js b/docs/js/main.js similarity index 100% rename from recipe-app-code/js/main.js rename to docs/js/main.js diff --git a/recipe-app-code/js/plugins.js b/docs/js/plugins.js similarity index 100% rename from recipe-app-code/js/plugins.js rename to docs/js/plugins.js diff --git a/recipe-app-code/js/vendor/modernizr-3.11.2.min.js b/docs/js/vendor/modernizr-3.11.2.min.js similarity index 100% rename from recipe-app-code/js/vendor/modernizr-3.11.2.min.js rename to docs/js/vendor/modernizr-3.11.2.min.js diff --git a/docs/meeting-sprint_retrospective_review_and_planning.docx b/docs/meeting-sprint_retrospective_review_and_planning.docx deleted file mode 100644 index abe871d..0000000 Binary files a/docs/meeting-sprint_retrospective_review_and_planning.docx and /dev/null differ diff --git a/recipe-app-code/package-lock.json b/docs/package-lock.json similarity index 100% rename from recipe-app-code/package-lock.json rename to docs/package-lock.json diff --git a/recipe-app-code/package.json b/docs/package.json similarity index 100% rename from recipe-app-code/package.json rename to docs/package.json diff --git a/docs/recipe_detail.html b/docs/recipe_detail.html new file mode 100644 index 0000000..b511d99 --- /dev/null +++ b/docs/recipe_detail.html @@ -0,0 +1,82 @@ + + + + + + Document + + + + + +
+
+ +
+
+

Chili Prawn Linguini

+
+

Dinner

+
+
+ + +
+
+

Ingredients:

+ +
+
+

Instructions:

+
    +
  1. + Mix the dressing ingredients in a small bowl and season with + salt and pepper. Set aside. +
    2.   +
  2. Cook the pasta according to the packet instructions. 
    3. +
  3. + Add the sugar snap peas for the last minute or so of + cooking time. +
    4. +
  4. + Meanwhile, heat the oil in a wok or large frying pan, + toss in the garlic and chilli and cook over a fairly + gentle heat for about 30 seconds without letting the + garlic brown. +
    5. +
  5. + Tip in the prawns and cook over a high heat, + stirring frequently, for about 3 minutes until + they turn pink. +
    6. +
  6. + Add the tomatoes and cook, stirring occasionally, + for 3 minutes until they just start to soften. +
    7. +
  7. + Drain the pasta and sugar snaps well, then toss + into the prawn mixture.  +
    8. +
  8. + Tear in the basil leaves, stir, and season + with salt and pepper.  +
    9. +
  9. + Serve with salad leaves drizzled with the lime + dressing, and warm crusty bread. +
    10. +
+
+ + \ No newline at end of file diff --git a/recipe-app-code/robots.txt b/docs/robots.txt similarity index 100% rename from recipe-app-code/robots.txt rename to docs/robots.txt diff --git a/recipe-app-code/site.webmanifest b/docs/site.webmanifest similarity index 100% rename from recipe-app-code/site.webmanifest rename to docs/site.webmanifest diff --git a/docs/team_decision_log.md b/docs/team_decision_log.md deleted file mode 100644 index ed616fd..0000000 --- a/docs/team_decision_log.md +++ /dev/null @@ -1,43 +0,0 @@ -# Team Decision Log - -Update this with key decisions your team makes that you need to make...and -remember. The entries in this table are only examples. You may add, change, or -delete these based on the needs of your team. - -To set this up add each teammates name in the `teammate name` column. Each -team member should Place an 'X' under their name to vote for the ideas -you like the best. - -| No. | Question/Option | Teammate name | Teammate name | Teammate name | Teammate name | Teammate name | Teammate name | -| :--- | :--- | :--- | :--- | :--- | :--- | :--- | :--- | -| 1 | Team meeting schedule | | | | | | | -| | - Sprint Planning Sunday@9:00 a.m. CST | | | | | | | -| | - Knowledge Xfer as needed | | | | | | | -| | - Working Session Thursday@4:00 p.m. CST | | | | | | | -| 2 | Project Backlog Tool | | | | | | | -| | - Notion | | | | | | | -| | - Jira | | | | | | | -| 3 | Technical Stack (vote by adding your pref. in the cell under your name) | | | | | | | -| | - BE Language | | | | | | | -| | - FE Language | | | | | | | -| | - FE Framework | | | | | | | -| | - ML Framework | | | | | | | -| | - Visualization/Graphics package (if required, e.g. D3, Nivo, etc.) | | | | | | | -| 4 | Where to host the app? | | | | | | | -| | - Heroku (suitable for FE, BE, & Postgres) | | | | | | | -| | - Netlify (suitable only for FE) | | | | | | | -| | - Vercel (suitable only for FE) | | | | | | | -| | - Mongo Atlas (suitable only for MongoDB) | | | | | | | -| 5 | BE/FE repos organization | | | | | | | -| | - Separate GitHub repos for each | | | | | | | -| | - Single GitHub repo for both | | | | | | | -| 6 | Wireframing tool | | | | | | | -| | - Paper & pencil | | | | | | | -| | - Adobe XD | | | | | | | -| | - Balsamiq | | | | | | | -| | - Figma | | | | | | | -| 7 | Who works in which part of the app? | | | | | | | -| | - BE (not applicable for Tier 1 teams) | | | | | | | -| | - FE | | | | | | | -| 8 | ... | | | | | | | -| n | ... | | | | | | | \ No newline at end of file diff --git a/docs/team_project_ideas.md b/docs/team_project_ideas.md deleted file mode 100644 index a10f297..0000000 --- a/docs/team_project_ideas.md +++ /dev/null @@ -1,18 +0,0 @@ -# Team Project Ideas - -Update this with 1-2 ideas per team member for what your teams app project. - -To set this up add each teammates name in the `teammate name` column. Everyone -on the team should then updated it, adding 1-2 ideas along with a short -description. Keep in mind that the descriptions should be only 1-3 short -sentences. - -Each team member should Place an 'X' under their name to vote for the ideas -you like the best. - -| Project Idea | Description | teammate name | teammate name | teammate name | teammate name | teammate name | teammate name | -| :--- | :--- | :--- | :--- | :--- | :--- | :--- | :--- | -| First idea | Description | | | | | | | -| Second idea | Description | | | | | | | -| ... | Description | | | | | | | -| Last idea | Description | | | | | | | \ No newline at end of file diff --git a/recipe-app-code/tile-wide.png b/docs/tile-wide.png similarity index 100% rename from recipe-app-code/tile-wide.png rename to docs/tile-wide.png diff --git a/recipe-app-code/tile.png b/docs/tile.png similarity index 100% rename from recipe-app-code/tile.png rename to docs/tile.png diff --git a/recipe-app-code/css/main.css b/recipe-app-code/css/main.css deleted file mode 100644 index c12d1f2..0000000 --- a/recipe-app-code/css/main.css +++ /dev/null @@ -1,306 +0,0 @@ -/*! HTML5 Boilerplate v8.0.0 | MIT License | https://html5boilerplate.com/ */ - -/* main.css 2.1.0 | MIT License | https://github.com/h5bp/main.css#readme */ -/* - * What follows is the result of much research on cross-browser styling. - * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, - * Kroc Camen, and the H5BP dev community and team. - */ - -/* ========================================================================== - Base styles: opinionated defaults - ========================================================================== */ - -html { - color: #222; - font-size: 1em; - line-height: 1.4; -} - -/* - * Remove text-shadow in selection highlight: - * https://twitter.com/miketaylr/status/12228805301 - * - * Vendor-prefixed and regular ::selection selectors cannot be combined: - * https://stackoverflow.com/a/16982510/7133471 - * - * Customize the background color to match your design. - */ - -::-moz-selection { - background: #b3d4fc; - text-shadow: none; -} - -::selection { - background: #b3d4fc; - text-shadow: none; -} - -/* - * A better looking default horizontal rule - */ - -hr { - display: block; - height: 1px; - border: 0; - border-top: 1px solid #ccc; - margin: 1em 0; - padding: 0; -} - -/* - * Remove the gap between audio, canvas, iframes, - * images, videos and the bottom of their containers: - * https://github.com/h5bp/html5-boilerplate/issues/440 - */ - -audio, -canvas, -iframe, -img, -svg, -video { - vertical-align: middle; -} - -/* - * Remove default fieldset styles. - */ - -fieldset { - border: 0; - margin: 0; - padding: 0; -} - -/* - * Allow only vertical resizing of textareas. - */ - -textarea { - resize: vertical; -} - -/* ========================================================================== - Author's custom styles - ========================================================================== */ -/* Starter Code */ - @charset "UTF-8"; - - *, - *::before, - *::after { - box-sizing: border-box; - } - - html { - border: 0; - font-size: 1 rem; - margin: 0; - padding: 0; - height: 100%; - } - - body { - color: #102e96; - font-family: 'Montserrat', sans-serif; - min-height: 100vh; - margin: 1rem; - display: flex; - flex-flow: column wrap; - align-items: center; - justify-content: center; - } - - .content-wrapper { - max-width: 700px; - } - - img { - width: 100%; - margin: 0; - } - - h1, - h2 { - text-align: center; - } - - /* Starter Code End */ - -/* ========================================================================== - Helper classes - ========================================================================== */ - -/* - * Hide visually and from screen readers - */ - -.hidden, -[hidden] { - display: none !important; -} - -/* - * Hide only visually, but have it available for screen readers: - * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility - * - * 1. For long content, line feeds are not interpreted as spaces and small width - * causes content to wrap 1 word per line: - * https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe - */ - -.sr-only { - border: 0; - clip: rect(0, 0, 0, 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - white-space: nowrap; - width: 1px; - /* 1 */ -} - -/* - * Extends the .sr-only class to allow the element - * to be focusable when navigated to via the keyboard: - * https://www.drupal.org/node/897638 - */ - -.sr-only.focusable:active, -.sr-only.focusable:focus { - clip: auto; - height: auto; - margin: 0; - overflow: visible; - position: static; - white-space: inherit; - width: auto; -} - -/* - * Hide visually and from screen readers, but maintain layout - */ - -.invisible { - visibility: hidden; -} - -/* - * Clearfix: contain floats - * - * For modern browsers - * 1. The space content is one way to avoid an Opera bug when the - * `contenteditable` attribute is included anywhere else in the document. - * Otherwise it causes space to appear at the top and bottom of elements - * that receive the `clearfix` class. - * 2. The use of `table` rather than `block` is only necessary if using - * `:before` to contain the top-margins of child elements. - */ - -.clearfix::before, -.clearfix::after { - content: " "; - display: table; -} - -.clearfix::after { - clear: both; -} - -/* ========================================================================== - EXAMPLE Media Queries for Responsive Design. - These examples override the primary ('mobile first') styles. - Modify as content requires. - ========================================================================== */ - -@media only screen and (min-width: 35em) { - /* Style adjustments for viewports that meet the condition */ -} - -@media print, - (-webkit-min-device-pixel-ratio: 1.25), - (min-resolution: 1.25dppx), - (min-resolution: 120dpi) { - /* Style adjustments for high resolution devices */ -} - -/* ========================================================================== - Print styles. - Inlined to avoid the additional HTTP request: - https://www.phpied.com/delay-loading-your-print-css/ - ========================================================================== */ - -@media print { - *, - *::before, - *::after { - background: #fff !important; - color: #000 !important; - /* Black prints faster */ - box-shadow: none !important; - text-shadow: none !important; - } - - a, - a:visited { - text-decoration: underline; - } - - a[href]::after { - content: " (" attr(href) ")"; - } - - abbr[title]::after { - content: " (" attr(title) ")"; - } - - /* - * Don't show links that are fragment identifiers, - * or use the `javascript:` pseudo protocol - */ - a[href^="#"]::after, - a[href^="javascript:"]::after { - content: ""; - } - - pre { - white-space: pre-wrap !important; - } - - pre, - blockquote { - border: 1px solid #999; - page-break-inside: avoid; - } - - /* - * Printing Tables: - * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables - */ - thead { - display: table-header-group; - } - - tr, - img { - page-break-inside: avoid; - } - - p, - h2, - h3 { - orphans: 3; - widows: 3; - } - - h2, - h3 { - page-break-after: avoid; - } -} - diff --git a/recipe-app-code/img/example1.png b/recipe-app-code/img/example1.png deleted file mode 100644 index 88b7a0b..0000000 Binary files a/recipe-app-code/img/example1.png and /dev/null differ diff --git a/recipe-app-code/img/example2.png b/recipe-app-code/img/example2.png deleted file mode 100644 index 5ae3d35..0000000 Binary files a/recipe-app-code/img/example2.png and /dev/null differ diff --git a/recipe-app-code/img/example3.png b/recipe-app-code/img/example3.png deleted file mode 100644 index a12461f..0000000 Binary files a/recipe-app-code/img/example3.png and /dev/null differ diff --git a/recipe-app-code/index.html b/recipe-app-code/index.html deleted file mode 100644 index 93501ec..0000000 --- a/recipe-app-code/index.html +++ /dev/null @@ -1,36 +0,0 @@ - - - - - - Zero-Waste Kitchen - - - - - - - - - - - - - - - - - - - - - - -
-

Zero-Waste Kitchen

-
- - - -