Merge pull request #54 from chingu-voyages/development

Push development branch to main branch for deployment

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

recipe-app-code/.gitignore → docs/.gitignore

@@ -3,4 +3,5 @@
 # Useful .gitignore templates: https://github.com/github/gitignore
 node_modules
 dist
-.cache
+.cache
+.DS_Store

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 */