random recipe ok

README.md

@@ -72,4 +72,4 @@ Free meal planner for cooks short on ideas! (like me …)
 
 - WebApp
 - Random meal suggestion
-- Search by name: you're look for a recipe? Ours are easy to make and Yummy!
+- Search by name: you're looking for a recipe? Ours are easy to make and yummy!

src/App.js

@@ -6,10 +6,11 @@ import SearchPage from "./pages/Search";
 import NotFound from "./pages/NotFound";
 import Navbar from "./components/Navbar";
 import Footer from "./components/Footer";
-// import "./App.css";
+import "./App.css";
 
 const App = () => {
   const [searchString, setSearchString] = useState("");
+  // Find a better alternative …
   const mealDef = {
     meals: [
       {
@@ -78,8 +79,6 @@ const App = () => {
       .then(mealItem => setMeal(mealItem));
   };
 
-  // const { mealItem } = meal;
-
   const handleChange = ev => {
     const { value } = ev.target;
     setSearchString(value);

src/components/GitHubLink.js

@@ -4,7 +4,7 @@ const GitHubLink = () => {
   return (
     <a
       className="grey-text text-lighten-4 right"
-      href="https://github.com/rjNemo"
+      href="https://github.com/rjNemo/meal_planner"
       target="blank"
       rel="noopener"
     >

src/components/Logo.js

@@ -5,7 +5,7 @@ const Logo = () => {
   return (
     <Link to="/" class="brand-logo">
       <span role="img" aria-label="cookie">
-        🍪
+        🍪 Chef's Planner
       </span>
     </Link>
   );

src/components/MealPresentation.js

@@ -12,21 +12,18 @@ const MealPresentation = props => {
     <div className="row">
       <div className="col s12">
         <h1>{mealName}</h1>
-        <div className="col s8">
-          <img src={imgAddress} alt={mealName} height="320" />
-        </div>
-        <div className="col s4">
-          <ul>
-            <li>
-              <a href={videoAddress} target="blank">
-                See in video
-              </a>
-            </li>
-            {/* <video width="" height="" controls autoplay>
+        <img className="responsive-img" src={imgAddress} alt={mealName} />
+        <ul>
+          <li>
+            <a href={videoAddress} target="blank">
+              See in video
+            </a>
+          </li>
+          {/* <video width="" height="" controls autoplay>
         <source src={videoAddress} type="video/mp4" />
         Your browser does not support the video tag.
       </video> */}
-            {/* <iframe
+          {/* <iframe
         title="video"
         width="560"
         height="315"
@@ -36,14 +33,13 @@ const MealPresentation = props => {
         allowfullscreen
       ></iframe> */}
 
-            <li>
-              <b>Category:</b> {mealCategory}
-            </li>
-            <li>
-              <b>Origin:</b> {mealArea}
-            </li>
-          </ul>
-        </div>
+          <li>
+            <b>Category:</b> {mealCategory}
+          </li>
+          <li>
+            <b>Origin:</b> {mealArea}
+          </li>
+        </ul>
       </div>
     </div>
   );

src/components/Navbar.js

@@ -7,9 +7,8 @@ const Navbar = props => {
   return (
     <nav>
       <div className="nav-wrapper">
-        {/* <div className="container"> */}
         <div className="row">
-          <div className="col s2">
+          <div className="col s3">
             <Logo />
           </div>
           <div className="col s6">
@@ -18,12 +17,11 @@ const Navbar = props => {
               handleChange={props.handleChange}
             />
           </div>
-          <div className="col s4">
+          <div className="col s3">
             <RandomButton handleClick={props.handleClick} />
           </div>
         </div>
       </div>
-      {/* </div>   */}
     </nav>
   );
 };

src/pages/Meal.js

@@ -4,9 +4,9 @@ import IngredientList from "../components/IngredientList";
 import Recipe from "../components/Recipe";
 
 const MealPage = props => {
-  let meal = props.meal.meals[0];
+  const meal = props.meal.meals[0];
 
-  let {
+  const {
     strMeal,
     strMealThumb,
     strYoutube,
@@ -15,7 +15,7 @@ const MealPage = props => {
     strInstructions
   } = meal;
 
-  let item = {
+  const item = {
     mealName: strMeal,
     imgAddress: strMealThumb,
     videoAddress: strYoutube,
@@ -35,12 +35,12 @@ const MealPage = props => {
 
   return (
     <div className="container">
-      <MealPresentation meal={item} />
       <div className="row">
         <div className="col s6">
-          <IngredientList ingredients={ingredientList} />
+          <MealPresentation meal={item} />
         </div>
         <div className="col s6">
+          <IngredientList ingredients={ingredientList} />
           <Recipe recipe={strInstructions} />
         </div>
       </div>