Dupla colaborativa: Olimpia Coria- Dianyela Maldonado

package.json

@@ -1,29 +1,25 @@
 {
-  "name": "data-lovers",
-  "version": "1.0.0",
-  "main": "src/index.html",
-  "license": "MIT",
-  "scripts": {
-    "htmlhint": "htmlhint src/*.html test/*.html",
-    "eslint": "eslint --ext .js src/ test/",
-    "pretest": "npm run eslint && npm run htmlhint",
-    "test": "jest --verbose --coverage",
-    "open-coverage-report": "opener ./coverage/lcov-report/index.html",
-    "start": "serve ./src"
-  },
-  "dependencies": {
-    "@babel/core": "^7.6.2",
-    "@babel/plugin-transform-modules-commonjs": "^7.6.0",
-    "babel-jest": "^24.9.0",
-    "htmlhint": "^0.11.0",
-    "jest": "^24.9.0",
-    "opener": "^1.5.1",
-    "serve": "^11.0.0"
-  },
-  "devDependencies": {
-    "eslint": "^6.5.1",
-    "eslint-config-airbnb-base": "^14.0.0",
-    "eslint-plugin-import": "^2.18.2",
-    "eslint-plugin-jest": "^22.19.0"
-  }
+    "name": "data-lovers",
+    "version": "1.0.0",
+    "main": "src/index.html",
+    "license": "MIT",
+    "scripts": {
+        "test": "jest --verbose --coverage",
+        "start": "serve ./src"
+    },
+    "dependencies": {
+        "@babel/core": "^7.6.2",
+        "@babel/plugin-transform-modules-commonjs": "^7.6.0",
+        "babel-jest": "^24.9.0",
+        "htmlhint": "^0.11.0",
+        "jest": "^24.9.0",
+        "opener": "^1.5.1",
+        "serve": "^11.0.0"
+    },
+    "devDependencies": {
+        "eslint": "^6.5.1",
+        "eslint-config-airbnb-base": "^14.0.0",
+        "eslint-plugin-import": "^2.18.2",
+        "eslint-plugin-jest": "^22.19.0"
+    }
 }

src/data.js

@@ -1,13 +1,7 @@
-// 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';
+import { cargarJSON } from './helpers/cargarjsonone.js';
 
-// esta es una función de ejemplo
 
-export const example = () => {
-  return 'example';
-};
+document.addEventListener("DOMContentLoaded", function() {
+    let cardsprueba = document.querySelector('#cardsprueba');
+    cargarJSON();
+});

src/helpers/cargarjsonone.js

@@ -0,0 +1,39 @@
+import { championDetail } from './championdetail.js';
+import { filterChamps } from './filterchamps.js';
+
+function cargarJSON() {
+    fetch('https://ddragon.leagueoflegends.com/cdn/10.6.1/data/en_US/champion.json')
+        .then(res => {
+            return res.json()
+        })
+        .then(function(result_json) {
+            let html = '';
+            let champions = result_json.data;
+            window.champions = champions;
+            for (let champion in champions) {
+                let data_champion = champions[champion];
+
+                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="https://ddragon.leagueoflegends.com/cdn/img/champion/splash/${data_champion['id']}_0.jpg" alt="">
+                                    </div>
+                                   <div class="atras">
+                                 <p class="card-text">#${data_champion['blurb']}</p>
+                             </div>
+                            </div>
+                        </div>
+                    `;
+            }
+            cardsprueba.innerHTML = html;
+        })
+        .then(function() {
+            championDetail();
+        })
+        .then(function() {
+            filterChamps();
+        })
+}
+
+export { cargarJSON }

src/helpers/cargarjsontwo.js

@@ -0,0 +1,68 @@
+function cargarJSONdos(nombreCampeon) {
+    let onlyChampion = document.querySelector('#onlyChampion');
+    fetch('https://ddragon.leagueoflegends.com/cdn/10.5.1/data/en_US/champion/' + nombreCampeon + '.json')
+        .then(res2 => {
+            return res2.json()
+        })
+        .then(function(result_json2) {
+            let html2 = "";
+            let data_avat = result_json2.data[nombreCampeon];
+            html2 += ` <div class="contentChampionInfo">
+                        <div>
+                        <div class="imgprincipal">
+                          <img class="ImgChampionInfo" src="https://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> `;
+
+            onlyChampion.innerHTML = html2;
+
+        }).then(function() {
+            window.scrollTo(0, 0);
+        })
+
+    .then(function() {
+        back();
+    })
+}
+
+export { cargarJSONdos }

src/helpers/championdetail.js

@@ -0,0 +1,12 @@
+import { cargarJSONdos } from './cargarjsontwo.js';
+
+function championDetail() {
+    let callcard = document.querySelectorAll(".tarjeta");
+    callcard.forEach(function(card) {
+        card.onclick = function() {
+            cargarJSONdos(this.getAttribute("data-nombre"));
+        }
+    });
+}
+
+export { championDetail }

src/helpers/filterchamps.js

@@ -0,0 +1,42 @@
+import { championDetail } from './championdetail.js';
+
+function filterChamps() {
+    let html3 = "";
+    let filteredChamps = "";
+    const champsToFilter = Object.entries(window.champions);
+    let filterButtons = document.querySelectorAll(".filter");
+    for (const filterButton of filterButtons) {
+        filterButton.addEventListener('click', function() {
+            html3 = "";
+            let championType = this.getAttribute("data-type");
+            if (championType == "All") {
+                filteredChamps = champsToFilter;
+            } else {
+                filteredChamps = champsToFilter.filter(function(item) {
+                    let tags = item[1]["tags"];
+                    return tags.includes(championType);
+                });
+
+            }
+
+            for (let key in filteredChamps) {
+                let data_champion = filteredChamps[key][1];
+                html3 += `<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="https://ddragon.leagueoflegends.com/cdn/img/champion/splash/${data_champion['id']}_0.jpg" alt="">
+                                    </div>
+                                   <div class="atras">
+                                 <p class="card-text">#${data_champion['blurb']}</p>
+                             </div>
+                            </div>
+                        </div>
+                    `;
+            }
+            cardsprueba.innerHTML = html3;
+            championDetail();
+        });
+    }
+}
+export { filterChamps }

src/index.html

@@ -1,14 +1,74 @@
 <!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">
+            <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>
+        </section>
+
+
+        <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 class="filter" data-type="Assassin">ASSASSIN <img class="b1" src="imagenes/assassin2.png"> </button> </li>
+                        <li> <button class="filter" data-type="Fighter">FIGHTER <img class="b2" src="imagenes/fighter2.png"> </button> </li>
+                        <li> <button class="filter" data-type="Mage">MAGE <img class="b3" src="imagenes/mage2.png"> </button> </li>
+                        <li> <button class="filter" data-type="Marksman">MARKSMAN<img class="b4" src="imagenes/marksman2.png"> </button> </li>
+                        <li> <button class="filter" data-type="Support"> SUPPORT<img class="b5" src="imagenes/support2.png"> </button> </li>
+                        <li> <button class="filter" data-type="Tank"> TANK<img class="b6" src="imagenes/tank2.png"> </button> </li>
+                        <li> <button class="filter" data-type="All"> ALL CHAMPS<img class="b7"> </button> </li>
+                    </ul>
+                </nav>
+            </div>
+        </section>
+        <div id="cardsprueba" class="wrap"></div>
+        <div id="onlyChampion"></div>
+        <script type="text/javascript" src="main.js"></script>
+        <script type="module" src="data.js"></script>
+    </div>
+</body>
+
+</html>

src/main.js

@@ -1,4 +1,51 @@
-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");
+let encounter = document.querySelector("div#sliderall div#contentslider ul#sliderlist li#one img");
+let nextimage = 1;
+let previmage = 7;
+let 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";
+let total = slider.length - 1;
 
+
+buttonnext.onclick = function() {
+    encounter.src = slider[nextimage];
+    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--;
+    }
+}