script3.js

const catecont = document.querySelector('.categories');
const itemscont = document.querySelector('.items');

async function fetching() {
      const [categoryres, itemres] = await Promise.all([
    fetch("http://43.205.110.71:8000/categories"),
    fetch("http://43.205.110.71:8000/items")
  ]);
    const categories = await categoryres.json() ; 
    const items = await itemres.json();

   function showitems(items) {
    itemscont.innerHTML = "";
    items.forEach((item) =>{
       const itemcont = document.createElement("div");
       itemcont.innerHTML = 
        
       `<img src="https://picsum.photos/seed/${item.id}/200/200">
       <h3>${item.name}</h3>
       <h4>price: ${item.price}</h4>`;
    
     itemcont.className = "item";
     itemscont.append(itemcont);
     console.log("hello");
    });
     
   }

    showitems(items);


    categories.forEach (category => {
        const btn1 = document.createElement("button");
        btn1.innerText = category.category ;
        btn1.className = "btnclass";
        catecont.append(btn1);

        const itemcate = items.filter(item => item.category === category.category);

        btn1.onclick = () => {
         showitems(itemcate);
        };
    })

    const tab = document.getElementById("tab");
const searchbut = document.getElementById("searchbut");

searchbut.onclick = () => {
    const itemcate = items.filter(item => item.category === tab.value);
     showitems(itemcate);
     console.log(tab.value);
}

     const tab2 = document.getElementById("tab2");
const searchbut2 = document.getElementById("searchbut2");

searchbut2.onclick = () => {
     const itemtag = items.filter(item => item.tags.includes(tab2.value));
     showitems(itemtag);
     console.log(tab2.value);
}

}

fetching();