├── logo2.png ├── meals.png ├── desserts.png ├── spices.png ├── README.md ├── index.html ├── style.css ├── about.html ├── blog.html └── script.js /logo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Adityaraj1904/Food-Recipe-Website/HEAD/logo2.png -------------------------------------------------------------------------------- /meals.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Adityaraj1904/Food-Recipe-Website/HEAD/meals.png -------------------------------------------------------------------------------- /desserts.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Adityaraj1904/Food-Recipe-Website/HEAD/desserts.png -------------------------------------------------------------------------------- /spices.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Adityaraj1904/Food-Recipe-Website/HEAD/spices.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## 🍲 YumSearch - Food Recipe Website 2 | 3 | A fully responsive food recipe website that allows users to search for and view delicious recipes from various categories. Built with **HTML**, **CSS**, and **JavaScript**, the website features a clean UI, responsive layout, and user-friendly experience across all devices. 4 | 5 | ## 🌟 Features 6 | 7 | - 🔍 Search for recipes by dish name 8 | - 🍽 Categorized recipe display (e.g., Indian, Chinese, Snacks, Sweets, etc.) 9 | - 📱 Fully responsive design for mobile, tablet, and desktop 10 | - 🧑‍🍳 Recipe details including ingredients and instructions 11 | - 🎨 Clean and modern user interface 12 | 13 | 14 | ## 🖼 Demo 15 | 16 | screencapture-127-0-0-1-3000-Food-Recipe-Website-index-html-2025-07-31-21_13_08

screencapture-127-0-0-1-3000-Food-Recipe-Website-index-html-2025-07-31-21_13_08

17 | 18 | screencapture-127-0-0-1-3000-index-html-2025-07-26-22_42_20

19 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | YumSearch 8 | 9 | 10 | 11 | 12 | 13 | 14 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 |

24 | 27 | 40 | 41 | 44 | 45 |

46 | 47 | 48 | 49 | 50 | 51 |

52 | 53 |

Top Recommended Foods

54 |

55 | 56 | 59 | 60 | 61 |

62 |

63 |

No food available by this name 😥
Please try another

64 |

65 | 66 | 67 | 80 | 81 |

82 | 83 | 84 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: poppins, sans-serif; 3 | box-sizing: border-box; 4 | background: rgba(211, 211, 211, 0.4); 5 | } 6 | 7 | .container { 8 | width: 80%; 9 | margin: auto; 10 | } 11 | 12 | /* Nav Bar */ 13 | 14 | nav { 15 | height: 200px; 16 | } 17 | 18 | .logo { 19 | float: left; 20 | width: 150px; 21 | cursor: pointer; 22 | } 23 | 24 | .menu { 25 | line-height: 4; 26 | } 27 | 28 | .menu-list { 29 | list-style: none; 30 | float: right; 31 | } 32 | 33 | .menu-item { 34 | float: left; 35 | padding: 20px; 36 | margin: 2px; 37 | cursor: pointer; 38 | } 39 | 40 | .menu-item:hover { 41 | color: #F06C4E; 42 | transition: color 0.2s; 43 | } 44 | 45 | .menu-item-home a { 46 | text-decoration: none; 47 | color: coral; 48 | } 49 | 50 | /* Search bar */ 51 | 52 | #search-bar-container { 53 | width: 70%; 54 | height: 50px; 55 | font-size: 20px; 56 | border: none; 57 | margin: auto; 58 | display: flex; 59 | align-items: center; 60 | background: #F8F7F5; 61 | border-radius: 10px; 62 | padding: 0 0 0 20px; 63 | overflow: hidden; 64 | } 65 | 66 | .search-icon { 67 | color: #9C9C9B; 68 | font-size: 16px; 69 | width: 10%; 70 | display: inline-block; 71 | background-color: #F8F7F5; 72 | border-radius: 10px 0 0 10px; 73 | } 74 | 75 | #input-box { 76 | width: 70%; 77 | border: none; 78 | background: none; 79 | background-color: #F8F7F5; 80 | font-size: 16px; 81 | } 82 | 83 | input:focus, 84 | button:focus { 85 | outline: none; 86 | } 87 | 88 | #search-button { 89 | background: #F06C4E; 90 | width: 20%; 91 | border: none; 92 | color: #fff; 93 | padding: 15px; 94 | font-size: 16px; 95 | } 96 | 97 | #search-button:hover { 98 | background-color: rebeccapurple; 99 | transition: background-color 0.2s ease; 100 | } 101 | 102 | /* Content body */ 103 | 104 | .single-item { 105 | border: 2px solid #4d0d4f4b; 106 | padding: 10px; 107 | border-radius: 5px; 108 | } 109 | 110 | .modal-content { 111 | padding: 10px 20px; 112 | } 113 | 114 | .ingredient-list { 115 | list-style: none; 116 | } 117 | 118 | .food-icons { 119 | padding-right: 20px; 120 | color: gray; 121 | transition: padding-right 0.3s ease; 122 | } 123 | 124 | .food-icons:hover { 125 | padding-right: 30px; 126 | color: coral; 127 | } 128 | 129 | .single-item-name { 130 | color: coral; 131 | margin-bottom: 20px; 132 | padding-bottom: 10px; 133 | border-bottom: 1px dotted lightgray; 134 | } 135 | 136 | #error-message { 137 | display: none; 138 | font-size: 20px; 139 | border: 2px solid #4d0d4f4b; 140 | border-radius: 5px; 141 | padding: 10px; 142 | } 143 | 144 | /*Media query starts*/ 145 | 146 | @media (max-width: 768px) { 147 | 148 | .container { 149 | width: 90%; 150 | } 151 | 152 | nav { 153 | display: grid; 154 | justify-content: center; 155 | } 156 | 157 | .logo { 158 | margin: auto; 159 | } 160 | 161 | .menu { 162 | margin-top: 30px; 163 | line-height: 0; 164 | } 165 | 166 | .menu-list { 167 | padding: 0px; 168 | } 169 | 170 | #search-bar-container { 171 | width: 90%; 172 | margin-top: 30px; 173 | } 174 | 175 | #search-button { 176 | width: 30%; 177 | } 178 | 179 | .modal-dialog { 180 | padding: 20px 20px; 181 | } 182 | 183 | .modal-body{ 184 | margin: auto; 185 | } 186 | } 187 | /* --------------------------------- */ 188 | #top-recipes .card-title { 189 | font-size: 1rem; 190 | text-align: center; 191 | color: coral; 192 | } 193 | 194 | #top-recipes img { 195 | height: 200px; 196 | object-fit: cover; 197 | } 198 | /* ----------------------------------- */ 199 | .menu-list a { 200 | color: #333; /* or your desired color */ 201 | text-decoration: none; 202 | font-weight: 500; 203 | } 204 | 205 | .menu-list a:hover, 206 | .menu-list a.active { 207 | color: #ff7043; /* Highlight color like 'Home' */ 208 | text-decoration: none; 209 | } 210 | -------------------------------------------------------------------------------- /about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | YumSearch | About 7 | 8 | 131 | 132 | 133 | × 134 | 135 |

136 |

About YumSearch

137 |

138 | 139 |

140 |

Welcome to YumSearch

141 |

142 | YumSearch is your go-to destination for mouthwatering recipes from all around the world. Whether you’re looking for spicy chicken curry, delicious paneer tikka, or classic desserts, we’ve got you covered. We bring you step-by-step instructions, cooking tips, and food inspiration for every occasion. 143 |

144 | 145 |

146 | Our mission is to make cooking easy and joyful for everyone. From traditional Indian dishes to continental delights, we offer a wide range of curated recipes with visually engaging cards and search functionality. 147 |

148 | 149 |

150 |

151 |

✨ Easy to Follow Recipes

152 |

Each recipe comes with clear steps and images.

153 |

154 |

155 |

🔍 Smart Search

156 |

Find your favorite dishes instantly with our dynamic search.

157 |

158 |

159 |

📱 Mobile Friendly

160 |

Enjoy a responsive experience on all devices.

161 |

162 |

163 | 164 |

165 |

Contact Us

166 |

Email: YumSearch@gmail.com

167 |

Phone: +91-9876543210

168 |

169 |

170 | 171 | 174 | 175 | 176 | 177 | -------------------------------------------------------------------------------- /blog.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | YumSearch | Blog 7 | 8 | 144 | 145 | 146 | × 147 |

148 |

YumSearch Blog

149 |

Discover cooking tips, food stories & more

150 |

151 | 152 |

153 | 154 |

155 |

156 |

157 |

5 Essential Spices in Every Indian Kitchen

158 |

Learn about the must-have spices that add bold flavors to your favorite dishes, from turmeric to garam masala.

159 |

160 |

161 | 162 |

163 |

164 |

165 |

10-Minute Meals for Busy Weeknights

166 |

Short on time? Check out these quick and tasty recipes that don't compromise on flavor or nutrition.

167 |

168 |

169 | 170 |

171 |

172 |

173 |

Top 5 Classic Desserts to Master

174 |

From gooey brownies to classic gulab jamun, these timeless desserts are a must-try for every home cook.

175 |

176 |

177 | 178 |

179 | 180 | 181 | 182 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | const logoimage = document.querySelector('.logo'); //for logo 2 | const inputBoxText = document.querySelector('#input-box'); //for input text 3 | const searchButton = document.getElementById('search-button'); //for search button 4 | const mainContent = document.getElementById('fooditem'); // for searched food item 5 | const errorMessage = document.getElementById('error-message'); //for error message 6 | 7 | // Event Listener For button Click 8 | 9 | searchButton.addEventListener('click', function () { 10 | const inputText = document.getElementById('input-box').value; 11 | mainContent.innerHTML = ''; 12 | 13 | if (inputText === '') { 14 | errorMessage.style.display = 'block'; 15 | } else { 16 | foodList(inputText); 17 | errorMessage.style.display = 'none'; 18 | } 19 | }); 20 | 21 | // Event Listener For Enter key 22 | 23 | inputBoxText.addEventListener('keyup', function (e) { 24 | 25 | if (e.keyCode === 13) { 26 | const inputText = document.getElementById('input-box').value; 27 | mainContent.innerHTML = ''; 28 | 29 | if (inputText === '') { 30 | errorMessage.style.display = 'block'; 31 | } else { 32 | foodList(inputText); 33 | errorMessage.style.display = 'none'; 34 | } 35 | } 36 | }); 37 | 38 | // Items display function 39 | 40 | function foodList(mealName) { 41 | const mainApi = `https://www.themealdb.com/api/json/v1/1/search.php?s=${mealName}`; 42 | 43 | fetch(mainApi) 44 | .then(res => res.json()) 45 | .then(data => { 46 | displayFoods(data.meals); 47 | }); 48 | 49 | const displayFoods = fooditem => { 50 | const foodsDiv = document.getElementById('fooditem'); 51 | if (fooditem != null) { 52 | fooditem.forEach(food => { 53 | const foodDiv = document.createElement('div'); 54 | foodDiv.className = 'col-sm-6 col-md-4 col-lg-3'; 55 | const foodInfo = ` 56 |

57 |

58 |

${food.strMeal}

59 |

60 | `; 61 | foodDiv.innerHTML = foodInfo; 62 | foodsDiv.appendChild(foodDiv); 63 | }); 64 | } else { 65 | errorMessage.style.display = 'block'; 66 | } 67 | }; 68 | } 69 | 70 | // Single item information 71 | 72 | const displayDetails = foodName => { 73 | const foodDetailAPI = `https://www.themealdb.com/api/json/v1/1/lookup.php?i=${foodName}`; 74 | fetch(foodDetailAPI) 75 | .then(res => res.json()) 76 | .then(data => { 77 | singleItemInfo(data.meals[0]); 78 | }); 79 | }; 80 | 81 | const singleItemInfo = food => { 82 | const foodDetailsDiv = document.getElementById('foodsDetails'); 83 | 84 | foodDetailsDiv.innerHTML = ` 85 |

Item name: ${food.strMeal}

86 |

87 | 88 | 89 |

Food Category: ${food.strCategory}

90 |

Cooking ingredients:

91 |

${food.strIngredient1} - ${food.strMeasure1}
${food.strIngredient2} - ${food.strMeasure2}
${food.strIngredient3} - ${food.strMeasure3}
${food.strIngredient4} - ${food.strMeasure4}
${food.strIngredient5} - ${food.strMeasure5}
${food.strIngredient6} - ${food.strMeasure6}
${food.strIngredient7} - ${food.strMeasure7}
${food.strIngredient8} - ${food.strMeasure8}

101 |

How to cook:

102 |

${food.strInstructions}

105 | `; 106 | // console.log(food); For object reference 107 | }; 108 | 109 | // Reload uplon clicking logo 110 | logoimage.addEventListener('click', function () { 111 | location.reload(); 112 | }) 113 | 114 | // ----------------------------------- 115 | 116 | // Fetch and display 6 random meals for Top Recommended Foods 117 | function loadTopRecommendedFoods() { 118 | const topSection = document.getElementById('top-recipes'); 119 | const topHeading = document.getElementById('top-heading'); 120 | 121 | // Clear old content if any 122 | topSection.innerHTML = ''; 123 | 124 | for (let i = 0; i < 6; i++) { 125 | fetch('https://www.themealdb.com/api/json/v1/1/random.php') 126 | .then(res => res.json()) 127 | .then(data => { 128 | const food = data.meals[0]; 129 | 130 | const foodCard = document.createElement('div'); 131 | foodCard.className = 'col'; 132 | 133 | foodCard.innerHTML = ` 134 |

135 |

136 |

137 |

${food.strMeal}

138 | 139 |

140 |

141 | `; 142 | topSection.appendChild(foodCard); 143 | }); 144 | } 145 | } 146 | 147 | // Call it on page load 148 | loadTopRecommendedFoods(); 149 | 150 | 151 | document.getElementById('search-button').addEventListener('click', function () { 152 | const query = document.getElementById('input-box').value.trim(); 153 | const topSection = document.getElementById('top-recipes'); 154 | const topHeading = document.getElementById('top-heading'); 155 | 156 | if (query !== '') { 157 | topSection.style.display = 'none'; 158 | topHeading.style.display = 'none'; 159 | } else { 160 | topSection.style.display = 'flex'; 161 | topHeading.style.display = 'block'; 162 | } 163 | }); 164 | 165 | --------------------------------------------------------------------------------