WD

<!DOCTYPE html>

<html>

<head>
<script>

    popuni=(podaci)=>{

        for(let i=0;i<podaci.length;i++)
        {
            //dodavanje reda u tabelu
            let red=document.createElement("tr");
            document.getElementById("podaciTabela").appendChild(red);
            //dodavanje celije sa ID
            let IDproizvoda=document.createElement("td");
            red.appendChild(IDproizvoda);
            IDproizvoda.innerHTML=podaci[i].proizvodID;
            //dodavanje celije sa nazivom
            let naziv=document.createElement("td");
            red.appendChild(naziv);
            naziv.innerHTML=podaci[i].naziv;
            //dodavanje celije sa cijenom
            let cijenaPoKvadratu=document.createElement("td");
            red.appendChild(cijenaPoKvadratu);
            cijenaPoKvadratu.innerHTML=podaci[i].cijenaPoKvadratu;
            //dodavanje celije sa slikom
            let slikaUrl=document.createElement("img");
            slikaUrl.setAttribute("src",podaci[i].slikaUrl);
            slikaUrl.setAttribute("width","200");
            slikaUrl.setAttribute("height","150");
            red.appendChild(slikaUrl);
            //dodavanje celije sa brojem like-ova
            let likeCounter=document.createElement("td");
            red.appendChild(likeCounter);
            likeCounter.setAttribute("ID","like"+podaci[i].proizvodID);
            likeCounter.innerHTML=podaci[i].likeCounter;
            //dodavanje celije sa dugmetom za lajkanje
            let likeButton=document.createElement("button");
            likeButton.setAttribute("onclick","lajkaj("+podaci[i].proizvodID+")");
            likeButton.innerHTML="Like";
            red.appendChild(likeButton);
        }

    }
    /* OD varupe*/
    /*
        izvrsiSumu=(podaci)=>{
        let suma=0;
        for(let i=0;i<podaci.length;i++)
        {
            suma+=podaci[i].cijenaPoKvadratu;
        }
        alert(suma/podaci.length);
        }
    */

    /* MOJE */
    izvrsiSumu=(podaci)=>{
    let suma=0;
    for(let i=0;i<podaci.length;i++)
    {
        suma+=podaci[i].cijenaPoKvadratu;
    }
    document.getElementById("suma").innerHTML=suma;
    }

    izvrsiSumu2=(podaci)=>{
    let kol=0;
    for(let i=0;i<podaci.length;i++)
    {
        kol++;
    }
    document.getElementById("suma2").innerHTML=kol;
    }

    izvrsiSumu3=(podaci)=>{
    let suma=0;
    let kol=0;
    for(let i=0;i<podaci.length;i++)
    {
        suma+=podaci[i].cijenaPoKvadratu;
        kol++;
    }
    document.getElementById("suma3").innerHTML=suma/kol;
    }
    /*------------------------------------------------*/
    izvrsiSumu4=(podaci)=>{
    let suma=0;
    let kol=0;
    for(let i=0;i<podaci.length;i++)
    {
        suma+=podaci[i].cijenaPoKvadratu;
        kol++;
    }
    document.getElementById("suma4-1").innerHTML=suma;
    document.getElementById("suma4-2").innerHTML=kol;
    document.getElementById("suma4-3").innerHTML=suma/kol;
    }


podaci=()=>{
fetch('http://onlineshop.wrd.app.fit.ba/api/ispit20190914/Narudzba/GetProizvodiAll')
  .then(
    (response) =>{
      if (response.status !== 200) {
        console.log('Geska: ' +
          response.status);
        return;
      }
      response.json().then((data)=> {
        console.log(data);
        popuni(data);
        izvrsiSumu(data);
        izvrsiSumu2(data);
        izvrsiSumu3(data);
        izvrsiSumu4(data);
      });
    }
  )
  .catch((err) =>{
    console.log('Fetch Greska :-S', err);
  });
    }
lajkaj=(IDproizvodaZaLike)=>{
    let adresa ='http://onlineshop.wrd.app.fit.ba/api/ispit20190914/Narudzba/Like?proizvodId='+IDproizvodaZaLike;
    fetch(adresa)
        .then(
            (response) =>{
                if (response.status !== 200) {
                    console.log('Geska: ' +
                        response.status);
                    return;
                }
                response.json().then((data)=> {
                    console.log(data);
                    document.getElementById("like"+IDproizvodaZaLike).innerHTML=data.likeCounter;
                });
            }
        )
        .catch((err) =>{
            console.log('Fetch Greska :-S', err);
        });
}

</script>

</head>

<body>

<button onclick="podaci()">Primi</button>


<table style="width:100%" id="podaciTabela" border="1px">
  <tr>
    <th>ID Proizvoda</th>
    <th>Naziv</th>
        <th>Cijena</th>
        <th>slika</th>
        <th>Broj like</th>
        <th>Lajkanje</th>
  </tr>

</table>

    <h3>Suma:<p id="suma">0</p></h3>
    <h3>Kolicina:<p id="suma2">0</p></h3>
    <h3>Konacno:<p id="suma3">0</p></h3> <!-- Cijena kroz proizvod  -->
    <h1>Kombinovano:
        <p id="suma4-1">0</p>
        <p id="suma4-2">0</p>
        <p id="suma4-3">0</p>
    </h1>

</body>

</html>

//Amir---
<script>

izlistajPodatke = (podaci) => {
    for(let i = 0; i < podaci.length; i++) {

        // Ucitavanje podataka i ubacivanje u tabelu
        let red = document.createElement("tr");
        document.getElementById("tabelaPodataka").appendChild(red);

        let idProizvod = document.createElement("td");
        red.appendChild(idProizvod);
        idProizvod.innerHTML = podaci[i].proizvodID;

        let nazivProizvod = document.createElement("td");
        red.appendChild(nazivProizvod);
        nazivProizvod.innerHTML = podaci[i].naziv;

        let detalji = document.createElement("button");
        red.appendChild(detalji);
        detalji.id = podaci[i].proizvodID; // Postavi ID svakog button-a kao sto je i ID proizvoda
        detalji.innerHTML = "Detalji"; // Postavi tekst u button-u

        // Funkcija koja se poziva samo kada kliknemo na Detalji button
        detalji.onclick = function() {

            // Pronadji sve elemente u HTML-u
            let novaSlika = document.getElementById("detaljiSlika");
            let nazivTekst = document.getElementById("nazivProizvoda");
            let cijenaTekst = document.getElementById("cijenaProizvoda");
            let razlikaTekst = document.getElementById("razlikaProizvoda");

            // Postavi sve elemente za odredjeni proizvod
            novaSlika.setAttribute("src", podaci[i].slikaUrl);
            novaSlika.setAttribute("width", "400px");
            novaSlika.setAttribute("height", "300px");

            nazivTekst.innerHTML = "Naziv: " + podaci[i].naziv;

            cijenaTekst.innerHTML = "Cijena po kvadratu: " + podaci[i].cijenaPoKvadratu + "KM";

            let razlikaDugme = document.getElementById("razlikaDugme"); // Pronadji dugme sa ID "razlikaDugme"
            // Funkcija koja se poziva samo kada kliknemo na dugme pod ID "razlikaDugme"
            razlikaDugme.onclick = function() {
                let razlika = vratiNajvecuCijenu(podaci) - podaci[i].cijenaPoKvadratu; // Izracun razlike
                // (estetika koda) razlikaString je tu samo da citav ispis stavimo u jedan string, pa na innerHTML kazemo da ispise ovaj string, ovako urednije izgleda
                let razlikaString = "Razlika: " + razlika + "KM " + "(" + vratiNajvecuCijenu(podaci) + "KM" + " - " + podaci[i].cijenaPoKvadratu + "KM" + ")";
                razlikaTekst.innerHTML = razlikaString;
            }
        }
    }
}

ucitajPodatke = () => {
    let adresaPodataka = "http://onlineshop.wrd.app.fit.ba/api/ispit20190914/Narudzba/GetProizvodiAll";
    fetch(adresaPodataka).then(
        (response) => {
            response.json().then((data) => {
                izlistajPodatke(data);
            });
        });
}

// Funckija koja sluzi za da pronadje najskuplji proizvod
vratiNajvecuCijenu = (podaci) => {
    // Klasicni C++ nacin pronalazenja najveceg elementa
    let najvecaCijena = 0;
    for(let i = 0; i < podaci.length; i++) {
        if(podaci[i].cijenaPoKvadratu > najvecaCijena) {
            najvecaCijena = podaci[i].cijenaPoKvadratu;
        }
    }
    return najvecaCijena;
}

</script>