cardTemplate.html

<!-- This is a template for you to reference when making your cards.
     You won't need to access this file from your code, simply recreate
     this markup with the JavaScript from inside the RecipeCard.js set Data() function
     and fill it in with the appropriate info. -->

<!-- With a Rating -->
<article>
  <img src="https://link-to-article.com/recipe-thumbnail.jpg" alt="Recipe Title">
  <p class="title">
    <a href="https://link-to-article.com">Title</a>
  </p>
  <p class="organization">The Chef's Organization</p>
  <div class="rating">
    <!-- Average Review out of 5 -->
    <span>5</span>
    <!-- Corresponding image to avg review score -->
    <img src="/assets/images/icons/5-star.svg" alt="5 stars">
    <!-- Total number of reviews -->
    <span>(500)</span>
  </div>
  <time>50 min</time>
  <p class="ingredients">
    Comma, Separated, List, of, Ingredients
  </p>
</article>

<!-- Without a Rating -->
<article>
  <img src="https://link-to-article.com/recipe-thumbnail.jpg" alt="Recipe Title">
  <p class="title">
    <a href="https://link-to-article.com">Title</a>
  </p>
  <p class="organization">The Chef's Organization</p>
  <div class="rating">
    <span>No Reviews</span>
  </div>
  <time>50 min</time>
  <p class="ingredients">
    Comma, Separated, List, of, Ingredients
  </p>
</article>