Skip to content

Commit 48d46c1

Browse files
guneyuralguneyural
authoredOct 27, 2020
Recipe App But Not Done
1 parent 877b64e commit 48d46c1

File tree

3 files changed

+456
-0
lines changed

3 files changed

+456
-0
lines changed
 

‎recipeApp/app.js

+247
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,247 @@
1+
const BASE_URL = "https://www.themealdb.com/api/json/v1/1/";
2+
3+
const randRecipeName = document.querySelector('#rand-recipe-name');
4+
const randRecipeImg = document.querySelector('#rand-recipe-img');
5+
const addFavorite = document.querySelector('.add-favorite');
6+
const recipeModal = document.querySelector('.recipe-modal');
7+
const closeModal = document.querySelector('.close-modal');
8+
const cardImg = document.querySelector('.card .card-img-top')
9+
const card = document.querySelector('.card');
10+
const recipeModalList = document.querySelector('.recipe-modal-list');
11+
const favoriteMealField = document.querySelector('.favorite-meal');
12+
const mealTable = document.querySelector(".meal-table");
13+
const searchBar = document.querySelector("input[type='text']");
14+
15+
let randomRecipe = {}
16+
let recipe = {}
17+
let objectKeys = [];
18+
let ingredients = [];
19+
let amounts = [];
20+
let favorites = [];
21+
let otherCounter = 0;
22+
let results = [];
23+
24+
const appendFavoritesToDocument = (mealData) => {
25+
const mealImg = document.createElement('img');
26+
const mealNameTd = document.createElement('td');
27+
const th = document.createElement('th');
28+
29+
mealImg.setAttribute('id', 'favorite-meal-img');
30+
mealImg.src = mealData.strMealThumb;
31+
mealNameTd.innerHTML = `<td>${mealData.strMeal}</td>`;
32+
33+
th.setAttribute('class', 'favorite-meal-img');
34+
th.setAttribute('value', mealData.idMeal);
35+
mealNameTd.setAttribute('class', "favorite-meal-name");
36+
mealNameTd.setAttribute('value', mealData.idMeal);
37+
th.appendChild(mealImg);
38+
39+
document.querySelector('.meal-images').appendChild(th);
40+
document.querySelector('.meal-names').appendChild(mealNameTd);
41+
}
42+
43+
const getFavorites = async () => {
44+
JSON.parse(localStorage.getItem('favorites')).forEach(async(item) => {
45+
const fetchData = await axios.get(BASE_URL + `lookup.php?i=${item}`);
46+
const mealData = fetchData.data.meals[0];
47+
appendFavoritesToDocument(mealData);
48+
});
49+
}
50+
51+
const addToFavorites = async(id) => {
52+
const fetchData = await axios.get(BASE_URL + `lookup.php?i=${id}`);
53+
const mealData = fetchData.data.meals[0];
54+
appendFavoritesToDocument(mealData);
55+
}
56+
57+
window.onload = async () => {
58+
if(!localStorage.getItem('favorites')) {
59+
localStorage.setItem('favorites', JSON.stringify(favorites));
60+
}
61+
62+
if(localStorage.getItem('favorites').length > 0) {
63+
getFavorites();
64+
}
65+
}
66+
67+
const getRandomRecipe = async () => {
68+
const randRecipe = await axios.get(BASE_URL+"random.php");
69+
randomRecipe = {...randRecipe.data.meals[0]};
70+
71+
card.setAttribute('value', randomRecipe.idMeal);
72+
randRecipeName.innerHTML = `<span class="recipe-name" id="rand-recipe-name">${randomRecipe.strMeal} <span class="add-favorite" id="addFavorite"><svg width="1.5em" height="1.5em" viewBox="0 0 16 16" class="bi bi-heart-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
73+
<path fill-rule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"/>
74+
</svg></span></span>`;
75+
randRecipeImg.src = `${randomRecipe.strMealThumb}`;
76+
}
77+
78+
const getRecipeById = async (id) => {
79+
const favoriteId = JSON.parse(localStorage.getItem('favorites')); // For Comparison with favorite recipe
80+
recipeModal.style.display = "block";
81+
const getById = await axios.get(BASE_URL + `lookup.php?i=${id}`);
82+
recipe = getById.data.meals[0];
83+
objectKeys = [...Object.keys(recipe)]; //objectKeys[9] = "strIngredient1", objectKeys[48] = "strMeasure20"
84+
85+
//========= FOR ONLY GETTING INGREDIENTS AND AMOUNT OF INDGREDIENTS =============
86+
let extractKeys = [];
87+
88+
for(var i=9; i<=48; i++){
89+
extractKeys.push(objectKeys[i]);
90+
}
91+
//========= FOR ONLY GETTING INGREDIENTS AND AMOUNT OF INDGREDIENTS =============
92+
93+
let ingredientsAndAmounts = []
94+
95+
//remove empty ingredients and amounts
96+
extractKeys.forEach((item) => {
97+
return recipe[item] == "" || recipe[item] == null || recipe[item] == " " ? "" : ingredientsAndAmounts.push(recipe[item]);
98+
});
99+
100+
//Only Get Ingredients
101+
for(let i = 0; i<(ingredientsAndAmounts.length / 2); i++) {
102+
ingredients.push(ingredientsAndAmounts[i]);
103+
}
104+
105+
//Only Get Amounts
106+
for(let i = ingredientsAndAmounts.length / 2; i<ingredientsAndAmounts.length; i++) {
107+
amounts.push(ingredientsAndAmounts[i]);
108+
}
109+
110+
for(let i = 0; i<ingredients.length; i++) {
111+
const newLi = document.createElement('li');
112+
newLi.innerHTML = `<span id="amount">${amounts[i]}</span> <span id="ingredient">${ingredients[i]}</span>`;
113+
114+
newLi.setAttribute('class', 'pb-3');
115+
recipeModalList.appendChild(newLi);
116+
117+
}
118+
119+
document.querySelector('#recipe-modal-img').src = recipe.strMealThumb;
120+
document.querySelector('#recipe-modal-name').innerHTML = `<span class="recipe-name" id="recipe-modal-name">${recipe.strMeal}</span>`;
121+
document.querySelector('#recipe-modal-instructions').innerText = recipe.strInstructions;
122+
}
123+
124+
const addFavoriteEvent = async (id) => {
125+
const fetchData = await axios.get(BASE_URL + `lookup.php?i=${id}`);
126+
const mealData = fetchData.data.meals[0];
127+
128+
let temp = 0; //Counter for duplicates in array
129+
favorites = [...JSON.parse(localStorage.getItem('favorites'))];
130+
131+
favorites.forEach((item) => {
132+
if(item == id) {
133+
temp ++;
134+
}
135+
});
136+
137+
if(temp <= 0) {
138+
favorites.push(id);
139+
localStorage.setItem('favorites', JSON.stringify(favorites));
140+
} else {
141+
favorites.splice(favorites.indexOf(id), 1);
142+
localStorage.setItem('favorites', JSON.stringify(favorites));
143+
}
144+
145+
if(otherCounter % 2 != 0) {
146+
document.querySelector('.add-favorite svg').style.color = "black";
147+
document.querySelector('.card .recipe-name .add-favorite svg').style.color = "black";
148+
} else {
149+
document.querySelector('.add-favorite svg').style.color = "gray";
150+
document.querySelector('.card .recipe-name .add-favorite svg').style.color = "gray";
151+
}
152+
}
153+
154+
document.querySelector('.card .recipe-name').addEventListener("click", (event) => {
155+
otherCounter ++;
156+
if(event.target.className == '[object SVGAnimatedString]') {
157+
makeFavsVisible();
158+
}
159+
});
160+
161+
function makeFavsVisible() {
162+
addFavoriteEvent(card.getAttribute('value'));
163+
let counter = 0;
164+
const favs = document.querySelector(".meal-images").childNodes;
165+
const favMealNames = document.querySelector(".meal-names").childNodes;
166+
for(let i = 1; i<favs.length; i++) {
167+
if(favs[i].getAttribute('value') != card.getAttribute('value')){
168+
counter ++;
169+
}else {
170+
favs[i].style.display = 'none';
171+
favMealNames[i].style.display = 'none';
172+
}
173+
}
174+
175+
if(otherCounter%2!=0) {
176+
addToFavorites(card.getAttribute('value'));
177+
}else{
178+
document.querySelector('.add-favorite svg').style.color = "pink";
179+
}
180+
}
181+
182+
closeModal.addEventListener('click', () => {
183+
recipeModal.style.display = 'none';
184+
});
185+
186+
document.querySelector('.meal-images').addEventListener("click", (e) => {
187+
if(Object.is(document.querySelector('th img').id, e.target.id)) {
188+
getRecipeById(e.target.parentNode.getAttribute('value'));
189+
}
190+
});
191+
192+
document.querySelector('.search-icon').addEventListener('click', async () => {
193+
axios
194+
.get(BASE_URL + `search.php?s=${searchBar.value}`)
195+
.then(result => {
196+
return result.data.meals;
197+
})
198+
.then(data => {
199+
if(data){
200+
document.querySelectorAll('.content .card').forEach(element => {
201+
element.style.display = 'none';
202+
});
203+
204+
data.forEach(item => {
205+
const div = document.createElement('div');
206+
div.setAttribute('value', item.idMeal);
207+
div.setAttribute('class', 'card random-recipe mb-4 mt-4');
208+
div.style.width = "90%";
209+
210+
const img = document.createElement('img');
211+
img.setAttribute('class', "card-img-top recipe-img");
212+
img.setAttribute('id', "rand-recipe-img")
213+
img.setAttribute('src', item.strMealThumb);
214+
img.setAttribute('alt', item.strMeal);
215+
img.setAttribute('onclick', `getRecipeById(${item.idMeal})`);
216+
217+
const p = document.createElement('p');
218+
p.setAttribute('class', 'lead');
219+
p.innerHTML = "Results";
220+
221+
const span = document.createElement('span');
222+
span.setAttribute('class', 'recipe-name');
223+
span.setAttribute('id', 'rand-recipe-name');
224+
span.innerHTML = `<span class="recipe-name" id="rand-recipe-name">${item.strMeal} <span class="add-favorite" id="addFavorite" onclick="makeFavsVisible()"><svg width="1.5em" height="1.5em" viewBox="0 0 16 16" class="bi bi-heart-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
225+
<path fill-rule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"/>
226+
</svg></span></span>`
227+
228+
div.appendChild(img);
229+
div.appendChild(p);
230+
div.appendChild(span);
231+
232+
document.querySelector('.content').appendChild(div);
233+
});
234+
} else {
235+
alert('No Recipe Found');
236+
}
237+
})
238+
239+
});
240+
241+
cardImg.addEventListener('click', (e) => {
242+
if(e.target.tagName.toLowerCase() === 'img'){
243+
getRecipeById(card.getAttribute('value'));
244+
}
245+
});
246+
247+
getRandomRecipe();

‎recipeApp/index.html

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
7+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
8+
<link rel="stylesheet" type="text/css" href="style.css">
9+
<title>Recipe App</title>
10+
</head>
11+
<body class="bg-light">
12+
13+
<div class="recipe-modal">
14+
<div class="recipe-content">
15+
<h1 class="close-modal">&times;</h1>
16+
<img class="card-img-top recipe-img img-fluid mb-3" id="recipe-modal-img" src="">
17+
<span class="recipe-name pl-1" id="recipe-modal-name"> </span>
18+
<p class="pl-2" id="recipe-modal-instructions"></p>
19+
<p class="pt-3 pl-2" style="font-weight: bold">Ingredients: </p>
20+
<ul class="recipe-modal-list"></ul>
21+
</div>
22+
</div>
23+
24+
<div class="main-content shadow">
25+
<nav>
26+
<input type="text" />
27+
<svg class="search-icon" width="2em" height="2em" viewBox="0 0 16 16" class="bi bi-search" fill="currentColor" xmlns="http://www.w3.org/2000/svg" style="color:gray">
28+
<path fill-rule="evenodd" d="M10.442 10.442a1 1 0 0 1 1.415 0l3.85 3.85a1 1 0 0 1-1.414 1.415l-3.85-3.85a1 1 0 0 1 0-1.415z"/>
29+
<path fill-rule="evenodd" d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z"/>
30+
</svg>
31+
</nav>
32+
<div class="favorite-meals">
33+
<h3 style="font-weight: bold; text-align: center;">Favorite Meals</h3>
34+
<div class="favorite-meal" style="padding-left: 10px;">
35+
<table class="meal-table">
36+
<tr class="meal-images">
37+
</tr>
38+
<tr class="meal-names">
39+
</tr>
40+
</table>
41+
42+
</div>
43+
</div>
44+
<div class="content">
45+
<div class="card random-recipe mb-4 mt-4" style="width:90%;" value="">
46+
<img class="card-img-top recipe-img" id="rand-recipe-img" src="">
47+
<p class="lead">Random Recipe</p>
48+
<span class="recipe-name" id="rand-recipe-name"> <span class="add-favorite" id="addFavorite"><svg width="1.5em" height="1.5em" viewBox="0 0 16 16" class="bi bi-heart-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
49+
<path fill-rule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"/>
50+
</svg></span></span>
51+
</div>
52+
</div>
53+
</div>
54+
55+
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
56+
<script src="app.js"></script>
57+
</body>
58+
</html>

‎recipeApp/style.css

+151
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
body {margin: 0;padding:0;font-family: 'Montserrat', Arial, Helvetica, sans-serif}
2+
3+
.main-content {
4+
background: white;
5+
border: 1px solid #efefef;
6+
width: 20%;
7+
margin: auto;
8+
margin-top: 1%;
9+
padding-top: 15px;
10+
}
11+
12+
input[type="text"] {
13+
background: #efefee;
14+
border: 1px solid #efefef;
15+
padding: 6.5px;
16+
}
17+
18+
nav {
19+
text-align: center;
20+
}
21+
22+
.favorite-meals {
23+
margin-top: 8px;
24+
background: black;
25+
height: 150px;
26+
overflow-x: auto;
27+
overflow-y: hidden;
28+
background: #7F7FD5;
29+
background: -webkit-linear-gradient(to right, #91EAE4, #86A8E7, #7F7FD5);
30+
background: linear-gradient(to right, #91EAE4, #86A8E7, #7F7FD5);
31+
white-space: nowrap;
32+
font-size: 13px;
33+
font-weight: bold;
34+
}
35+
36+
table {
37+
margin: 0px;
38+
}
39+
40+
.favorite-meals img {
41+
border-radius: 50%;
42+
width: 63px;
43+
height: 63px;
44+
padding: 2px;
45+
border: 2.45px solid #8a2eb8;
46+
}
47+
48+
.favorite-meals img:hover {
49+
cursor: pointer;
50+
}
51+
52+
.content p.lead {
53+
position: absolute;
54+
top: 7px;
55+
left: 5px;
56+
font-weight: bold;
57+
background: #efefefef;
58+
padding: 3px 10px;
59+
}
60+
61+
.card {
62+
margin: auto;
63+
}
64+
65+
.card-img-top:hover {
66+
cursor: pointer;
67+
}
68+
69+
.recipe-name {
70+
font-size: 18px;
71+
font-weight: bold;
72+
padding: 15px 5px;
73+
}
74+
75+
.add-favorite {
76+
float: right;
77+
color: gray;
78+
}
79+
80+
.add-favorite:hover {
81+
cursor: pointer;
82+
}
83+
84+
table tr th {
85+
padding: 10px;
86+
padding-bottom: 0;
87+
}
88+
89+
table tr td {
90+
padding-left: 0px;
91+
padding-right: 10px;
92+
}
93+
94+
.search-icon:hover {
95+
cursor: pointer;
96+
}
97+
98+
.recipe-modal {
99+
display: none;
100+
position: fixed;
101+
z-index: 1;
102+
top: 0;
103+
left: 0;
104+
width: 100%;
105+
height: 100%;
106+
background: rgba(0, 0, 0, 0.4);
107+
overflow-y: auto;
108+
}
109+
110+
.recipe-content {
111+
position: relative;
112+
background:white;
113+
width: 500px;
114+
margin: auto;
115+
margin-top: 2%;
116+
}
117+
118+
.close-modal {
119+
position: absolute;
120+
font-size: 80px;
121+
color: white;
122+
right: 2px;
123+
top:2px;
124+
background: black;
125+
}
126+
127+
.close-modal:hover {
128+
cursor: pointer;
129+
}
130+
131+
.add-favorite:hover{
132+
color: black;
133+
}
134+
135+
.added-favorite {
136+
color: black;
137+
}
138+
139+
@media only screen and (max-width: 800px) {
140+
.main-content {
141+
width: 100%;
142+
}
143+
144+
.recipe-content {
145+
width: 300px;
146+
}
147+
148+
.close-modal {
149+
font-size: 50px;
150+
}
151+
}

0 commit comments

Comments
 (0)
Please sign in to comment.