Gá-Bor

In this example below you will see how to do a Gá-Bor with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by gabor19931014, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright gabor19931014 ©

Technologies

  • HTML
  • CSS
  • JavaScript
    <head>
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link href="https://fonts.googleapis.com/css?family=Acme" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Dekko" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Bree+Serif" rel="stylesheet">
  
  <link rel="icon" href="https://cdn1.iconfinder.com/data/icons/hotel-restaurant/512/9-512.png">
  
</head>

<body onload = "createWineList()">
  <div id="wine-image"></div>
  <div id="upper-header"><h1 id="main-title">Gá-Bor napló</h1></div>
  
  <a href="http://www.bortarsasag.hu/hu/" target="_blank">
    <div class="left-tab">BORTÁRSASÁG</div>
</a>
</body>

/*Downloaded from https://www.codeseek.co/gabor19931014/gandxe1-bor-XawLXN */
    .wine{
  margin-left: 70px;
  margin-right:70px;
  min-height:450px;
  background-color: khaki;
  margin-bottom: 30px;
  border-radius:15px;
  opacity:0.96;
  
}

.wineName{
  background-color: Peru;
  height:50px;
  font-size:24px;
  padding-top:8px;
  padding-left:10px;
  font-family: 'Bree Serif';
  border-radius:  15px 15px 0 0;
  
}

.wineImage{
  margin-top:25px;
  margin-left: 15px;
  height:340px;
  width:150px;
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
  background-color:khaki;
  border-radius:15px;
  box-shadow: 5px 5px 30px gray;
  float:left;
  
}

.wineDatasDiv{
  position:absolute;
  padding-top:20px;
  margin-top:10px;
  background-color:transparent;
  left:200px;
  right:80px;
  text-align:justify;
  
}

.wineDatas{
  margin-left:60px;
  font-size:20px;
  margin-top:-5px;
  max-width: 90%;
  font-family: 'Bree Serif';
}

.ratings{
  float:right;
  margin-right:4px;
  color:yellow;
  font-size:20px;
}

.left-tab{
position: fixed;
top: 300px;
left: 0;
height:50px;
width:150px;
background-color: red;
text-align: center;
transform: rotate(90deg) translateY(61px);
font-family: 'Acme';
font-size:20px;
color:Khaki;
background-color: MidnightBlue;
border-radius: 10px 10px 0 0;
}

#wine-image{
background-image:url("http://sokjobor.hu/wp-content/uploads/2015/04/best-wine-background1.jpg");
background-size:cover;
height:200px;  
width:300px; 
float:left;
position:absolute;
top:20px;
box-shadow: inset -50px 0px 50px Peru;
  opacity:0.9;
}

#upper-header{
height:200px;
background-color:Peru;
float:left;
position:absolute;
top:20px;
left:300px;
right:0px;
  opacity:0.9;
}

body{
padding-top:250px;
background-image: url("https://cork-shop.hu/web_pic/bg.jpg");
background-size:cover;
background-attachment: fixed;
font-family:'Bree Serif';
}

h1{
font-family:'Bree Serif';
}

#main-title{
margin-top:30px;
margin-left:20px;
font-size:70px;
font-style:italic;
  font-family: 'Acme';
}


/*Downloaded from https://www.codeseek.co/gabor19931014/gandxe1-bor-XawLXN */
    //Borok halmaza
var wines = [

  //INNENTŐL MÓDOSÍTS, ADJ HOZZÁ BOROKAT************************************************************************************************

  //Gere Tamás Villányi Olaszrizling 2015
  gereOlasz2015 = {
    "Megnevezés": "Gere Tamás - Villányi Olaszrizling 2015",
    "Évjárat": "2015",
    "Típus": "Száraz fehérbor",
    "Borvidék": "Villány",
    "Palackozta": "Gere Tamás",
    "Vélemény": "Könnyű, nyári bor, kissé savas, kellemesen gyümölcsös, kissé a keserű mandula ízére emlékeztet", //nem kell ENTER
    "Egyéb vélemény": "Ajánlott",
    "Értékelés": "7.5", //tizedespont kell
    "Kép": "http://www.borkereskedes.hu/uploads_product_pictures/8688_small.png" //képcím URL
  },

  //Koch Szekszárdi Merlot 2015
  kochMerlot2015 = {
    "Megnevezés": "Koch - Szekszárdi Merlot 2015",
    "Évjárat": "2015",
    "Típus": "Száraz vörösbor",
    "Borvidék": "Szekszárd",
    "Palackozta": "Koch",
    "Vélemény": "Nem túl testes, fiatalos bor, színe világos, igen áttetsző, kellemes gyömölcsös illat",
    "Egyéb vélemény": "Vöröshúsokhoz ajánlott",
    "Értékelés": "8.0",
    "Kép": "http://www.kochboraszat.hu/img/p/12.png"
  },

  //Frittmann Irsai Olivér 2015
  frittmannIrsai2015 = {
    "Megnevezés": "Frittmann - Irsai Olivér 2015",
    "Évjárat": "2015",
    "Típus": "Száraz fehérbor",
    "Borvidék": "Villány",
    "Palackozta": "Frittmann",
    "Vélemény": "Nem túl testes, fiatalos bor, színe világos, igen áttetsző, kellemes gyömölcsös illat",
    "Egyéb vélemény": "Fehér húsokhoz ajánlott",
    "Értékelés": "8.2",
    "Kép": "http://frittmann.hu/wp-content/uploads/2016/08/irsai-oliver.png"
  },

  frittmannKekfrankos2015 = {
    "Megnevezés": "Frittmann - Kékfrankos Rosé 2015",
    "Évjárat": "2015",
    "Típus": "Száraz rosébor",
    "Borvidék": "Kunság",
    "Palackozta": "Frittmann",
    "Vélemény": "Halvány rózsaszín szín, epres kissé cseresznyés illat. Csalogató illat, de kiábrándító íz, még rosszabb utóíz.", //nem kell ENTER
    "Egyéb vélemény": "Nem ajánlott",
    "Értékelés": "6.5", //tizedespont kell
    "Kép": "http://frittmann.hu/wp-content/uploads/2016/08/kekfrankos-rose.png" //képcím URL
  },

  laposaIllatos2015 = {
    "Megnevezés": "Laposa - Illatos 2015",
    "Évjárat": "2015",
    "Típus": "Száraz fehérbor",
    "Borvidék": "Badacsony",
    "Palackozta": "Laposa",
    "Vélemény": "Illatos szőlőfajták házasításából készült bor (Ottonel-Muskotály). Karakteres, de nem hivalkodó, főleg hársvirág, bodza, méz; tavaszi vadvirágok aromái jelennek meg benne. Zamatos, élénk ízvilág.",
    "Egyéb vélemény": "Ajánlott",
    "Értékelés": "8.7",
    "Kép": "http://www.borhazmagyarorszag.hu/fotky1612/fotos/_vyr_8laposa_illatos.png"
  },

  ruppertportugieser2015 = {
    "Megnevezés": "Ruppert - Portugieser 2015",
    "Évjárat": "2015",
    "Típus": "Száraz vörösbor",
    "Borvidék": "Villány",
    "Palackozta": "Ruppert",
    "Vélemény": "Lila árny, majd buja báj, s mégis tiszta lágy világ. Nagyon szép telt vöröses-lila szín, amit kellemes, szerintem diós illat kísér. Ízre finom, lágy, simogató utóízzel",
    "Egyéb vélemény": "Ajánlott",
    "Értékelés": "8.6",
    "Kép": "https://www.bortarsasag.hu/images/upload/cimkep/ruppert_portugieser_2015_nn.jpg"
  },
  
  kamocsayakoschardonnay2015 = {
    "Megnevezés": "Kamocsay Ákos - Chardonnay 2015",
    "Évjárat": "2015",
    "Típus": "Száraz fehérbor",
    "Borvidék": "Neszmély",
    "Palackozta": "Hilltop",
        "Vélemény": "Gyönyörű sárgás színnel van felvértezve, illata igen gyümölcsös. Tipikus chardonnay ízzel rendelkezik, utóíze mely enyhén édes hamar eltűnik, csak egy utána evett alma juttatja újra eszembe ízvilágát. Kifejezetten ajánlom első randira.",
    "Egyéb vélemény": "Ajánlott",
    "Értékelés": "8.4",
    "Kép": "http://kamocsaypremium.hu/public/files/wines/kamocsay-premium-chardonnay_2.png"
  },

  meszarospalkadarka2014 = {
    "Megnevezés": "Mészáros Pál - Kadarka 2014.",
    "Évjárat": "2014",
    "Típus": "Száraz vörösbor",
    "Borvidék": "Szekszárd",
    "Palackozta": "Mészáros Pál",
        "Vélemény": "Egy vörösborra meg kell érni, ilyen a Kadarka is. Gyümölcsös illat, enyhén savas, könnyen csúszó vörösbor.",
    "Egyéb vélemény": "Ajánlott",
    "Értékelés": "7.7",
    "Kép": "http://www.borhalo.com/products/image_1447671079ZkUNm.png"
  },
  
  bockvillanyiharslevelu2014 = {
    "Megnevezés": "Bock - Villányi Hárslevelű 2014.",
    "Évjárat": "2014",
    "Típus": "Száraz fehérbor",
    "Borvidék": "Villány",
    "Palackozta": "Bock József",
        "Vélemény": "Szép tiszta világosan aranyló bor, jellegzetes fanyar ízzel a hárslevelűek villányi kiválósága.",
    "Egyéb vélemény": "Ajánlott",
    "Értékelés": "7.3",
    "Kép": "http://pince.bock.hu/wp-content/uploads/sites/3/2016/10/H%C3%A1rslvel%C5%B1-20141.png"
  },

kochcabernetsauvignon2015 = {
    "Megnevezés": "Koch - Cabernet Sauvignon 2015.",
    "Évjárat": "2015",
    "Típus": "Száraz vörösbor",
    "Borvidék": "Hajós-Baja",
    "Palackozta": "Koch",
        "Vélemény": "Az illata fantasztikus, kellemes íze van, bár nem az az igazi ütős Sauvignon amitől már az első korty után el kezd zsibbadni a tarkóm.",
    "Egyéb vélemény": "Ajánlott",
    "Értékelés": "8.9",
    "Kép": "http://www.kochboraszat.hu/img/p/18-cuvee-cabernet%20sauvignon-pinot-noir.png"
  },

  //Sauska Villányi Rosé 2016.
  sauskavillanyirose2016 = {
    "Megnevezés": "Sauska Villányi Rosé 2016.",
    "Évjárat": "2016",
    "Típus": "Száraz rosébor",
    "Borvidék": "Villány",
    "Palackozta": "Sauska",
    "Vélemény": "Kicsi volt a palack. egy kartonnal elfogyna egy este Nagyon finom friss decemberi, februárt ezzel kezdeni remek.",
    "Egyéb vélemény": "Ajánlott",
    "Értékelés": "9.1",
    "Kép": "https://www.bortarsasag.hu/images/upload/cimkep/sauska_rose_2015_nn.jpg"
  },

  //Figula Olaszrizling 2016
  figulaolaszrizling2016 = {
    "Megnevezés": "Figula - Olaszrizling 2016",
    "Évjárat": "2016",
    "Típus": "Száraz fehérbor",
    "Borvidék": "Balatonfüred-Csopak",
    "Palackozta": "Figula Mihály",
    "Vélemény": "Nagyon vagány olaszrizling, miközben izlelem kiérzem belőle a rizling szemek selymességét a szőlő levelek bársonyos simogatását, miközben a számban szétfolyik a rizling kiérezhetően a napfény teltsége.", //nem kell ENTER
    "Egyéb vélemény": "Ajánlott",
    "Értékelés": "8.4", //tizedespont kell
    "Kép": "https://www.bortarsasag.hu/images/upload/cimkep/figula_olaszrizling_2015_nn.jpg" //képcím URL
  },
  
  //Günzer Tamás Portugieser 2016
  gunzertamasportugieser = {
    "Megnevezés": "Günzer Tamás Portugieser 2016.",
    "Évjárat": "2016",
    "Típus": "Száraz vörösbor",
    "Borvidék": "Villány",
    "Palackozta": "Günzer Tamás",
    "Vélemény": "Hasonló mint a ruppert, hiszen villányi borvidék. Ízletes testes vörösborm Kellemesen eltonpított.",
    "Egyéb vélemény": "Ajánlott",
    "Értékelés": "8.2",
    "Kép": "http://www.borhalo.com/uploads/gunzer_portugiesergallery1.png"
  },
  
  //Canter Nagy-Smolói Juhfark 2015.
  canternagysomloijuhfark2015 = {
    "Megnevezés": "Canter Nagy-Somlói Juhfark 2015",
    "Évjárat": "2015",
    "Típus": "Száraz fehérbor",
    "Borvidék": "Nagy-Somló",
    "Palackozta": "Canter borház",
    "Vélemény": "Valami isteni! Először iszom juhfarkot de beleszerettem. Gyengécske illattal rendelkezik de az íze lehengerelt. Ajánlani tudom mindenkinek.", //nem kell ENTER
    "Egyéb vélemény": "Ajánlott",
    "Értékelés": "9.3", //tizedespont kell
    "Kép": "http://www.canterborhaz.hu/images/big/canter_0004_juhfark.png" //képcím URL
  },
  
  //Takler Kékfrankos 2015
  taklerkekfrankos2015 = {
    "Megnevezés": "Takler Kékfrankos 2015",
    "Évjárat": "2015",
    "Típus": "Száraz vörösbor",
    "Borvidék": "Szekszárd",
    "Palackozta": "Takler",
    "Vélemény": "A ma este borát egy szerencsés és sikeres választásnak tekinthetem. Színe, teltsége, íze, zamata maximalizmusra tör, és egy különleges megkülönböztetést is kiérdemelt ma este. Számomra ez egy igazán 'kárpitos' bor.",
    "Egyéb vélemény": "Vöröshúsokhoz ajánlott",
    "Értékelés": "8.6",
    "Kép": "http://www.borkereskedes.hu/uploads_product_pictures/9321_small.png"
  },

  //L. Simon Zöldike 2014.
  lsimonzoldike = {
    "Megnevezés": "L. Simon Zöldike (Zöld veltelini) 2016.",
    "Évjárat": "2016",
    "Típus": "Száraz fehérbor",
    "Borvidék": "Etyek-budai",
    "Palackozta": "L.Simon",
    "Vélemény": "Fő különlegessége fakó halvány színe, mely savanykás-gyümölcsös illattal párosul. Íze meg egyszerűen fantasztikus.",
    "Egyéb vélemény": "Könnyű tavaszi-nyári estékhez javasolt",
    "Értékelés": "8.7",
    "Kép": "http://www.velencei.hu/images/zoldike_palack.png"
  },
  
   //Böjti Gergő cuvée 2014.
  bojtigergocuvée2014= {
    "Megnevezés": "Böjti Gergő 14! cuvée 2014.",
    "Évjárat": "2014",
    "Típus": "Száraz vörösbor",
    "Borvidék": "Eger",
    "Palackozta": "Böjti Gergő",
    "Vélemény": "Kellemes vörösbor. Mindnki számára megelepetésként fog hatni, hiszen egy kis pince boráról beszélünk. Gyönyörű telt színnel rendelkezik, szinte alig lehet rajta átnézni. Illata remek, egyáltalán nem savas bor, könnyen csúszik. Kellemesen távozik a szervezetbe.",
    "Egyéb vélemény": "Ajánlott",
    "Értékelés": "9.2",
    "Kép": "https://www.bortarsasag.hu/images/upload/cimkep/bojt_14_2014_nn.jpg"
  },
  
  //Szőllősi Irsai Olivér 2015.
  szollosiirsaioliver = {
    "Megnevezés": "Szőllősi Irsai Olivér 2015",
    "Évjárat": "2015",
    "Típus": "Száraz fehérbor",
    "Borvidék": "Neszmély",
    "Palackozta": "Szőllősi pince",
    "Vélemény": "Érdekes bor. Jellegzetes halvány sárga színnel és gyümölcsös illattal rendelkezik. Íze tetszetős, utóíze sejtelmes, későn távozik.", //nem kell ENTER
    "Egyéb vélemény": "Ajánlott",
    "Értékelés": "8.8", //tizedespont kell
    "Kép": "https://p1.akcdn.net/mid/427183035.szollosi-pinceszet-szollosi-neszmely-irsai-oliver-szaraz-feherbor-11-750-ml.jpg" //képcím URL
  },
  
 //IKON Merlot 2015.
  ikonmerlot = {
    "Megnevezés": "IKON Merlot 2015",
    "Évjárat": "2015",
    "Típus": "Száraz vörösbor",
    "Borvidék": "Dél-Balaton",
    "Palackozta": "IKON pincészet",
    "Vélemény": "Gyönyörű telt színnel, fanyar gyümölcsös illatal rendelkezik, íze is elég fanyar vörös húsokhoz ajánlott, utóíze hamar eltűnik.", //nem kell ENTER
    "Egyéb vélemény": "Ajánlott",
    "Értékelés": "8.7", //tizedespont kell
    "Kép": "http://www.borabor.hu/images/termekek/thumbnails/1427294447-ikon_m_p.jpg" //képcím URL
  },
  
 //Tornai Zenit 2015.
  tornaizenit = {
    "Megnevezés": "Tornai Zenit 2015",
    "Évjárat": "2015",
    "Típus": "Száraz fehérbor",
    "Borvidék": "Nagy-Somló",
    "Palackozta": "Tornai pincészet",
    "Vélemény": "Kissé az olaszrizlingre hasonlít savanykás íze miatt. Gyönyörű enyhe sárgás színe van. ", //nem kell ENTER
    "Egyéb vélemény": "Ajánlott",
    "Értékelés": "7.9", //tizedespont kell
    "Kép": "http://borarum.hu/wp-content/uploads/tornai-zenit-2013.png" //képcím URL
  },
  
 //Simon Királyleányka cuvée 2015.
  simonkiralyleanykacuvee = {
    "Megnevezés": "Simon Királyleányka cuvée 2015",
    "Évjárat": "2015",
    "Típus": "Száraz fehérbor",
    "Borvidék": "Eger",
    "Palackozta": "Simon pincészet",
    "Vélemény": "Elég erősen le kell hűteni, úgy az igazi. Illatában elsősorban a cserszegifűszeres jelenik meg, zamatában azonban a Királyleányka dominál, talán a Zenit is megjelenik, de a cserszegifűszeres elsikkad.", //nem kell ENTER
    "Egyéb vélemény": "Ajánlott",
    "Értékelés": "7.4", //tizedespont kell
    "Kép": "http://img.index.hu/imgfrm/8/0/3/1/BIG_0013808031.jpg" //képcím URL
  },
  
 //Mészáros Pál Pinot Noir 2015.
  meszarospalpinotnoir = {
    "Megnevezés": "Mészáros Pál Pinot Noir 2015",
    "Évjárat": "2015",
    "Típus": "Száraz vörösbor",
    "Borvidék": "Szekszárd",
    "Palackozta": "Mészár Pál pincészet",
    "Vélemény": "Igen különleges bor. A Taninok lágyan köszönnek vissza minden korty végén. Egy hosszú beszélgetéshez kiváló partner.", //nem kell ENTER
    "Egyéb vélemény": "Ajánlott",
    "Értékelés": "9.0", //tizedespont kell
    "Kép": "https://borbolt.hu/uploads/8677.jpg" //képcím URL
  },
  
 //György-Villa Syrah rosé 2016.
  gyorgyvillasyrahrose = {
    "Megnevezés": "György-Villa Syrah rosé 2016.",
    "Évjárat": "2016",
    "Típus": "Száraz rosébor",
    "Borvidék": "Etyek-Buda",
    "Palackozta": "György-Villa pincészet",
    "Vélemény": "Üde színe van, illata kisség fakó. Könnyen lecsúszik, az utóíze azonban kisség fakó. Tisztán és fröccsözve is ideális tikkadt nyári estékre.", //nem kell ENTER
    "Egyéb vélemény": "Ajánlott",
    "Értékelés": "8.2", //tizedespont kell
    "Kép": "https://drinksmarket.cdn4.shoprenter.hu/custom/drinksmarket/image/data/product/B4007104.jpg?lastmod=1499188848.1488357855" //képcím URL
  },
  
 //Dorombor Furmint 2015.
  doromborfurmint = {
    "Megnevezés": "Dorombor Furmint 2015",
    "Évjárat": "2015",
    "Típus": "Száraz fehérbor",
    "Borvidék": "Tokaj",
    "Palackozta": "Dorombor pincészet",
    "Vélemény": "A fehérborok császára a Furmint! Egy igazi különlegesség, mely jó ár-értékarányban van.", //nem kell ENTER
    "Egyéb vélemény": "Ajánlott",
    "Értékelés": "9.3", //tizedespont kell
    "Kép": "https://borbolt.hu/uploads/11228.jpg" //képcím URL
  },
  
 //Bolyki Egri Csillag 2016.
  bolykiegricsillag = {
    "Megnevezés": "Bolyki Egri Csillag 2016",
    "Évjárat": "2016",
    "Típus": "Száraz fehérbor",
    "Borvidék": "Eger",
    "Palackozta": "Bolyki pincészet",
    "Vélemény": "Fiatal múltra tekintő cuvéé bor, mely az Egri Bikavér fehér nagy testvére. Egyik jellegzetes borfajta sem érezhető ki. Egy kellemes, könnyed, üde illat intenutású bort alkottak.", //nem kell ENTER
    "Egyéb vélemény": "Ajánlott",
    "Értékelés": "9.0", //tizedespont kell
    "Kép": "https://www.bortarsasag.hu/images/upload/cimkep/bolyki_egri_csillag_2016_nn.jpg" //képcím URL
  },
  
 //Laposa Friss 2016.
  laposafriss = {
    "Megnevezés": "Laposa Friss 2016",
    "Évjárat": "2016",
    "Típus": "Száraz fehérbor",
    "Borvidék": "Badacsony",
    "Palackozta": "Laposa pincészet",
    "Vélemény": "Egy igazi badacsonyi olaszrizling. Jól behűtve könnyed ízt nyújt kóstolója számára. Illata a mandulára hasonlítható.", //nem kell ENTER
    "Egyéb vélemény": "Ajánlott",
    "Értékelés": "7.5", //tizedespont kell
    "Kép": "https://www.bortarsasag.hu/images/upload/cimkep/laposa_friss_2016_nn.jpg" //képcím URL
  },
  
  //EDDIG MÓDOSÍTS********************************************************************************************************************   
];

//method: create wine blocks on startup
function createWineList() {

  //sort winelist by rating
  //wines.sort(function(a, b) {return parseFloat(a["Értékelés"]) < parseFloat(b["Értékelés"])});
  wines.sort(function(a, b){return (parseFloat(a["Értékelés"]) < parseFloat(b["Értékelés"])) ? 1 : (parseFloat(a["Értékelés"]) > parseFloat(b["Értékelés"])) ? -1 : 0;});
 

  //loop through wines array to create wine blocks
  for (i = 0; i < wines.length; i++) {
    
    //create main wine div
    var wineDiv = document.createElement('div');
    wineDiv.className = 'wine';
    wineDiv.id = 'wines' + i;
    document.getElementsByTagName('body')[0].appendChild(wineDiv);

    //identify wine types for glass icon color
    if (wines[i]["Típus"].toUpperCase().includes("FEHÉR")) {      
      var wineType = "khaki";
    }
    else if (wines[i]["Típus"].toUpperCase().includes("VÖRÖS")) {    
      var wineType = "FireBrick";
    }
    else if (wines[i]["Típus"].toUpperCase().includes("ROSÉ")) {    
      var wineType = "LightSalmon";
    }
    else{
      var wineType = "black";
    }
    
    //create wine header
    var wineName = document.createElement('header');
    wineName.className = 'wineName';
    wineName.id = 'header' + i;
    wineName.innerHTML = "<span class='fa fa-glass' style='font-size:19px; float:left; margin-top:6px; margin-right:6px; color:" + wineType + "'></span>" + "<span style='float:left'>"+ wines[i][Object.keys(wines[i])[0]] + "</span>";
    document.getElementById('wines' + i).appendChild(wineName);

    //create wine image div and set image
    var wineImage = document.createElement('div');
    wineImage.className = 'wineImage';
    wineImage.id = 'wineImages' + i;
    document.getElementById('wines' + i).appendChild(wineImage);
    document.getElementById('wineImages' + i).style.backgroundImage = "url(" + wines[i][Object.keys(wines[i])[8]] + ")";

    //create wine data div
    var wineDataDiv = document.createElement('div');
    wineDataDiv.className = 'wineDatasDiv';
    wineDataDiv.id = 'wineDatasDiv' + i;
    document.getElementById('wines' + i).appendChild(wineDataDiv);

    //fill wine data div with datas
    for (var prop in wines[i]) {
      if (wines[i].hasOwnProperty(prop)) {
        if (prop != "Megnevezés" & prop != "Értékelés" & prop != "Kép") {
          var wineDatas = document.createElement('p');
          wineDatas.className = 'wineDatas';
          wineDatas.innerHTML = prop + " " + "<span style='color:blue'>" + wines[i][prop] + "</span>";
          document.getElementById('wineDatasDiv' + i).appendChild(wineDatas);
        }
      }
    }
    
    //specify rating value
    var rating = Math.floor(wines[i][Object.keys(wines[i])[7]]);

    //create rating value paragraph and add to header
    var ratingPara = document.createElement('p');
    ratingPara.className = 'ratings';
    ratingPara.innerText = wines[i][Object.keys(wines[i])[7]];
    document.getElementById('header' + i).appendChild(ratingPara);

    //draw empty rating stars and add to header
    for (var k = rating; k < 10; k++) {
      var ratingPara = document.createElement('p');
      ratingPara.className = 'ratings';
      ratingPara.innerHTML = "<span class='fa fa-star-o' style='font-size:20px; float:right'></span>";
      document.getElementById('header' + i).appendChild(ratingPara);
    }

    //draw full rating stars and add to header
    for (var j = 1; j < rating + 1; j++) {
      var ratingPara = document.createElement('p');
      ratingPara.className = 'ratings';
      ratingPara.innerHTML = "<span class='fa fa-star' style='font-size:20px; float:right'></span>";
      document.getElementById('header' + i).appendChild(ratingPara);
    }   
  }
}

Comments