Skip to content

Clase 15 #35

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Clase 15 #35

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
103 changes: 103 additions & 0 deletions Kiril/clase15/apipokemon.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);

})
35 changes: 35 additions & 0 deletions Kiril/clase15/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Lacquer&display=swap" rel="stylesheet">
<title>Document</title>
</head>
<body>


<div class="cont_principal">


<h1 id="titulo" class="titulo">Lista de Pokemon!!</h1>
<main class="result">

<section class="cont-result-list">

<ul id="proceso" class="result-list" >
</ul>

</section>

<button onclick="cambiarFondo()" class="btn">Cambia el Fondo</button>
</main>

</div>
<script type="text/javascript" src="apipokemon.js"></script>
</body>

</html>

161 changes: 161 additions & 0 deletions Kiril/clase15/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}