script.js

//AJAX ->async js and xml
//https://dummyjson.com/products

// 0-4
// 1- create request
// 2- define callback function
// 3- open request
// 4- send 
//====================
//readyState
//0- unset
//1- opened
//2- header recieved
//3- loading
//4-done
let main=document.querySelector("main")
let req=new XMLHttpRequest();
req.onload=function(){
    if(req.readyState==4){
        if(req.status==200){
            console.log("data recieved..");
            let data=JSON.parse(req.responseText);
            let pro=data.products;
            pro.map(function(ele){

                main.innerHTML+=
                `
                <div class="product-card">
                <h2>${ele.title}</h2>
                <img src=${ele.thumbnail} alt="">
                <p>Price:${ele.price}</p>
                </div>
                `  
            })
          

        }
        else{
            console.log("there is some problem..")
        }
    }
    else {
        console.log("error in request");
    }
}

req.open("GET",`https://dummyjson.com/products`,true);
req.send();

function changeitems(slug){
    console.log("any thing");
    main.innerHTML="";
    req.open("GET",`https://dummyjson.com/products/category/${slug}`,true);
    req.send();

}

function search(word){
    main.innerHTML="";
    req.open("GET",`https://dummyjson.com/products/search?q=${word}`,true);
    req.send();

}

let holdinput=document.querySelector(".inputsearch");
holdinput.addEventListener("keypress",()=>{
    search(holdinput.value);
})

function categoriesSite(){

    let newreq=new XMLHttpRequest();
    newreq.onload=function(){
        if(req.readyState==4 && req.status==200){
            let categories=JSON.parse(newreq.responseText);
            console.log(categories);
            let divv=document.querySelector(".categories");

            categories.map(function(ele){
            divv.innerHTML+=
            `
                <span class="category" onclick="changeitems('${ele.slug}')"> ${ele.name}</span>
            `
           })
        }

    }
    newreq.open("GET","https://dummyjson.com/products/categories",true);
    newreq.send();
}

categoriesSite();