JSFiddle - React, Tailwind, and code Playground

by nerdycap007

HTML

<button onclick="filterArray('cat1')">
Cat 1
</button>
<div id="app">

</div>

CSS

.card {
  background: lightgray;
  margin: 10px;
}

JavaScript

var cards = [{
    name: "NP-1",
    need: "masks",
    category: "cat1",
    quantity: 50,
    websiteLink: "abc.com",
    description: "This is nonprofit"
  },
  {
    name: "NP-1",
    need: "masks",
    category: "cat1",
    quantity: 50,
    websiteLink: "abc.com",
    description: "This is nonprofit"
  },
  {
    name: "NP-1",
    need: "masks",
    category: "cat2",
    quantity: 50,
    websiteLink: "abc.com",
    description: "This is nonprofit"
  },
  {
    name: "NP-1",
    need: "masks",
    category: "cat2",
    quantity: 50,
    websiteLink: "abc.com",
    description: "This is nonprofit"
  },
  {
    name: "NP-1",
    need: "masks",
    category: "cat2",
    quantity: 50,
    websiteLink: "abc.com",
    description: "This is nonprofit"
  }
]

let addCard = function(card) {
  document.getElementById("app").innerHTML += `
  	<div class="card" style="width: 18rem;">
        <img class="card-img-top" src="sampleImg.png" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Demo nonprofit</h5>
          ${card.category}
          <p class="card-text">${card.description}</p>
        </div>
        <ul class="list-group list-group-flush">
            <hr>
          <li class="list-group-item">Need: ${card.need}</li>
          <li class="list-group-item">Quantity: ${card.quantity}</li>
        </ul>
        <div class="card-body">
          <a href="${card.websiteLink}" class="card-link">Website link</a>
          <a href="mailto:[email protected]" class="card-link">Email us</a>
        </div>
      </div>
      <br>
  `;
}

let filterArray = function(category) {

	// Filtering the array on the basis of card.category === category
  let filteredArray = cards.filter((card) => {
    return card.category === category
  })
  
  // Emptying the #app container
  document.getElementById("app").innerHTML = ""
  
  // Updating the container with the filtered Array
  updateContainer(filteredArray);
  
}

let...