Removed all unnecessary files and renamed one

DiksonIvySon · Oct 16, 2023 · a62da08 · a62da08
1 parent 70fee1c
commit a62da08
Show file tree

Hide file tree

Showing 12 changed files with 56 additions and 533 deletions.
diff --git a/foodRecipes/burger.html b/foodRecipes/burger.html
diff --git a/foodRecipes/herbyFish.html b/foodRecipes/herbyFish.html
diff --git a/foodRecipes/images/burger.webp b/foodRecipes/images/burger.webp
diff --git a/foodRecipes/images/herbyfish.webp b/foodRecipes/images/herbyfish.webp
diff --git a/foodRecipes/images/myPicture.jpg b/foodRecipes/images/myPicture.jpg
diff --git a/foodRecipes/images/spaghetti.webp b/foodRecipes/images/spaghetti.webp
diff --git a/foodRecipes/index.html b/foodRecipes/index.html
@@ -3,42 +3,60 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>foodRecipes</title>
-    <link rel="stylesheet" href="styles.css">
+    <title>Food Recipes</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" 
+              integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" 
+              crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link rel="stylesheet" href="search.css">
+    <script defer src="search.js"></script>
 </head>
 <body>
-    <header>
-        <nav class="navbar">
-            <div class="logo">
-                <h1><strong>foodRecipes</strong></h1> 
-            </div>
-            <div class="navLinks">
-                <ul>
-                    <li><a href="index.html"><strong>Home</strong></a></li>
-                    <li><a href="herbyFish.html"><strong>Herby Fish</strong></a></li>           
-                    <li><a href="spaghetti.html"><strong>Spaghetti</strong></a></li>            
-                    <li><a href="burger.html"><strong>Burger</strong></a></li>  
-                    <li><a href="search.html"><strong>search</strong></a></li>         
-                </ul>
-            </div>
-        </nav>
-    </header>
-
-    <section>
-        <div class="homePage-image">
+    <h1 class="heading">Find the best meal recipes!!</h1>
+    <section class="banner">
+        <p class="para">When you need to feed the family or kids, these are the easy dinner recipes 
+            you turn to time and time again. With lots of healthy, quick, vegetarian, 
+            chicken, and budget-friendly ideas, there's something for everyone..
+        </p>
+        <form action="" class="searchForm">
             <div>
-                <img src="images/myPicture.jpg" alt="myPicture">
-                <div class="homePage-welcome">
-                    <p>
-                        Welcome to the foodRecipes website. 
-                        <br>
-                        Created by Dikson Manganye, for The Odin Project.
-                        <br>
-                        Please feel free to go through the linked recipes. 
-                    </p>
-                </div>
+                <input type="text" id="search-input" name="search" placeholder="Search by ingredient" required>
+                <button id="search-button" type="button">
+                    <i class="fa-solid fa-magnifying-glass"></i>
+                </button>
             </div>
-        </div>
+        </form>
     </section>
+    <h2 class="resultsHeader">Your Search Results</h2>
+    <main>
+        <div id="recipe-cards" class="recipe-cards">
+            <!-- recipe results here-->
+        </div>
+        <div id="noResults-message" class="noResults-message" style="display: none">
+            <h1>"sorry we could not find results matching your search"</h1>
+            <h4>Try searching another related ingredient</h4>
+        </div>
+    </main>
+
+    <div id="pop-up" class="pop-up" style="display: none">
+        <!-- pop-up here  -->
+    </div>
+
+    <footer>
+        <div class="footer-icons">
+            <a href="https://github.com/DiksonIvySon">
+                <i class="fa-brands fa-github"></i>
+            </a>
+            <a href="https://www.linkedin.com/in/dikson-manganye-a8b773213/">
+                <i class="fa-brands fa-linkedin-in"></i>
+            </a>
+        </div>
+        <p>
+            Copyright © 2023 <a href="https://diksonivyson.github.io/My_Portfolio/" class="web-author">Dikson Manganye</a>. All rights reserved
+        </p>
+        <p>
+            I had a lot of fun building this website and since i love cooking, 
+            this is a website that i will be using a lot to prepare my meals.
+        </p>
+    </footer> 
 </body>
 </html>
diff --git a/foodRecipes/search.css b/foodRecipes/search.css
@@ -167,11 +167,15 @@ footer {
     left: 50%;
     translate: -50% -50%;
     background-color: #F0F0F0;
-    width: 98%;
+    width: 96%;
     min-height: 75vh;
     animation: drop 1s ease-in-out forwards;
 }
 
+.popUp-container h4 {
+    margin-bottom: 0;
+}
+
 @keyframes drop {
     0% {
         opacity: 0;