Skip to content

Commit

Permalink
Recipe loads from results list and is displayed on the UI
Browse files Browse the repository at this point in the history
The API returns inconsistent ingredient measurements. There is no standard format for each item, making splitting the strings into a quantity, unit of measurement, and item name almost impossible.
  • Loading branch information
Mitchell Youngerman authored and Mitchell Youngerman committed May 1, 2020
1 parent 72b2f99 commit 090f3ec
Show file tree
Hide file tree
Showing 8 changed files with 143 additions and 264 deletions.
183 changes: 4 additions & 179 deletions dist/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ <h4 class="likes__name">Pasta with Tomato ...</h4>

<div class="results">
<ul class="results__list">
<div class="resultsPageNumber">
<!--
<li>
<a class="results__link results__link--active" href="#23456">
Expand All @@ -65,118 +66,11 @@ <h4 class="results__name">Pasta with Tomato ...</h4>
</div>
</a>
</li>
<li>
<a class="results__link" href="#76767">
<figure class="results__fig">
<img src="img/test-2.jpg" alt="Test">
</figure>
<div class="results__data">
<h4 class="results__name">Pasta Salad with ...</h4>
<p class="results__author">Spicy Perspective</p>
</div>
</a>
</li>
<li>
<a class="results__link" href="#85354">
<figure class="results__fig">
<img src="img/test-3.jpg" alt="Test">
</figure>
<div class="results__data">
<h4 class="results__name">Homemade Tomato ...</h4>
<p class="results__author">All Recipes</p>
</div>
</a>
</li>
<li>
<a class="results__link" href="#43563">
<figure class="results__fig">
<img src="img/test-4.jpg" alt="Test">
</figure>
<div class="results__data">
<h4 class="results__name">Pasta with Tomato ...</h4>
<p class="results__author">The Pioneer Woman</p>
</div>
</a>
</li>
<li>
<a class="results__link" href="#2256665">
<figure class="results__fig">
<img src="img/test-5.jpg" alt="Test">
</figure>
<div class="results__data">
<h4 class="results__name">Greek Pasta with ...</h4>
<p class="results__author">Chow</p>
</div>
</a>
</li>
<li>
<a class="results__link" href="#7567567">
<figure class="results__fig">
<img src="img/test-9.jpg" alt="Test">
</figure>
<div class="results__data">
<h4 class="results__name">Cherry tomato, kale ...</h4>
<p class="results__author">BBC Good Food</p>
</div>
</a>
</li>
<li>
<a class="results__link" href="#5676577">
<figure class="results__fig">
<img src="img/test-7.jpg" alt="Test">
</figure>
<div class="results__data">
<h4 class="results__name">Pasta with Fresh ...</h4>
<p class="results__author">Chow</p>
</div>
</a>
</li>
<li>
<a class="results__link" href="#98798">
<figure class="results__fig">
<img src="img/test-8.jpg" alt="Test">
</figure>
<div class="results__data">
<h4 class="results__name">Buttery Tomato Pasta ...</h4>
<p class="results__author">Simply Recipes</p>
</div>
</a>
</li>
<li>
<a class="results__link" href="#5464646456">
<figure class="results__fig">
<img src="img/test-10.jpg" alt="Test">
</figure>
<div class="results__data">
<h4 class="results__name">Pesto Pasta Salad ...</h4>
<p class="results__author">Eats Well With Others</p>
</div>
</a>
</li>
<li>
<a class="results__link" href="#345345435">
<figure class="results__fig">
<img src="img/test-6.jpg" alt="Test">
</figure>
<div class="results__data">
<h4 class="results__name">Pasta with Roasted ...</h4>
<p class="results__author">Two Peas and Their Pod</p>
</div>
</a>
</li>
-->
-->
</div>
</ul>

<div class="results__pages">
<!--
<button class="btn-inline results__btn--prev">
<svg class="search__icon">
<use href="img/icons.svg#icon-triangle-left"></use>
Expand All @@ -189,15 +83,12 @@ <h4 class="results__name">Pasta with Roasted ...</h4>
<use href="img/icons.svg#icon-triangle-right"></use>
</svg>
</button>
-->
</div>
</div>



<div class="recipe">

<!--
<figure class="recipe__fig">
<img src="img/test-1.jpg" alt="Tomato" class="recipe__img">
<h1 class="recipe__title">
Expand Down Expand Up @@ -244,72 +135,6 @@ <h1 class="recipe__title">

<div class="recipe__ingredients">
<ul class="recipe__ingredient-list">
<li class="recipe__item">
<svg class="recipe__icon">
<use href="img/icons.svg#icon-check"></use>
</svg>
<div class="recipe__count">1000</div>
<div class="recipe__ingredient">
<span class="recipe__unit">g</span>
pasta
</div>
</li>
<li class="recipe__item">
<svg class="recipe__icon">
<use href="img/icons.svg#icon-check"></use>
</svg>
<div class="recipe__count">1/2</div>
<div class="recipe__ingredient">
<span class="recipe__unit">cup</span>
ricotta cheese
</div>
</li>
<li class="recipe__item">
<svg class="recipe__icon">
<use href="img/icons.svg#icon-check"></use>
</svg>
<div class="recipe__count">1</div>
<div class="recipe__ingredient">
<span class="recipe__unit"></span>
can of tomatoes, whole or crushed
</div>
</li>
<li class="recipe__item">
<svg class="recipe__icon">
<use href="img/icons.svg#icon-check"></use>
</svg>
<div class="recipe__count">1</div>
<div class="recipe__ingredient">
<span class="recipe__unit"></span>
can tuna packed in olive oil
</div>
</li>
<li class="recipe__item">
<svg class="recipe__icon">
<use href="img/icons.svg#icon-check"></use>
</svg>
<div class="recipe__count">1/2</div>
<div class="recipe__ingredient">
<span class="recipe__unit">cup</span>
grated parmesan cheese
</div>
</li>
<li class="recipe__item">
<svg class="recipe__icon">
<use href="img/icons.svg#icon-check"></use>
</svg>
<div class="recipe__count">1/4</div>
<div class="recipe__ingredient">
<span class="recipe__unit">cup</span>
fresh basil, chopped or torn
</div>
</li>
</ul>

<button class="btn-small recipe__btn">
Expand All @@ -334,7 +159,7 @@ <h2 class="heading-2">How to cook it</h2>

</a>
</div>
-->

</div>


Expand Down
Loading

0 comments on commit 090f3ec

Please sign in to comment.