Skip to content

Commit 7e58ce0

Browse files
Prakash-2002Prakash-2002
authoredFeb 16, 2023
Add files via upload
1 parent 88b2163 commit 7e58ce0

File tree

4 files changed

+1200
-0
lines changed

4 files changed

+1200
-0
lines changed
 

‎Coding-Ninjas.jpg

51.5 KB
Loading

‎index.html

+100
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<link rel="preconnect" href="https://fonts.googleapis.com" />
6+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
7+
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;700&display=swap" rel="stylesheet" />
8+
<meta charset="UTF-8" />
9+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
10+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
11+
<title>The Meal App</title>
12+
<link rel="stylesheet" href="style.css" />
13+
<link rel="stylesheet" href="responsive.css">
14+
<script src="https://kit.fontawesome.com/e6f12e5790.js" crossorigin="anonymous"></script>
15+
</head>
16+
17+
<body>
18+
19+
20+
<div class="background-image">
21+
<img src="./assets/Coding-Ninjas.jpg" alt="" />
22+
</div>
23+
24+
25+
<div id="navbar">
26+
<a href="index.html">
27+
<div class="top-logo">The Meal App
28+
<hr />
29+
</div>
30+
</a>
31+
32+
33+
<div class="side-drawer">
34+
35+
<div id="toggle-sidebar">
36+
<i class="fa-solid fa-bars"></i>
37+
<span id="total-counter">0</span>
38+
</div>
39+
</div>
40+
41+
42+
</div>
43+
44+
45+
<div id="main">
46+
47+
<div id="sidebar">
48+
<div class="top_gap"></div>
49+
<hr />
50+
<div class="title small">
51+
Favourite Items
52+
</div>
53+
<hr />
54+
<div id="fav">
55+
56+
57+
</div>
58+
59+
</div>
60+
<div id="flex-box">
61+
62+
63+
64+
<div class="container">
65+
66+
<div class="header">
67+
<div class="title">
68+
Let's Eat Something New
69+
</div>
70+
</div>
71+
<div class="" id="search-bar">
72+
<div class="icon">
73+
<i class="fa-solid fa-search "></i>
74+
</div>
75+
<div class="new-search-input">
76+
<form onkeyup="showMealList()">
77+
<input id="search-input" type="text" placeholder="Search food, receipe" />
78+
</form>
79+
</div>
80+
81+
</div>
82+
</div>
83+
84+
85+
<div id="cards-holder" class="">
86+
87+
88+
89+
</div>
90+
91+
92+
</div>
93+
94+
95+
</div>
96+
97+
<script src="script.js"></script>
98+
</body>
99+
100+
</html>

‎script.js

+400
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,400 @@
1+
document.addEventListener('load', ()=>{
2+
updateTask();
3+
})
4+
/**
5+
* Get the DOM elements for toggle button, sidebar, flex-box, searchbar, dbObjectFavList, and dbLastInput
6+
*/
7+
8+
const toggleButton = document.getElementById("toggle-sidebar");
9+
const sidebar = document.getElementById("sidebar");
10+
const flexBox = document.getElementById('flex-box');
11+
const searchbar = document.getElementById('search-bar');
12+
13+
14+
15+
/**
16+
* Check and initialize the local storage items for favorite list and last input
17+
*/
18+
19+
20+
const dbObjectFavList = "favouritesList";
21+
if (localStorage.getItem(dbObjectFavList) == null) {
22+
localStorage.setItem(dbObjectFavList, JSON.stringify([]));
23+
}
24+
25+
26+
27+
/**
28+
* Update the task counter with the current number of items in the favorite list.
29+
*/
30+
function updateTask() {
31+
const favCounter = document.getElementById('total-counter');
32+
const db = JSON.parse(localStorage.getItem(dbObjectFavList));
33+
if (favCounter.innerText != null) {
34+
favCounter.innerText = db.length;
35+
}
36+
37+
}
38+
39+
40+
/**
41+
* Check if an ID is in a list of favorites
42+
*
43+
* @param list The list of favorites
44+
* @param id The ID to check
45+
* @return true if the ID is in the list, false otherwise
46+
*/
47+
48+
function isFav(list, id) {
49+
let res = false;
50+
for (let i = 0; i < list.length; i++) {
51+
if (id == list[i]) {
52+
res = true;
53+
}
54+
}
55+
return res;
56+
}
57+
58+
59+
60+
/**************************** Some Usefull Utility Function***************************** */
61+
62+
/**
63+
* It return truncated string greater then 50
64+
* @param {*} str
65+
* @param {*} n
66+
* @returns
67+
*/
68+
function truncate(str, n) {
69+
return str?.length > n ? str.substr(0, n - 1) + "..." : str;
70+
}
71+
72+
/**
73+
* Generates a random character string starting
74+
* @returns {string} The generated string
75+
*/
76+
function generateOneCharString() {
77+
var possible = "abcdefghijklmnopqrstuvwxyz";
78+
return possible.charAt(Math.floor(Math.random() * possible.length));
79+
}
80+
81+
82+
83+
/**
84+
* Function to toggle the sidebar and display the list of favorite meals.
85+
* When the toggle button is clicked, the sidebar is shown or hidden and the list of favorite meals is displayed.
86+
* The flexBox class is also toggled to adjust the layout of the page.
87+
*
88+
*/
89+
toggleButton.addEventListener("click", function () {
90+
showFavMealList();
91+
sidebar.classList.toggle("show");
92+
flexBox.classList.toggle('shrink');
93+
});
94+
95+
96+
/**
97+
*
98+
* This function adds an event listener to the toggle button that when clicked, it calls the showFavMealList function and adds or removes the "show" class to the sidebar element and "shrink" class to the flexBox element, respectively.
99+
* @event toggleButton - The button element that when clicked, triggers the event listener.
100+
* @function showFavMealList - The function that is called when the toggle button is clicked. It populates the fav element with the list of favorite meals.
101+
* @element sidebar - The sidebar element that has the "show" class added or removed.
102+
* @element flexBox - The flexbox element that has the "shrink" class added or removed.
103+
*/
104+
105+
flexBox.onscroll = function () {
106+
107+
if (flexBox.scrollTop > searchbar.offsetTop) {
108+
searchbar.classList.add("fixed");
109+
110+
} else {
111+
searchbar.classList.remove("fixed");
112+
}
113+
};
114+
115+
116+
/**
117+
* Fetch meals from API
118+
*
119+
* @param {string} url - The base URL for the API
120+
* @param {string} value - The value to append to the URL for filtering the results
121+
*
122+
* @returns {Promise} A promise that resolves to the JSON data of the meals
123+
*/
124+
125+
const fetchMealsFromApi = async (url, value) => {
126+
const response = await fetch(`${url + value}`);
127+
const meals = await response.json();
128+
return meals;
129+
}
130+
131+
132+
/**
133+
* showMealList - function to show meal list based on search input
134+
*
135+
* @returns {void}
136+
*
137+
* This function first retrieves the data from local storage and then it fetches the meals data from API
138+
* using the fetchMealsFromApi function. It then maps over the meals data and creates the HTML template
139+
* for each meal. This HTML template is then added to the DOM.
140+
*/
141+
142+
async function showMealList() {
143+
const list = JSON.parse(localStorage.getItem(dbObjectFavList));
144+
const inputValue = document.getElementById("search-input").value;
145+
const url = "https://www.themealdb.com/api/json/v1/1/search.php?s=";
146+
const mealsData = await fetchMealsFromApi(url, inputValue);
147+
let html = '';
148+
if (mealsData.meals) {
149+
html = mealsData.meals.map(element => {
150+
151+
return `
152+
153+
<div class="card">
154+
<div class="card-top" onclick="showMealDetails(${element.idMeal}, '${inputValue}')">
155+
<div class="dish-photo" >
156+
<img src="${element.strMealThumb}" alt="">
157+
</div>
158+
<div class="dish-name">
159+
${element.strMeal}
160+
</div>
161+
<div class="dish-details">
162+
${truncate(element.strInstructions, 50)}
163+
164+
<span class="button" onclick="showMealDetails(${element.idMeal}, '${inputValue}')">Know More</span>
165+
166+
</div>
167+
</div>
168+
<div class="card-bottom">
169+
<div class="like">
170+
<i class="fa-solid fa-heart ${isFav(list, element.idMeal) ? 'active' : ''} " onclick="addRemoveToFavList(${element.idMeal})"></i>
171+
172+
</div>
173+
<div class="play">
174+
<a href="${element.strYoutube}">
175+
<i class="fa-brands fa-youtube"></i>
176+
</a>
177+
</div>
178+
</div>
179+
</div>
180+
`
181+
}).join('');
182+
document.getElementById('cards-holder').innerHTML = html;
183+
}
184+
}
185+
186+
187+
188+
/**
189+
* addRemoveToFavList - function to add or remove a meal from the favorite list
190+
*
191+
* @param {string} id - The id of the meal to be added or removed
192+
*
193+
* This function first retrieves the data from local storage and then it checks if the provided meal id already exist in the favorite list.
194+
* If it exists, it removes it from the list, otherwise it adds it to the list. It then updates the local storage and updates the UI.
195+
*/
196+
197+
function addRemoveToFavList(id) {
198+
const detailsPageLikeBtn = document.getElementById('like-button');
199+
let db = JSON.parse(localStorage.getItem(dbObjectFavList));
200+
let ifExist = false;
201+
for (let i = 0; i < db.length; i++) {
202+
if (id == db[i]) {
203+
ifExist = true;
204+
205+
}
206+
207+
} if (ifExist) {
208+
db.splice(db.indexOf(id), 1);
209+
210+
} else {
211+
db.push(id);
212+
213+
}
214+
215+
localStorage.setItem(dbObjectFavList, JSON.stringify(db));
216+
if (detailsPageLikeBtn != null) {
217+
detailsPageLikeBtn.innerHTML = isFav(db, id) ? 'Remove From Favourite' : 'Add To Favourite';
218+
}
219+
220+
showMealList();
221+
showFavMealList();
222+
updateTask();
223+
}
224+
225+
226+
/**
227+
* Show details for a specific meal
228+
* @async
229+
* @function
230+
* @param {string} itemId - The ID of the meal to show details for
231+
* @param {string} searchInput - The search input used to fetch the related meals
232+
*/
233+
234+
async function showMealDetails(itemId, searchInput) {
235+
console.log("searchInput:...............", searchInput);
236+
const list = JSON.parse(localStorage.getItem(dbObjectFavList));
237+
flexBox.scrollTo({ top: 0, behavior: "smooth" });
238+
const url = "https://www.themealdb.com/api/json/v1/1/lookup.php?i=";
239+
const searchUrl = "https://www.themealdb.com/api/json/v1/1/search.php?s=";
240+
const mealList = await fetchMealsFromApi(searchUrl,searchInput);
241+
console.log('mealslist:..........',mealList);
242+
let html = ''
243+
const mealDetails = await fetchMealsFromApi(url, itemId);
244+
if (mealDetails.meals) {
245+
html = `
246+
<div class="container remove-top-margin">
247+
<div class="header hide">
248+
<div class="title">
249+
Let's Eat Something New
250+
</div>
251+
</div>
252+
<div class="fixed" id="search-bar">
253+
<div class="icon">
254+
<i class="fa-solid fa-search "></i>
255+
</div>
256+
<div class="new-search-input">
257+
<form onkeyup="showMealList()">
258+
<input id="search-input" type="text" placeholder="Search food, receipe" />
259+
</form>
260+
</div>
261+
</div>
262+
</div>
263+
<div class="item-details">
264+
<div class="item-details-left">
265+
<img src=" ${mealDetails.meals[0].strMealThumb}" alt="">
266+
</div>
267+
<div class="item-details-right">
268+
<div class="item-name">
269+
<strong>Name: </strong>
270+
<span class="item-text">
271+
${mealDetails.meals[0].strMeal}
272+
</span>
273+
</div>
274+
<div class="item-category">
275+
<strong>Category: </strong>
276+
<span class="item-text">
277+
${mealDetails.meals[0].strCategory}
278+
</span>
279+
</div>
280+
<div class="item-ingrident">
281+
<strong>Ingrident: </strong>
282+
<span class="item-text">
283+
${mealDetails.meals[0].strIngredient1},${mealDetails.meals[0].strIngredient2},
284+
${mealDetails.meals[0].strIngredient3},${mealDetails.meals[0].strIngredient4}
285+
</span>
286+
</div>
287+
<div class="item-instruction">
288+
<strong>Instructions: </strong>
289+
<span class="item-text">
290+
${mealDetails.meals[0].strInstructions}
291+
</span>
292+
</div>
293+
<div class="item-video">
294+
<strong>Video Link:</strong>
295+
<span class="item-text">
296+
<a href="${mealDetails.meals[0].strYoutube}">Watch Here</a>
297+
298+
</span>
299+
<div id="like-button" onclick="addRemoveToFavList(${mealDetails.meals[0].idMeal})">
300+
${isFav(list, mealDetails.meals[0].idMeal) ? 'Remove From Favourite' : 'Add To Favourite'} </div>
301+
</div>
302+
</div>
303+
</div>
304+
<div class="card-name">
305+
Related Items
306+
</div>
307+
<div id="cards-holder" class=" remove-top-margin ">`
308+
}
309+
if( mealList.meals!=null){
310+
html += mealList.meals.map(element => {
311+
return `
312+
<div class="card">
313+
<div class="card-top" onclick="showMealDetails(${element.idMeal}, '${searchInput}')">
314+
<div class="dish-photo" >
315+
<img src="${element.strMealThumb}" alt="">
316+
</div>
317+
<div class="dish-name">
318+
${element.strMeal}
319+
</div>
320+
<div class="dish-details">
321+
${truncate(element.strInstructions, 50)}
322+
<span class="button" onclick="showMealDetails(${element.idMeal}, '${searchInput}')">Know More</span>
323+
</div>
324+
</div>
325+
<div class="card-bottom">
326+
<div class="like">
327+
328+
<i class="fa-solid fa-heart ${isFav(list, element.idMeal) ? 'active' : ''} "
329+
onclick="addRemoveToFavList(${element.idMeal})"></i>
330+
</div>
331+
<div class="play">
332+
<a href="${element.strYoutube}">
333+
<i class="fa-brands fa-youtube"></i>
334+
</a>
335+
</div>
336+
</div>
337+
</div>
338+
`
339+
}).join('');
340+
}
341+
342+
343+
html = html + '</div>';
344+
345+
document.getElementById('flex-box').innerHTML = html;
346+
}
347+
348+
349+
350+
/**
351+
This function is used to show all the meals which are added to the favourite list.
352+
@function
353+
@async
354+
@returns {string} html - This returns html which is used to show the favourite meals.
355+
@throws {Error} If there is no favourite meal then it will show "Nothing To Show....."
356+
@example
357+
showFavMealList()
358+
*/
359+
async function showFavMealList() {
360+
let favList = JSON.parse(localStorage.getItem(dbObjectFavList));
361+
let url = "https://www.themealdb.com/api/json/v1/1/lookup.php?i=";
362+
let html = "";
363+
364+
if (favList.length == 0) {
365+
html = `<div class="fav-item nothing"> <h1>
366+
Nothing To Show.....</h1> </div>`
367+
} else {
368+
for (let i = 0; i < favList.length; i++) {
369+
const favMealList = await fetchMealsFromApi(url, favList[i]);
370+
if (favMealList.meals[0]) {
371+
let element = favMealList.meals[0];
372+
html += `
373+
<div class="fav-item" onclick="showMealDetails(${element.idMeal},'${generateOneCharString()}')">
374+
375+
<div class="fav-item-photo">
376+
<img src="${element.strMealThumb}" alt="">
377+
</div>
378+
<div class="fav-item-details">
379+
<div class="fav-item-name">
380+
<strong>Name: </strong>
381+
<span class="fav-item-text">
382+
${element.strMeal}
383+
</span>
384+
</div>
385+
<div id="fav-like-button" onclick="addRemoveToFavList(${element.idMeal})">
386+
Remove
387+
</div>
388+
</div>
389+
</div>
390+
`
391+
}
392+
}
393+
}
394+
document.getElementById('fav').innerHTML = html;
395+
}
396+
397+
398+
399+
updateTask();
400+
/************************************** End Of the Code ****************************************** */

‎style.css

+700
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,700 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
a{
7+
text-decoration: none;
8+
}
9+
a:hover{
10+
text-decoration: none;
11+
}
12+
a:active{
13+
text-decoration: none;
14+
}
15+
a:visited{
16+
text-decoration: none;
17+
}
18+
19+
/* width */
20+
*::-webkit-scrollbar {
21+
width: 5px;
22+
}
23+
24+
/* Track */
25+
*::-webkit-scrollbar-track {
26+
background: hsl(233, 14%, 35%)
27+
}
28+
29+
/* Handle */
30+
*::-webkit-scrollbar-thumb {
31+
background: hsl(235, 24%, 19%)
32+
}
33+
34+
/* Handle on hover */
35+
*::-webkit-scrollbar-thumb:hover {
36+
background: hsl(233, 14%, 35%)
37+
}
38+
39+
40+
body {
41+
background-color: hsl(235, 24%, 19%);
42+
43+
display: flex;
44+
justify-content: center;
45+
46+
47+
}
48+
49+
50+
51+
#navbar {
52+
display: flex;
53+
flex-direction: row;
54+
position: fixed;
55+
top: 0;
56+
left: 0;
57+
width: 100%;
58+
height: 45px;
59+
box-shadow: 2px 2px 30px -10px hsl(235, 24%, 19%);
60+
background-color: rgb(17, 32, 61);
61+
/* Z 1 ensure that it will remain on top whos zindex value less then 1 */
62+
z-index: 1;
63+
justify-content: space-between;
64+
}
65+
66+
67+
68+
69+
70+
.top-logo {
71+
width: 120px;
72+
height: 40px;
73+
display: flex;
74+
align-items: flex-start;
75+
font-size: 1.2rem;
76+
justify-content: center;
77+
color: hsl(234, 39%, 85%);
78+
text-shadow: 2px -1px 6px hsl(234, 39%, 85%);
79+
flex-direction: column;
80+
81+
82+
}
83+
84+
.side-drawer {
85+
display: flex;
86+
justify-content: flex-end;
87+
align-items: center;
88+
flex-direction: row;
89+
90+
91+
92+
}
93+
94+
95+
#total-counter {
96+
color: rgb(238, 231, 231);
97+
position: relative;
98+
left: -16px;
99+
top: -10px;
100+
width: 16px;
101+
height: 16px;
102+
border-radius: 20%;
103+
font-size: .8rem;
104+
text-align: center;
105+
}
106+
107+
.fa-bars {
108+
width: 50px;
109+
scale: 1.5;
110+
color: hsl(236, 6%, 45%)
111+
}
112+
113+
#toggle-sidebar {
114+
background-color: transparent;
115+
/* border: 1px solid hsl(236, 6%, 45%); */
116+
display: flex;
117+
justify-content: center;
118+
align-items: center;
119+
text-align: center;
120+
height: 43px;
121+
cursor: pointer;
122+
border-radius: 5px;
123+
124+
125+
}
126+
127+
#toggle-sidebar:hover {
128+
scale: 1.2;
129+
transition: all ease-in-out .25s;
130+
}
131+
132+
.top-logo hr {
133+
margin-top: 2px;
134+
width: 120px;
135+
border: 1px hsl(233, 14%, 35%) solid;
136+
}
137+
138+
139+
140+
#main {
141+
display: flex;
142+
flex-direction: row-reverse;
143+
width: 100%;
144+
height: 100vh;
145+
146+
}
147+
148+
#flex-box {
149+
flex: 1;
150+
display: flex;
151+
flex-direction: column;
152+
overflow-y: scroll;
153+
scroll-behavior: smooth;
154+
}
155+
156+
#sidebar {
157+
display: flex;
158+
flex: .2;
159+
160+
height: 100vh;
161+
background-color: hsl(235, 24%, 19%);
162+
163+
color: white;
164+
flex-direction: column;
165+
align-items: center;
166+
display: none;
167+
min-width: 300px;
168+
max-width: 500px;
169+
170+
171+
172+
}
173+
174+
#sidebar.show {
175+
display: flex;
176+
transition: all ease-in-out .25s;
177+
178+
}
179+
180+
#flex-box.shrink {
181+
flex: .8;
182+
transition: all ease-in-out .25s;
183+
}
184+
185+
.top_gap {
186+
height: 60px;
187+
width: 100%;
188+
189+
}
190+
191+
#sidebar .small {
192+
font-size: 1rem;
193+
color: rgb(158, 153, 153);
194+
}
195+
196+
#sidebar hr {
197+
margin-bottom: 10px;
198+
margin-top: 10px;
199+
width: 100%;
200+
border: 1px solid hsl(233, 14%, 35%);
201+
202+
}
203+
204+
205+
206+
207+
/*********************************** test*****************/
208+
209+
210+
#fav {
211+
display: flex;
212+
flex-direction: column;
213+
overflow-y: scroll;
214+
height: 100vh;
215+
width: 100%;
216+
align-items: center;
217+
}
218+
219+
.fav-item {
220+
width: 80%;
221+
min-height: 250px;
222+
display: flex;
223+
flex-direction: column;
224+
225+
justify-content: space-between;
226+
align-items: center;
227+
228+
margin-bottom: 20px;
229+
background-color: hsl(234, 39%, 85%);
230+
color: hsl(235, 24%, 19%);
231+
font-size: 1.2rem;
232+
border-radius: 10px;
233+
234+
}
235+
236+
.fav-item:hover{
237+
cursor: pointer;
238+
}
239+
240+
.fav-item-photo {
241+
width: 100%;
242+
}
243+
244+
.fav-item-photo img {
245+
width: 100%;
246+
height: 200px;
247+
object-fit: cover;
248+
border-radius: 10%;
249+
250+
}
251+
252+
.fav-item-details {
253+
254+
display: flex;
255+
flex-direction: row;
256+
justify-content: space-between;
257+
width: 90%;
258+
height: 40px;
259+
align-items: center;
260+
}
261+
262+
#fav-like-button {
263+
border: 1px solid hsl(233, 14%, 35%);
264+
border-radius: 10%;
265+
padding: 2px;
266+
height: 30px;
267+
box-shadow: 1px 1px 10px -2px rgb(146, 99, 99);
268+
269+
}
270+
271+
#fav-like-button:hover {
272+
cursor: pointer;
273+
274+
border-color: brown;
275+
276+
277+
278+
}
279+
280+
.fav-item.nothing {
281+
background-color: transparent;
282+
color: rgb(129, 128, 126);
283+
font-size: .8rem;
284+
text-decoration: none;
285+
}
286+
287+
288+
289+
290+
291+
.background-image {
292+
position: absolute;
293+
top: 0;
294+
left: 0;
295+
right: 0;
296+
height: 350px;
297+
z-index: -1;
298+
}
299+
300+
.background-image img {
301+
width: 100%;
302+
height: 100%;
303+
object-fit: cover;
304+
/* object-position: left; */
305+
306+
filter: blur(12px);
307+
-webkit-filter: blur(12px);
308+
}
309+
310+
311+
.container {
312+
width: 100%;
313+
display: flex;
314+
flex-direction: column;
315+
margin-top: 150px;
316+
justify-content: center;
317+
align-items: center;
318+
319+
320+
}
321+
322+
.header {
323+
display: flex;
324+
justify-content: space-between;
325+
align-items: center;
326+
327+
}
328+
329+
.header.hide {
330+
display: none;
331+
}
332+
333+
.container.remove-top-margin {
334+
margin-top: 40px;
335+
}
336+
337+
338+
.title {
339+
color: rgb(247, 247, 247);
340+
font-size: 3rem;
341+
font-weight: bold;
342+
letter-spacing: 10px;
343+
text-align: center;
344+
text-shadow: 3px -2px 5px hsl(234, 84%, 46%);
345+
346+
}
347+
348+
#search-bar {
349+
width: 60%;
350+
background-color: hsla(235, 24%, 19%, 0.308);
351+
height: 60px;
352+
margin-top: 50px;
353+
border-radius: 20px;
354+
display: flex;
355+
356+
357+
}
358+
359+
360+
#search-bar.fixed {
361+
top: 0;
362+
position: fixed;
363+
margin-top: 1px;
364+
z-index: 2;
365+
width: 40%;
366+
height: 40px;
367+
background-color: transparent;
368+
/* background-color: rgba(21, 19, 31, 0.35); */
369+
transition: all ease-in-out .25s;
370+
border-radius: 15px;
371+
372+
373+
374+
}
375+
376+
377+
.icon {
378+
379+
width: 70px;
380+
display: flex;
381+
align-items: center;
382+
justify-content: center;
383+
384+
}
385+
386+
.icon .fa-search {
387+
scale: 1.3;
388+
color: hsl(233, 14%, 35%);
389+
}
390+
391+
.new-search-input {
392+
flex-grow: 1;
393+
394+
display: flex;
395+
align-items: center;
396+
}
397+
398+
.new-search-input form {
399+
flex-grow: 1;
400+
}
401+
402+
.new-search-input input {
403+
width: 100%;
404+
padding: 10px 0px;
405+
background-color: transparent;
406+
border: none;
407+
outline: none;
408+
color: hsl(234, 39%, 85%);
409+
font-size: 18px;
410+
411+
}
412+
413+
.new-search-input input::placeholder {
414+
color: hsl(233, 14%, 35%);
415+
}
416+
417+
418+
#cards-holder {
419+
420+
width: 100%;
421+
height: 100vh;
422+
display: flex;
423+
flex-direction: row;
424+
flex-wrap: wrap;
425+
justify-content: space-between;
426+
427+
margin-top: 75px;
428+
padding: 0 10px;
429+
430+
431+
}
432+
433+
434+
.card {
435+
436+
margin: 5px;
437+
height: 350px;
438+
min-width: 220px;
439+
max-width: 220px;
440+
display: flex;
441+
flex-direction: column;
442+
background-color: hsl(234, 39%, 85%);
443+
align-items: center;
444+
border-radius: 20px;
445+
justify-content: flex-start;
446+
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.5);
447+
margin-bottom: 20px;
448+
box-shadow: rgba(0, 0, 0, 0.35) 0px -50px 36px -28px inset;
449+
}
450+
451+
#cards-holder.remove-top-margin {
452+
margin-top: 10px;
453+
}
454+
455+
.card-top {
456+
display: flex;
457+
flex-direction: column;
458+
flex: .85;
459+
460+
border-radius: 20%;
461+
}
462+
463+
.dish-photo {
464+
width: 100%;
465+
overflow: hidden;
466+
position: relative;
467+
border-top-left-radius: 20px;
468+
border-top-right-radius: 20px;
469+
470+
471+
}
472+
473+
.dish-photo img {
474+
border-top-left-radius: 20px;
475+
border-top-right-radius: 20px;
476+
height: 180px;
477+
478+
479+
width: 100%;
480+
object-fit: cover;
481+
482+
/* border: solid 1px red; */
483+
484+
485+
}
486+
487+
.dish-name {
488+
margin-top: 5px;
489+
width: 100%;
490+
margin-left: 10px;
491+
color: hsl(234, 54%, 30%);
492+
font-size: 1.3rem;
493+
font-weight: bolder;
494+
495+
}
496+
497+
.dish-details {
498+
color: hsl(234, 54%, 30%);
499+
margin-top: 5px;
500+
margin-left: 10px;
501+
width: 95%;
502+
height: 50px;
503+
504+
505+
}
506+
507+
.button {
508+
509+
510+
display: inline-block;
511+
font-size: 1.2rem;
512+
513+
border-radius: 10px;
514+
text-decoration: underline;
515+
516+
517+
}
518+
519+
520+
.card-bottom {
521+
border-bottom-left-radius: 20px;
522+
border-bottom-right-radius: 20px;
523+
display: flex;
524+
flex: .15;
525+
width: 100%;
526+
justify-content: space-evenly;
527+
align-items: center;
528+
flex-direction: row;
529+
530+
opacity: 1;
531+
532+
533+
534+
}
535+
536+
.card:hover {
537+
transform: scale(1.1);
538+
transition: all ease-in-out .45s;
539+
cursor: pointer;
540+
}
541+
542+
.card:hover .card-bottom {
543+
transition: all .25s;
544+
opacity: 1;
545+
}
546+
547+
/*
548+
.card:hover img {
549+
transform: scale(1.1);
550+
transition: ease-in-out all .25s;
551+
} */
552+
553+
.like {
554+
flex: .5;
555+
display: flex;
556+
justify-content: flex-start;
557+
align-items: flex-start;
558+
559+
}
560+
561+
.play {
562+
display: flex;
563+
justify-content: flex-end;
564+
}
565+
566+
.fa-heart {
567+
568+
scale: 1.6;
569+
color: gray;
570+
571+
572+
}
573+
574+
.fa-heart.active {
575+
color: rgb(158, 45, 45);
576+
}
577+
578+
.fa-youtube {
579+
580+
color: rgb(151, 29, 29);
581+
scale: 1.6;
582+
583+
}
584+
585+
.fa-heart:hover,
586+
.fa-youtube:hover {
587+
scale: 1.9;
588+
transition: ease-in-out all .25s;
589+
}
590+
591+
.item-details {
592+
min-height: 300px;
593+
width: 100%;
594+
padding: 10px 50px;
595+
display: flex;
596+
flex-direction: row;
597+
justify-content: flex-start;
598+
align-items: center;
599+
background-color: hsl(235, 24%, 19%);
600+
color: white;
601+
border: 1x solid red;
602+
603+
604+
}
605+
606+
.item-details-left {}
607+
608+
.item-details-left img {
609+
610+
height: 250px;
611+
max-width: 250px;
612+
object-fit: cover;
613+
border-radius: 20px;
614+
615+
}
616+
617+
.item-details-right {
618+
margin-left: 30px;
619+
height: 90%;
620+
display: flex;
621+
flex-direction: column;
622+
justify-content: space-between;
623+
width: 100%;
624+
overflow-y: hidden;
625+
626+
627+
}
628+
629+
.card-name {
630+
margin-top: 30px;
631+
height: 30px;
632+
font-size: 1.5rem;
633+
color: hsl(234, 39%, 85%);
634+
text-shadow: 3px -2px 5px hsl(234, 84%, 46%);
635+
636+
}
637+
638+
.card-name:hover {
639+
text-decoration: underline;
640+
cursor: pointer;
641+
}
642+
643+
.item-text a {
644+
text-decoration: none;
645+
color: hsl(234, 39%, 85%);
646+
padding-left: 10px;
647+
font-size: 1.2rem;
648+
}
649+
650+
.item-text {
651+
font-family: Georgia, 'Times New Roman', Times, serif;
652+
font-style: italic;
653+
color: hsl(235, 23%, 79%);
654+
}
655+
656+
.item-text a:hover {
657+
658+
text-decoration: underline;
659+
color: hsl(0, 0%, 96%);
660+
661+
}
662+
663+
.item-instruction {
664+
overflow: hidden;
665+
max-height: 90px;
666+
667+
}
668+
669+
.item-instruction>span.item-text {
670+
671+
text-overflow: ellipsis;
672+
673+
674+
}
675+
676+
.item-video {
677+
display: flex;
678+
679+
min-height: 40px;
680+
align-items: center;
681+
682+
}
683+
684+
#like-button {
685+
686+
height: 40px;
687+
align-items: center;
688+
display: flex;
689+
margin-left: 40px;
690+
border-left: 2px solid hsl(233, 14%, 35%);
691+
padding-left: 30px;
692+
font-size: 1.2rem;
693+
color: hsl(234, 39%, 85%);
694+
}
695+
696+
#like-button:hover {
697+
text-decoration: underline;
698+
cursor: pointer;
699+
color: hsl(0, 0%, 96%)
700+
}

0 commit comments

Comments
 (0)
Please sign in to comment.