Landing

README.md

@@ -2,14 +2,14 @@
 
 Free meal planner for cooks short on ideas! (like me …)
 
-[Available on](https://chefs-meal-planner.onrender.com/)
+[v.0.1 Available Here!](https://chefs-meal-planner.onrender.com/)
 
 ## Features
 
-- Random meal suggestion
-- Search by name: you're look for a recipe? Ours are easy to make and Yummy!
+- Random meal suggestion ✓
+- Search by name: you're look for a recipe? Ours are easy to make and Yummy! ✓
 - What's in the fridge ? Choose your main ingredient and get a meal suggestion
-- Choose by category:
+- Choose by category: ✓
   - Beef
   - Breakfast
   - Chicken
@@ -55,10 +55,11 @@ Free meal planner for cooks short on ideas! (like me …)
 - Suggestions based on what your personal taste
 - Recipes in Video
 - Get a full menu (Starter, Main, Dessert + Cocktail)
+- Send a daily suggestion to newsletter
 
 ## Supports
 
-- Web
+- Web ✓
 - Progressive Web App
 - Mobile
 
@@ -71,7 +72,7 @@ Free meal planner for cooks short on ideas! (like me …)
 
 ## Versions
 
-### Features in V.0.1
+### Features in v.0.1
 
 - WebApp
 - Random meal suggestion
@@ -82,3 +83,5 @@ Free meal planner for cooks short on ideas! (like me …)
 
 - put a preloader
 - change favicon
+- visual styling
+- route bad request to notFOund (exple: /categories/string)

src/App.js

@@ -93,7 +93,7 @@ const App = () => {
     }
   };
 
-  const getFromAPI = (keyword, set, option = null) => {
+  const getData = (keyword, set, option = null) => {
     const URI = createURI(keyword, option);
     fetch(URI)
       .then(response => response.json())
@@ -103,20 +103,20 @@ const App = () => {
   // Fetch wrappers for each use
   const getRandomMeal = () => {
     // setIsLoading(true);
-    getFromAPI("random", setMeal);
+    getData("random", setMeal);
     // setIsLoading(false);
   };
 
   const getMeal = id => {
-    getFromAPI(id, setMeal, "lookup");
+    getData(id, setMeal, "lookup");
   };
 
   const getCategories = () => {
-    getFromAPI("categories", setCategories);
+    getData("categories", setCategories);
   };
 
   const getSearchResults = () => {
-    getFromAPI(searchString, setSearchResults, "search");
+    getData(searchString, setSearchResults, "search");
   };
 
   const handleChange = ev => {
@@ -156,7 +156,7 @@ const App = () => {
         />
         <Route path="/categories/:strCategory/">
           <CategoryPage
-            getFromAPI={getFromAPI}
+            getData={getData}
             getMeal={getMeal}
             setMeal={setMeal}
             meal={meal}

src/index.css

@@ -10,19 +10,11 @@ body {
   flex-direction: column;
 }
 
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-    monospace;
-}
-
-main {
-  flex: 1 0 auto;
-}
-
 div {
   white-space: pre-wrap;
 }
 
 .background {
-  background-image: url(./images/parallax1.jpg);
+  background-image: url(./images/Chef.svg);
+  /* width: 100%; */
 }

src/pages/Category.js

@@ -3,11 +3,11 @@ import { useParams, Link, useRouteMatch } from "react-router-dom";
 
 const CategoryPage = props => {
   const [meals, setMeals] = useState({ meals: [] });
-  const { getFromAPI } = props;
+  const { getData } = props;
   const { strCategory } = useParams();
 
   const getMeals = () => {
-    getFromAPI(strCategory, setMeals, "filter");
+    getData(strCategory, setMeals, "filter");
   };
 
   useEffect(() => {

src/pages/Home.js

@@ -3,10 +3,27 @@ import RandomButton from "../components/RandomButton";
 
 const HomePage = props => {
   return (
-    <div className="section background">
-      <div className="container center-align">
-        <h1>The Chef's Meal Suggestions</h1>
-        <RandomButton handleClick={props.handleClick} url={props.buttonUrl} />
+    <div className="section ">
+      <div className="container ">
+        <div className="row">
+          <div className="col s12 m6">
+            <h1>The Chef's Meal Suggestions</h1>
+            <RandomButton
+              handleClick={props.handleClick}
+              url={props.buttonUrl}
+            />
+          </div>
+          <div className="col s12 m6">
+            <img
+              // src={require("../images/breakfast.svg")}
+              // src={require("../images/Chef.svg")}
+              src={require("../images/healthy_options.svg")}
+              // src={require("../images/special_event.svg")}
+              alt="hero_image"
+              width="100%"
+            />
+          </div>
+        </div>
       </div>
     </div>
   );