Skip to content

Commit 100f984

Browse files
abhideepghoshabhideepghosh
committed
Project Completed
0 parents commit 100f984

29 files changed

+21378
-0
lines changed

‎.gitignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
node_modules
2+
dist
3+
.parcel-cache
4+
.DS_Store

‎.prettierrc‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"singleQuote": true,
3+
"arrowParens": "avoid"
4+
}

‎README.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# forkify Project
2+
3+
Recipe application with custom recipe uploads.

‎index.html‎

Lines changed: 331 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,331 @@
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+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
7+
<link
8+
href="https://fonts.googleapis.com/css?family=Nunito+Sans:400,600,700"
9+
rel="stylesheet"
10+
/>
11+
<link rel="shortcut icon" href="src/img/favicon.png" type="image/x-icon" />
12+
13+
<link rel="stylesheet" href="src/sass/main.scss" />
14+
<script defer src="src/js/controller.js"></script>
15+
16+
<title>forkify // Search over 1,000,000 recipes</title>
17+
</head>
18+
19+
<body>
20+
<div class="container">
21+
<header class="header">
22+
<img src="src/img/logo.png" alt="Logo" class="header__logo" />
23+
<form class="search">
24+
<input
25+
type="text"
26+
class="search__field"
27+
placeholder="Search over 1,000,000 recipes..."
28+
/>
29+
<button class="btn search__btn">
30+
<svg class="search__icon">
31+
<use href="src/img/icons.svg#icon-search"></use>
32+
</svg>
33+
<span>Search</span>
34+
</button>
35+
</form>
36+
37+
<nav class="nav">
38+
<ul class="nav__list">
39+
<li class="nav__item">
40+
<button class="nav__btn nav__btn--add-recipe">
41+
<svg class="nav__icon">
42+
<use href="src/img/icons.svg#icon-edit"></use>
43+
</svg>
44+
<span>Add recipe</span>
45+
</button>
46+
</li>
47+
<li class="nav__item">
48+
<button class="nav__btn nav__btn--bookmarks">
49+
<svg class="nav__icon">
50+
<use href="src/img/icons.svg#icon-bookmark"></use>
51+
</svg>
52+
<span>Bookmarks</span>
53+
</button>
54+
<div class="bookmarks">
55+
<ul class="bookmarks__list">
56+
<div class="message">
57+
<div>
58+
<svg>
59+
<use href="src/img/icons.svg#icon-smile"></use>
60+
</svg>
61+
</div>
62+
<p>
63+
No bookmarks yet. Find a nice recipe and bookmark it :)
64+
</p>
65+
</div>
66+
67+
<!-- <li class="preview">
68+
<a class="preview__link" href="#23456">
69+
<figure class="preview__fig">
70+
<img src="src/img/test-1.jpg" alt="Test" />
71+
</figure>
72+
<div class="preview__data">
73+
<h4 class="preview__name">
74+
Pasta with Tomato Cream ...
75+
</h4>
76+
<p class="preview__author">The Pioneer Woman</p>
77+
</div>
78+
</a>
79+
</li> -->
80+
</ul>
81+
</div>
82+
</li>
83+
</ul>
84+
</nav>
85+
</header>
86+
87+
<div class="search-results">
88+
<ul class="results">
89+
<!--
90+
<li class="preview">
91+
<a class="preview__link preview__link--active" href="#23456">
92+
<figure class="preview__fig">
93+
<img src="src/img/test-1.jpg" alt="Test" />
94+
</figure>
95+
<div class="preview__data">
96+
<h4 class="preview__title">Pasta with Tomato Cream ...</h4>
97+
<p class="preview__publisher">The Pioneer Woman</p>
98+
<div class="preview__user-generated">
99+
<svg>
100+
<use href="src/img/icons.svg#icon-user"></use>
101+
</svg>
102+
</div>
103+
</div>
104+
</a>
105+
</li>
106+
-->
107+
</ul>
108+
109+
<div class="pagination">
110+
<!-- <button class="btn--inline pagination__btn--prev">
111+
<svg class="search__icon">
112+
<use href="src/img/icons.svg#icon-arrow-left"></use>
113+
</svg>
114+
<span>Page 1</span>
115+
</button>
116+
<button class="btn--inline pagination__btn--next">
117+
<span>Page 3</span>
118+
<svg class="search__icon">
119+
<use href="src/img/icons.svg#icon-arrow-right"></use>
120+
</svg>
121+
</button> -->
122+
</div>
123+
124+
<p class="copyright">
125+
&copy; Project by
126+
<a
127+
class="twitter-link"
128+
target="_blank"
129+
href="https://github.com/abhideepghosh"
130+
>Abhideep Ghosh</a
131+
>. This Website Uses JavaScript.
132+
</p>
133+
</div>
134+
135+
<div class="recipe">
136+
<div class="message">
137+
<div>
138+
<svg>
139+
<use href="src/img/icons.svg#icon-smile"></use>
140+
</svg>
141+
</div>
142+
<p>Start by searching for a recipe or an ingredient. Have fun!</p>
143+
</div>
144+
145+
<!-- <div class="spinner">
146+
<svg>
147+
<use href="src/img/icons.svg#icon-loader"></use>
148+
</svg>
149+
</div> -->
150+
151+
<!-- <div class="error">
152+
<div>
153+
<svg>
154+
<use href="src/img/icons.svg#icon-alert-triangle"></use>
155+
</svg>
156+
</div>
157+
<p>No recipes found for your query. Please try again!</p>
158+
</div> -->
159+
160+
<!--
161+
<figure class="recipe__fig">
162+
<img src="src/img/test-1.jpg" alt="Tomato" class="recipe__img" />
163+
<h1 class="recipe__title">
164+
<span>Pasta with tomato cream sauce</span>
165+
</h1>
166+
</figure>
167+
168+
<div class="recipe__details">
169+
<div class="recipe__info">
170+
<svg class="recipe__info-icon">
171+
<use href="src/img/icons.svg#icon-clock"></use>
172+
</svg>
173+
<span class="recipe__info-data recipe__info-data--minutes">45</span>
174+
<span class="recipe__info-text">minutes</span>
175+
</div>
176+
<div class="recipe__info">
177+
<svg class="recipe__info-icon">
178+
<use href="src/img/icons.svg#icon-users"></use>
179+
</svg>
180+
<span class="recipe__info-data recipe__info-data--people">4</span>
181+
<span class="recipe__info-text">servings</span>
182+
183+
<div class="recipe__info-buttons">
184+
<button class="btn--tiny btn--increase-servings">
185+
<svg>
186+
<use href="src/img/icons.svg#icon-minus-circle"></use>
187+
</svg>
188+
</button>
189+
<button class="btn--tiny btn--increase-servings">
190+
<svg>
191+
<use href="src/img/icons.svg#icon-plus-circle"></use>
192+
</svg>
193+
</button>
194+
</div>
195+
</div>
196+
197+
<div class="recipe__user-generated">
198+
<svg>
199+
<use href="src/img/icons.svg#icon-user"></use>
200+
</svg>
201+
</div>
202+
<button class="btn--round">
203+
<svg class="">
204+
<use href="src/img/icons.svg#icon-bookmark-fill"></use>
205+
</svg>
206+
</button>
207+
</div>
208+
209+
<div class="recipe__ingredients">
210+
<h2 class="heading--2">Recipe ingredients</h2>
211+
<ul class="recipe__ingredient-list">
212+
<li class="recipe__ingredient">
213+
<svg class="recipe__icon">
214+
<use href="src/img/icons.svg#icon-check"></use>
215+
</svg>
216+
<div class="recipe__quantity">1000</div>
217+
<div class="recipe__description">
218+
<span class="recipe__unit">g</span>
219+
pasta
220+
</div>
221+
</li>
222+
223+
<li class="recipe__ingredient">
224+
<svg class="recipe__icon">
225+
<use href="src/img/icons.svg#icon-check"></use>
226+
</svg>
227+
<div class="recipe__quantity">0.5</div>
228+
<div class="recipe__description">
229+
<span class="recipe__unit">cup</span>
230+
ricotta cheese
231+
</div>
232+
</li>
233+
</ul>
234+
</div>
235+
236+
<div class="recipe__directions">
237+
<h2 class="heading--2">How to cook it</h2>
238+
<p class="recipe__directions-text">
239+
This recipe was carefully designed and tested by
240+
<span class="recipe__publisher">The Pioneer Woman</span>. Please check out
241+
directions at their website.
242+
</p>
243+
<a
244+
class="btn--small recipe__btn"
245+
href="http://thepioneerwoman.com/cooking/pasta-with-tomato-cream-sauce/"
246+
target="_blank"
247+
>
248+
<span>Directions</span>
249+
<svg class="search__icon">
250+
<use href="src/img/icons.svg#icon-arrow-right"></use>
251+
</svg>
252+
</a>
253+
</div>
254+
-->
255+
</div>
256+
</div>
257+
258+
<div class="overlay hidden"></div>
259+
<div class="add-recipe-window hidden">
260+
<button class="btn--close-modal">&times;</button>
261+
<form class="upload">
262+
<div class="upload__column">
263+
<h3 class="upload__heading">Recipe data</h3>
264+
<label>Title</label>
265+
<input value="TEST23" required name="title" type="text" />
266+
<label>URL</label>
267+
<input value="TEST23" required name="sourceUrl" type="text" />
268+
<label>Image URL</label>
269+
<input value="TEST23" required name="image" type="text" />
270+
<label>Publisher</label>
271+
<input value="TEST23" required name="publisher" type="text" />
272+
<label>Prep time</label>
273+
<input value="23" required name="cookingTime" type="number" />
274+
<label>Servings</label>
275+
<input value="23" required name="servings" type="number" />
276+
</div>
277+
278+
<div class="upload__column">
279+
<h3 class="upload__heading">Ingredients</h3>
280+
<label>Ingredient 1</label>
281+
<input
282+
value="0.5,kg,Rice"
283+
type="text"
284+
required
285+
name="ingredient-1"
286+
placeholder="Format: 'Quantity,Unit,Description'"
287+
/>
288+
<label>Ingredient 2</label>
289+
<input
290+
value="1,,Avocado"
291+
type="text"
292+
name="ingredient-2"
293+
placeholder="Format: 'Quantity,Unit,Description'"
294+
/>
295+
<label>Ingredient 3</label>
296+
<input
297+
value=",,salt"
298+
type="text"
299+
name="ingredient-3"
300+
placeholder="Format: 'Quantity,Unit,Description'"
301+
/>
302+
<label>Ingredient 4</label>
303+
<input
304+
type="text"
305+
name="ingredient-4"
306+
placeholder="Format: 'Quantity,Unit,Description'"
307+
/>
308+
<label>Ingredient 5</label>
309+
<input
310+
type="text"
311+
name="ingredient-5"
312+
placeholder="Format: 'Quantity,Unit,Description'"
313+
/>
314+
<label>Ingredient 6</label>
315+
<input
316+
type="text"
317+
name="ingredient-6"
318+
placeholder="Format: 'Quantity,Unit,Description'"
319+
/>
320+
</div>
321+
322+
<button class="btn upload__btn">
323+
<svg>
324+
<use href="src/img/icons.svg#icon-upload-cloud"></use>
325+
</svg>
326+
<span>Upload</span>
327+
</button>
328+
</form>
329+
</div>
330+
</body>
331+
</html>

0 commit comments

Comments
 (0)