From d0d696fb456d62f1596405fb562edc2ecb063732 Mon Sep 17 00:00:00 2001 From: Pepovkp Date: Fri, 28 Feb 2020 22:04:47 +0100 Subject: [PATCH] Clase 15 --- Kiril/clase15/apipokemon.js | 103 +++++++++++++++++++++++ Kiril/clase15/index.html | 35 ++++++++ Kiril/clase15/style.css | 161 ++++++++++++++++++++++++++++++++++++ 3 files changed, 299 insertions(+) create mode 100644 Kiril/clase15/apipokemon.js create mode 100644 Kiril/clase15/index.html create mode 100644 Kiril/clase15/style.css diff --git a/Kiril/clase15/apipokemon.js b/Kiril/clase15/apipokemon.js new file mode 100644 index 0000000..cdee2b3 --- /dev/null +++ b/Kiril/clase15/apipokemon.js @@ -0,0 +1,103 @@ + + + +console.log("created"); + +let proceso = []; +let listap = document.getElementById("proceso") + + +/* ----------------------------------------------------------------------------------------------- */ +const titleHTMLElement = document.getElementById("titulo"); +/* Creamos un evento para que nos escuche lo al hacer click en el titulo */ +titleHTMLElement.addEventListener("click", evento =>console.log (evento)); + +/* Creamos un evento para que nos escuche, nos pinta por consola evento, target, current target */ +titleHTMLElement.addEventListener("click", evento =>{ + console.log (evento); + console.log (evento.target); /* Si añadimos el escuchador en el padre, el target nos dice quien a disparado + dicho evento, es decir que hijo lo ha disparado. */ + console.log (evento.currentTarget); + /* console.log (`Target: ${evento.target}`); + console.log (`Current Target: ${evento.currentTarget}`); *//* Escrito con la nomenclatura de ECMA 6 */ +}); +/* ----------------------------------------------------------------------------------------------- */ + + +/* lip/listap ==>> Hace referente a la lista pendiente */ +/* lit/listat ==>> Hace referente a la lista terminados */ + + + + +refrescarlistas(); + +/* Hacemos una funcion para poder llamarla y poder refrescar las listas las veces que quiera */ +async function refrescarlistas(){ + /* Aqui tenemos que vaciar la lista, porque si no cada vez que entremos se nos acumularia lo + que tenemos de la otra vez*/ + listap.innerHTML = "" + + /* Con await nos esperamos a que resuelta la promesa y nos devuelve el resultado. Objeto. */ + proceso = await fetch("https://pokeapi.co/api/v2/pokemon?offset=0&limit=999") + .then(response => response.json()) + .then(result => result.results); + + + proceso.forEach(item => { + /* 1.-Crear un li ---- let li = document.createelement("li") */ + let lip = document.createElement("li"); + /* 2. Añadir texto ---- li.innerHTML = element */ + lip.innerHTML = item.name; + /* 3.- Asignamos las clases, para dar formato al ul y li*/ + listap.setAttribute("class", "result-list"); + lip.setAttribute("class", "result-list-itemP"); + /* 4.- Añadir li al ul ---- ul.uppendChild(li) */ + listap.appendChild(lip); + + }); + +} +/* Declaro una variable para seleccionar la clase "cont_principal", El problema es que nos devuelve un elemento HTML +lo tratariamos como un ARRAY, aunque solo tenga un elemento*/ + +var a = document.getElementsByClassName("cont_principal"); +function cambiarFondo() { + // color = 'rgb(255,0,255' + var color = 'rgb(' + Math.floor((Math.random() * 255)) + ','; + color += Math.floor((Math.random() * 255)) + ','; + color += Math.floor((Math.random() * 255)) + ')'; + a[0].style.backgroundColor = color; + +} + + + +/* Esta es otra forma, porque result.results existe solo en la peticion, asi que le decimos +que con await espere para resolver la promesa y luego lo almacenamos en una variable. Tambien +añadimos async para hacer la funcion asincrona + */ + + +fetch("https://pokeapi.co/api/v2/pokemon?offset=0&limit=9") + .then(response => response.json()) + .then(result => tratarResult(result.results)); + +function tratarResult(lista){ + console.log(lista); +}; + + + + var imagenes = [ + "https://pokeapi.co/api/v2/pokemon/1/", + "https://pokeapi.co/api/v2/pokemon/2/" + +]; + +imagenes.forEach(item => { + const img = document.createElement("img"); + img.setAttribute("src",item); + document.body.appendChild(img); + +}) \ No newline at end of file diff --git a/Kiril/clase15/index.html b/Kiril/clase15/index.html new file mode 100644 index 0000000..6689b5d --- /dev/null +++ b/Kiril/clase15/index.html @@ -0,0 +1,35 @@ + + + + + + + + + Document + + + + +
+ + +

Lista de Pokemon!!

+
+ +
+ +
    +
+ +
+ + +
+ +
+ + + + + diff --git a/Kiril/clase15/style.css b/Kiril/clase15/style.css new file mode 100644 index 0000000..aba23bf --- /dev/null +++ b/Kiril/clase15/style.css @@ -0,0 +1,161 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} +/*aplica a todos los before y todos los after*/ +*, *:before, *:after { + box-sizing: border-box; +} + + + +.cont_principal{ + display: block; + /* background: green; */ + flex-direction: row; + width: 100vw; /*por defecto siempre es el 100 % pantalla*/ + height: auto; + padding-top: 5rem; + /* background-color: rgb(45, 233, 28); Lo omito, para + que la funcion de cambio de color del boton funciones*/ + +} + +.titulo{ + font-size: 8rem; + text-align: center; + padding-bottom: 4rem; + font-family: 'Lacquer', sans-serif; +} + +.result{ + display: flex; + /* background: blanchedalmond; */ + flex-direction: row; + justify-content: center; + align-items: center; + width: 100vw; + min-width: 912px; + height: auto; +} + +@media (max-width:912px) { + .result{ + display: flex; + /* background: red; */ + flex-direction: column; + flex-wrap: wrap; + justify-content: center; + align-items: center; + width: 100vw; + height: auto; + } +} +.cont-result-list{ + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + background-color: rgb(45, 233, 28); + width: 46%; + max-width: 912px; + height: auto; + min-height: 36rem; + align-items: center; + align-content: center; + margin: 0 auto; + padding: 1rem; + border:solid 5px black; + border-radius: 5%; +} + +.result-list{ + display: flex; + flex-direction: column; + flex-wrap: wrap; + background: rgba(242, 98, 45, 0.954); + width: 100vw; + max-width: 95%; + height: 100%; + min-height: 36rem; + justify-content:flex-start; + align-items: center; + align-content: center; + border:solid 5px black; + border-radius: 5%; + padding-top: 40px; +} + +.result-list-itemP{ /*Con esta clase damos formatos a los item de la lista "pendiente" id=proceso */ + display: flex; + background: rgba(250, 250, 35, 0.728); + border: black solid 3px; + width: auto; + min-width: 20rem; + height: 3rem; + margin: 0.8em; + justify-content: center; + align-items: center; + border-radius: 1rem; + color:red; +} + +.btn{ + display: flex; + position: fixed; + top:2rem; + justify-content: center; + width: 8rem; + height: 2rem; + border: 0.1rem dotted black; + border-radius: 2rem; + background: rgba(243, 14, 255, 0.851); + color:white; + font-size: 0.8rem; + z-index: 99; +} +