cse110-fa22-group29/source/assets/scripts/RecipeCard.js

// RecipeCard.js

class RecipeCard extends HTMLElement {
  // Called once when document.createElement('recipe-card') is called, or
  // the element is written into the DOM directly as <recipe-card>
  constructor() {
    super(); // Inheret everything from HTMLElement

    // EXPOSE - START (All expose numbers start with A)
    // A1. TODO - Attach the shadow DOM to this Web Component (leave the mode open)
    let shadowEl = this.attachShadow({mode:'open'});
    // A2. TODO - Create an <article> element - This will hold our markup once our data is set
    let articleEl = document.createElement('article');
    // A3. TODO - Create a style element - This will hold all of the styles for the Web Component
    let styleEl = document.createElement('style');
    // A4. TODO - Insert all of the styles from cardTemplate.html into the <style> element you just made
    styleEl.textContent = `
      * {
        font-family: sans-serif;
        margin: 0;
        padding: 0;
      }
    
      a {
        text-decoration: none;
      }
    
      a:hover {
        text-decoration: underline;
      }
    
      article {
        align-items: center;
        border: 1px solid rgb(223, 225, 229);
        border-radius: 8px;
        display: grid;
        grid-template-rows: 118px 56px 14px 18px 15px 36px;
        height: auto;
        row-gap: 5px;
        padding: 0 16px 16px 16px;
        width: 178px;
      }
    
      div.rating {
        align-items: center;
        column-gap: 5px;
        display: flex;
      }
    
      div.rating>img {
        height: auto;
        display: inline-block;
        object-fit: scale-down;
        width: 78px;
      }
    
      article>img {
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        height: 118px;
        object-fit: cover;
        margin-left: -16px;
        width: calc(100% + 32px);
      }
    
      p.ingredients {
        height: 32px;
        line-height: 16px;
        padding-top: 4px;
        overflow: hidden;
      }
    
      p.organization {
        color: black !important;
      }
    
      p.title {
        display: -webkit-box;
        font-size: 16px;
        height: 36px;
        line-height: 18px;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    
      p:not(.title),
      span,
      time {
        color: #70757A;
        font-size: 12px;
      }
    `;
    // A5. TODO - Append the <style> and <article> elements to the Shadow DOM
    articleEl.append(styleEl);
    shadowEl.append(articleEl);
    this.shadowEl = shadowEl
  }

  /**
   * Called when the .data property is set on this element.
   *
   * For Example:
   * let recipeCard = document.createElement('recipe-card'); // Calls constructor()
   * recipeCard.data = { foo: 'bar' } // Calls set data({ foo: 'bar' })
   *
   * @param {Object} data - The data to pass into the <recipe-card>, must be of the
   *                        following format:
   *                        {
   *                          "imgSrc": "string",
   *                          "imgAlt": "string",
   *                          "titleLnk": "string",
   *                          "titleTxt": "string",
   *                          "organization": "string",
   *                          "rating": number,
   *                          "numRatings": number,
   *                          "lengthTime": "string",
   *                          "ingredients": "string"
   *                        }
   */
  set data(data) {
    // If nothing was passed in, return
    if (!data) return;

    // A6. TODO - Select the <article> we added to the Shadow DOM in the constructor
    let articleEl = this.shadowEl.querySelector('article');
    // A7. TODO - Set the contents of the <article> with the <article> template given in
    //           cardTemplate.html and the data passed in (You should only have one <article>,
    //           do not nest an <article> inside another <article>). You should use Template
    //           literals (tempalte strings) and element.innerHTML for this.
    
    let img1 = document.createElement('img');
    img1.setAttribute('src',data['imgSrc']);
    img1.setAttribute('alt',data['imgAlt']);

    let pTitle = document.createElement('p');
    let aTitle = document.createElement('a');
    pTitle.setAttribute('class','title');
    aTitle.setAttribute('href', data['titleLnk']);
    aTitle.innerHTML = data['titleTxt'];
    pTitle.append(aTitle)

    let pOrg = document.createElement('p');
    pOrg.setAttribute('class','organization');
    pOrg.innerHTML = data["organization"];

    let div = document.createElement('div')
    div.setAttribute('class', 'rating')
    let span1 = document.createElement('span')
    span1.innerHTML = data["rating"];
    let img2 = document.createElement('img')
    img2.setAttribute('src', './assets/images/icons/'+data['rating']+'-star.svg');
    img2.setAttribute('alt', data['rating'] +' stars');
    let span2 = document.createElement('span')
    span2.innerHTML = '('+data['numRatings']+')';
    div.append(span1);
    div.append(img2);
    div.append(span2);

    let timeEl = document.createElement('time')
    timeEl.innerHTML = data['lengthTime']

    let pIngred = document.createElement('p');
    pIngred.setAttribute('class','ingredients')
    pIngred.innerHTML = data['ingredients'];

    articleEl.append(img1)
    articleEl.append(pTitle)
    articleEl.append(pOrg)
    articleEl.append(div)
    articleEl.append(timeEl)
    articleEl.append(pIngred)

  }
}

// A8. TODO - Define the Class as a customElement so that you can create
//           'recipe-card' elements

customElements.define('recipe-card', RecipeCard);