Skip to content
This repository was archived by the owner on Oct 1, 2025. It is now read-only.

Commit d2ac2ab

Browse files
ralvarezdevralvarezdev
committed
feat: Completed Work in Forkify App First Section
* Added package.json for NPM
1 parent 7ce0f5b commit d2ac2ab

29 files changed

+5435
-333
lines changed

‎.gitignore‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
# ignore ALL files in ANY directory named node_modules
2-
node_modules/
2+
node_modules/
3+
.parcel-cache

‎10-forkify/forkify-architecture-recipe-loading.png‎

562 KB
Loading

‎10-forkify/forkify-flowchart-part-1.png‎

294 KB
Loading

‎10-forkify/forkify-flowchart-part-2.png‎

584 KB
Loading

‎10-forkify/forkify-flowchart-part-3.png‎

718 KB
Loading

‎10-forkify/index.html‎

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

0 commit comments

Comments
 (0)