Dupla colaborativa: Olimpia Coria- Dianyela Maldonado

src/data.js

@@ -1,13 +1,130 @@
-// import data from './data/injuries/injuries.js';
-// import data from './data/lol/lol.js';
-// import data from './data/patient/patient.js';
-// import data from './data/pokemon/pokemon.js';
-// import data from './data/rickandmorty/rickandmorty.js';
-// import data from './data/steam/steam.js';
-// import data from './data/steam/worldbank.js';
-
-// esta es una función de ejemplo
-
-export const example = () => {
-  return 'example';
-};
+document.addEventListener("DOMContentLoaded", function() {
+    cargarJSON();
+});
+
+//document.getElementById('onlyChampion').addEventListener('click', cargarJSONdos);
+
+function cargarJSON() { //esta función hace la conexión y definimos como queremos que los devuleva, ya sea como texto JSON u otros metodos
+    let cardsprueba = document.querySelector('#cardsprueba');
+    fetch('http://localhost:64127/data/lol/lol.json')
+        .then(res => {
+            return res.json()
+        }) //indicamos que queremos un json
+        //como en el return de arriba le decimos que queremos un json,aquí lo que hace es formatearlo y darnos este resultado
+        .then(function(result_json) {
+            let html = '';
+            //let card = '';
+            //let x = 1;
+            let champions = result_json.data;
+            for (var champion in champions) {
+                //if (x <= 2) {}
+                let data_champion = champions[champion];
+                //console.log(data_champion['name']);
+                html += `<div class="tarjeta-wrap">
+                            <div class="tarjeta" data-nombre="${data_champion['id']}">
+                                    <div class="adelante card1">
+                                         <h2>${data_champion['name']}</h2>
+                                         <img class="img-fluid" src="${data_champion['splash']}" alt="">
+                                    </div>
+                                   <div class="atras">
+                                 <p class="card-text">#${data_champion['blurb']}</p>
+                             </div>
+                            </div>
+                        </div>
+                    `;
+                //x++;
+            }
+            cardsprueba.innerHTML = html;
+            //console.log(html);
+        })
+        .then(function() {
+            let callcard = document.querySelectorAll(".tarjeta");
+            callcard.forEach(function(card) {
+                card.onclick = function() {
+                    //console.log(card);
+                    // var image = c.getElementByTagName('img').getAttribute("src");
+                    //console.log(this.getAttribute("nombre"));
+
+                    cargarJSONdos(this.getAttribute("data-nombre"));
+
+                    //console.log(this);
+                }
+
+            });
+        })
+
+}
+
+//cargarJSON.appendChild = cargarJSONdos;
+
+function cargarJSONdos(nombreCampeon) {
+    let onlyChampion = document.querySelector('#onlyChampion');
+    fetch('http://ddragon.leagueoflegends.com/cdn/10.5.1/data/en_US/champion/' + nombreCampeon + '.json')
+        .then(res2 => {
+            return res2.json()
+        })
+        .then(function(result_json2) {
+            //console.log(result_json2);
+            let html2 = "";
+            let data_avat = result_json2.data[nombreCampeon];
+            // console.log(data_avat);
+            html2 += ` <div class="contentChampionInfo">
+                        <div>
+                        <div class="imgprincipal">
+                          <img class="ImgChampionInfo" src="http://ddragon.leagueoflegends.com/cdn/img/champion/splash/${nombreCampeon}_0.jpg" alt="">
+                          <div class="sobrelaimagen">
+                             <div class="nametitle">
+                            <h2 class="positionName">${data_avat['name']}</h2>
+                            </div>
+
+                            <div class="positionRol">
+                                 <p class="tags">${data_avat['tags']}</p>
+                                 </div>
+                            <div class="positionTitle">
+                                  <p class="title">${data_avat['title']}"</p>
+                            </div>
+                            </div>
+                           <div class="sombra"></div>
+                          </div>
+
+                  </div>
+                 <div class="listahabilidades">
+                      <p class="infohabilidades">ABILITIES</p>
+                      <ul>
+                         <li class="attack">
+                              <img class="imghab" src="imagenes/atacke.png" alt="">
+                              <p>Attak ${data_avat['info'].attack}</p>
+                          </li>
+                          <li class="defense">
+                              <img class="imghab" src="imagenes/escudo.png" alt="">
+            <p>defense ${data_avat['info'].defense} </p>
+                  </li>
+                         <li class="magic">
+                              <img class="imghab" src="imagenes/maguc.png" alt="">
+                              <p>magical ${data_avat['info'].magic}</p>
+                          </li>
+                         <li class="difficulty">
+                              <img class="imghab" src="imagenes/flame.png" alt="">
+                              <p>difficulty ${data_avat['info'].difficulty}</p>
+                          </li>
+                      </ul>
+                 </div>   
+                 <div class="bioLoreBlurb">
+                      <p class="lore"> ${data_avat['lore']}</p>
+                  </div>
+
+                  <button id="buttonback" class="buttonchamps">COME BACK</button>
+                       </div> `;
+
+            //console.log(html2);
+            onlyChampion.innerHTML = html2;
+
+        }).then(function() {
+            window.scrollTo(0, 0);
+        })
+
+    .then(function() {
+        back();
+    })
+
+}

src/index.html

@@ -1,14 +1,76 @@
 <!DOCTYPE html>
 <html lang="es">
-  <head>
+
+<head>
     <meta charset="UTF-8">
-    <title>Data Lovers</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Data Lovers </title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="viewport" content="user-scalable=no, initial-scale=1, minimun-scale=1,width=device-width">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <link rel="stylesheet" href="style.css" />
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="main.js"></script>
-  </body>
-</html>
+    <link href="https://fonts.googleapis.com/css?family=Russo+One&display=swap" rel="stylesheet">
+</head>
+
+<body>
+    <div class="container">
+        <section class="encabezado"></section>
+        <header class="header">
+            <div class="center">
+                <!-- LOGO -->
+                <div class="logo">
+                    <br><img src="imagenes/logofinal.png" alt="">
+                    <span class="brand">
+                    <!--el titulo del sitio-->
+                    ON-RANKEDS 
+                     </span>
+                </div>
+                <div class="clearfix"></div>
+            </div>
+        </header>
+        <!-- slider  -->
+
+        <section id="top">
+            <h2 class="title"> CHALLENGE <br> YOURSELF </h2>
+
+            <div id="sliderall" class="slider">
+                <div id="contentslider" class="slidecontent">
+                    <ul id="sliderlist" class="slidecontentlist">
+                        <li id="one" class="slide1"> <img src="imagenes/Emblem_Challenger8.png"></li>
+                    </ul>
+                </div>
+                <div class="buttons">
+                    <button id="prev" class="buttonprev"> < </button>
+                    <button id="next" class="buttonext"> > </button>
+                </div>
+            </div>
+            <div id="reflector"> </div>
+            <div>
+                <h1 class="probandotitulo">ACTIVATE THE GREATEST POWER WE ARE <br> IT WAS GRANTED OF KNOWLEDGE</h1>
+            </div>
+        </section>
+        <section id="bottons">
+            <div class="botonera">
+                <nav class="menu">
+                    <ul>
+                        <li> <button>ASSASSIN <img class="b1" src="imagenes/assassin2.png"> </button> </li>
+                        <li> <button>FIGHTER <img class="b2" src="imagenes/fighter2.png"> </button> </li>
+                        <li> <button>MAGE <img class="b3" src="imagenes/mage2.png"> </button> </li>
+                        <li> <button>MARKSMAN<img class="b4" src="imagenes/marksman2.png"> </button> </li>
+                        <li> <button> SUPPORT<img class="b5" src="imagenes/support2.png"> </button> </li>
+                        <li> <button> TANK<img class="b6" src="imagenes/tank2.png"> </button> </li>
+                        <li> <button> ALL CHAMPS<img class="b7"> </button> </li>
+                    </ul>
+                </nav>
+            </div>
+        </section>
+
+        <!-- <button href="" id="jsonbotton" class="button">Mostrar api</button> -->
+        <div id="cardsprueba" class="wrap"></div>
+        <div id="onlyChampion"></div>
+
+        <script type="text/javascript" src="main.js"></script>
+        <script type="text/javascript" src="data.js"></script>
+    </div>
+</body>
+
+</html>

src/main.js

@@ -1,4 +1,53 @@
-import { example } from './data.js';
+function back() {
+    let buttonBack = document.getElementById("buttonback");
+    buttonBack.onclick = function() {
+        document.getElementById("onlyChampion").innerHTML = "";
+    }
+}
 
-console.log(example);
+let buttonnext = document.getElementById("next");
+let buttonprev = document.getElementById("prev");
+var encounter = document.querySelector("div#sliderall div#contentslider ul#sliderlist li#one img");
+var nextimage = 1;
+var previmage = 7;
+var slider = new Array();
+slider[0] = "imagenes/Emblem_Challenger8.png";
+slider[1] = "imagenes/Emblem_Grandmaster7.png";
+slider[2] = "imagenes/Emblem_Master6.png";
+slider[3] = "imagenes/Emblem_Diamond5.png";
+slider[4] = "imagenes/Emblem_Gold4.png";
+slider[5] = "imagenes/Emblem_Silver3.png";
+slider[6] = "imagenes/Emblem_Bronze2.png";
+slider[7] = "imagenes/Emblem_Iron1.png";
+var total = slider.length - 1;
 
+
+buttonnext.onclick = function() {
+    //console.log(encounter);
+    encounter.src = slider[nextimage];
+    // nextimage vale 1
+    if (nextimage == total) {
+        nextimage = 0;
+    } else {
+        nextimage++;
+    }
+    if (previmage == total) {
+        previmage = 0;
+    } else {
+        previmage++;
+    }
+}
+
+buttonprev.onclick = function() {
+    encounter.src = slider[previmage];
+    if (previmage == 0) {
+        previmage = total;
+    } else {
+        previmage--;
+    }
+    if (nextimage == 0) {
+        nextimage = total;
+    } else {
+        nextimage--;
+    }
+}