QOA - CONDITIONAL RENDERING

[keanacobarde]

User Story

QOA - QUALITY OF APPLICATION I, as a highly organized and visual user, should have an application that will change, dynamically, depending on the data. If there are no categories available, it should state that there are none available. The totals should depict that there is nothing to total up. IF I go over the expenditure for a specific category, or I reach an expense amount that is negative - there should be some sort of marker for that. Perhaps, making 'Amount Left to Spend' red.

Acceptance Criteria

IT SHOULDN'T LOOK LIKE THIS

• You should have some sort of 'No categories to display...try adding some' message that appears. HAVE THIS PERTAIN TO THE MONTH.
• Whenever an expense amount is added that is TOO much, the category cards should render a negative number.

Dependencies

• All of the READ segments of MVP should be done as well as the API calls before this can be implemented fully.

Dev Notes

• You'll have to use some sort of bool/ternary statement both in the blocks which display the total amount, as seen within 'Acceptance Criteria' as well as within the 'Criteria' amount.

SAMPLE FROM 'ALMOST AMAZON' - VANILLA JS, but the concept is similar. You're checking to see the length of the array returned from the API call and basing whether or not you're rendering off of that.

const showBooks = (array) => {
  clearDom();

  const btnString = '<button class="btn btn-success btn-lg mb-4" id="add-book-btn">Add A Book</button>';
  renderToDOM('#add-button', btnString);

  let domString = '';
  if (array.length <= 0) {
    domString = '<h1> No Books </h1>';
  } else {
    array.forEach((item) => {
      domString += `
        <div class="card">
          <img class="card-img-top" src=${item.image} alt=${item.title} style="height: 400px;">
          <div class="card-body" style="height: auto;">
            <h5 class="card-title">${item.title}</h5>
              <p class="card-text bold">${item.sale ? `<span class="badge badge-info sale-badge"><i class="fa fa-bell" aria-hidden="true"></i> Sale</span> $${item.price}` : `$${item.price}`}</p>
              <hr>
              <div style="display:flex;">
              <i class="btn btn-success" id="view-book-btn--${item.firebaseKey}"> View Book </i>
              <i id="edit-book-btn--${item.firebaseKey}" class="btn btn-info"> Edit Book </i>
              <i id="delete-book-btn--${item.firebaseKey}" class="btn btn-danger"> Delete Book </i>
              </div>
          </div>
        </div>`;
    });
  }
  renderToDOM('#store', domString);
};

[keanacobarde]

CLOSED PER - #42