Skip to content

Instantly share code, notes, and snippets.

@furenku

furenku/estilos.css

Last active February 17, 2022 14:59
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save furenku/54e42521b07eb7f3505c62943f572fd6 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save furenku/54e42521b07eb7f3505c62943f572fd6 to your computer and use it in GitHub Desktop.
Download ZIP
rickandmorty
Raw
estilos.css
html, body {
/* m0 */
margin: 0;
/* p0 */
padding: 0;
}
#cabecera {
/* bgc */
background-color: black;
/* c */
color: white;
/* p2rem */
padding: 2rem;
}
.personaje {
/* w15rem */
width: 15rem;
/* bgc */
background-color: #fff;
/* bxsh */
box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
}
img {
max-width: 100%;
}
.personaje .nombre {
/* m0 */
margin: 0;
}
.personaje .informacion {
/* p1rem */
padding: 1rem;
}
.personaje .informacion * {
/* m0 */
margin: 0;
/* mb.5rem */
margin-bottom: 0.5rem;
}
.personaje .informacion .etiqueta {
/* c */
color: gray;
/* fz0.8rem */
font-size: 0.8rem;
}
#personajes {
/* df */
display: flex;
/* fwr */
flex-wrap: wrap;
/* jc */
justify-content: space-evenly;
}
.personaje {
/* m1rem */
margin: 1rem;
}
.modelo {
/* dn */
display: none;
}
Raw
index.html
<!-- html:5 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rick and Morty</title>
<!-- link -->
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<!-- header#cabecera -->
<header id="cabecera">
<!-- h1 -->
<h1>
Rick and Morty
</h1>
</header>
<!-- section#personajes -->
<section id="personajes">
<!-- article.personaje.modelo -->
<article class="personaje modelo">
<!-- .imagen -->
<div class="imagen">
<!-- img -->
<img src="http://placehold.it/300x200" alt="">
</div>
<!-- .informacion -->
<div class="informacion">
<!-- h3.nombre -->
<h3 class="nombre">
Nombre de personaje
</h3>
<!-- .etiqueta -->
<div class="etiqueta">
Especie
</div>
<!-- p.lugar -->
<p class="especie">
Nombre de especie
</p>
<!-- .etiqueta -->
<div class="etiqueta">
Lugar de origen
</div>
<!-- p.lugar -->
<p class="lugar">
Nombre de lugar
</p>
</div>
</article>
</section>
</body>
</html>
Raw
personajes.js
let personajes = [{
"id": 1,
"name": "Rick Sanchez",
"status": "Alive",
"species": "Human",
"type": "",
"gender": "Male",
"origin": {
"name": "Earth (C-137)",
"url": "https://rickandmortyapi.com/api/location/1"
},
"location": {
"name": "Citadel of Ricks",
"url": "https://rickandmortyapi.com/api/location/3"
},
"image": "https://rickandmortyapi.com/api/character/avatar/1.jpeg",
"episode": ["https://rickandmortyapi.com/api/episode/1", "https://rickandmortyapi.com/api/episode/2", "https://rickandmortyapi.com/api/episode/3", "https://rickandmortyapi.com/api/episode/4", "https://rickandmortyapi.com/api/episode/5", "https://rickandmortyapi.com/api/episode/6", "https://rickandmortyapi.com/api/episode/7", "https://rickandmortyapi.com/api/episode/8", "https://rickandmortyapi.com/api/episode/9", "https://rickandmortyapi.com/api/episode/10", "https://rickandmortyapi.com/api/episode/11", "https://rickandmortyapi.com/api/episode/12", "https://rickandmortyapi.com/api/episode/13", "https://rickandmortyapi.com/api/episode/14", "https://rickandmortyapi.com/api/episode/15", "https://rickandmortyapi.com/api/episode/16", "https://rickandmortyapi.com/api/episode/17", "https://rickandmortyapi.com/api/episode/18", "https://rickandmortyapi.com/api/episode/19", "https://rickandmortyapi.com/api/episode/20", "https://rickandmortyapi.com/api/episode/21", "https://rickandmortyapi.com/api/episode/22", "https://rickandmortyapi.com/api/episode/23", "https://rickandmortyapi.com/api/episode/24", "https://rickandmortyapi.com/api/episode/25", "https://rickandmortyapi.com/api/episode/26", "https://rickandmortyapi.com/api/episode/27", "https://rickandmortyapi.com/api/episode/28", "https://rickandmortyapi.com/api/episode/29", "https://rickandmortyapi.com/api/episode/30", "https://rickandmortyapi.com/api/episode/31", "https://rickandmortyapi.com/api/episode/32", "https://rickandmortyapi.com/api/episode/33", "https://rickandmortyapi.com/api/episode/34", "https://rickandmortyapi.com/api/episode/35", "https://rickandmortyapi.com/api/episode/36", "https://rickandmortyapi.com/api/episode/37", "https://rickandmortyapi.com/api/episode/38", "https://rickandmortyapi.com/api/episode/39", "https://rickandmortyapi.com/api/episode/40", "https://rickandmortyapi.com/api/episode/41", "https://rickandmortyapi.com/api/episode/42", "https://rickandmortyapi.com/api/episode/43", "https://rickandmortyapi.com/api/episode/44", "https://rickandmortyapi.com/api/episode/45", "https://rickandmortyapi.com/api/episode/46", "https://rickandmortyapi.com/api/episode/47", "https://rickandmortyapi.com/api/episode/48", "https://rickandmortyapi.com/api/episode/49", "https://rickandmortyapi.com/api/episode/50", "https://rickandmortyapi.com/api/episode/51"],
"url": "https://rickandmortyapi.com/api/character/1",
"created": "2017-11-04T18:48:46.250Z"
}, {
"id": 2,
"name": "Morty Smith",
"status": "Alive",
"species": "Human",
"type": "",
"gender": "Male",
"origin": {
"name": "unknown",
"url": ""
},
"location": {
"name": "Citadel of Ricks",
"url": "https://rickandmortyapi.com/api/location/3"
},
"image": "https://rickandmortyapi.com/api/character/avatar/2.jpeg",
"episode": ["https://rickandmortyapi.com/api/episode/1", "https://rickandmortyapi.com/api/episode/2", "https://rickandmortyapi.com/api/episode/3", "https://rickandmortyapi.com/api/episode/4", "https://rickandmortyapi.com/api/episode/5", "https://rickandmortyapi.com/api/episode/6", "https://rickandmortyapi.com/api/episode/7", "https://rickandmortyapi.com/api/episode/8", "https://rickandmortyapi.com/api/episode/9", "https://rickandmortyapi.com/api/episode/10", "https://rickandmortyapi.com/api/episode/11", "https://rickandmortyapi.com/api/episode/12", "https://rickandmortyapi.com/api/episode/13", "https://rickandmortyapi.com/api/episode/14", "https://rickandmortyapi.com/api/episode/15", "https://rickandmortyapi.com/api/episode/16", "https://rickandmortyapi.com/api/episode/17", "https://rickandmortyapi.com/api/episode/18", "https://rickandmortyapi.com/api/episode/19", "https://rickandmortyapi.com/api/episode/20", "https://rickandmortyapi.com/api/episode/21", "https://rickandmortyapi.com/api/episode/22", "https://rickandmortyapi.com/api/episode/23", "https://rickandmortyapi.com/api/episode/24", "https://rickandmortyapi.com/api/episode/25", "https://rickandmortyapi.com/api/episode/26", "https://rickandmortyapi.com/api/episode/27", "https://rickandmortyapi.com/api/episode/28", "https://rickandmortyapi.com/api/episode/29", "https://rickandmortyapi.com/api/episode/30", "https://rickandmortyapi.com/api/episode/31", "https://rickandmortyapi.com/api/episode/32", "https://rickandmortyapi.com/api/episode/33", "https://rickandmortyapi.com/api/episode/34", "https://rickandmortyapi.com/api/episode/35", "https://rickandmortyapi.com/api/episode/36", "https://rickandmortyapi.com/api/episode/37", "https://rickandmortyapi.com/api/episode/38", "https://rickandmortyapi.com/api/episode/39", "https://rickandmortyapi.com/api/episode/40", "https://rickandmortyapi.com/api/episode/41", "https://rickandmortyapi.com/api/episode/42", "https://rickandmortyapi.com/api/episode/43", "https://rickandmortyapi.com/api/episode/44", "https://rickandmortyapi.com/api/episode/45", "https://rickandmortyapi.com/api/episode/46", "https://rickandmortyapi.com/api/episode/47", "https://rickandmortyapi.com/api/episode/48", "https://rickandmortyapi.com/api/episode/49", "https://rickandmortyapi.com/api/episode/50", "https://rickandmortyapi.com/api/episode/51"],
"url": "https://rickandmortyapi.com/api/character/2",
"created": "2017-11-04T18:50:21.651Z"
}, {
"id": 3,
"name": "Summer Smith",
"status": "Alive",
"species": "Human",
"type": "",
"gender": "Female",
"origin": {
"name": "Earth (Replacement Dimension)",
"url": "https://rickandmortyapi.com/api/location/20"
},
"location": {
"name": "Earth (Replacement Dimension)",
"url": "https://rickandmortyapi.com/api/location/20"
},
"image": "https://rickandmortyapi.com/api/character/avatar/3.jpeg",
"episode": ["https://rickandmortyapi.com/api/episode/6", "https://rickandmortyapi.com/api/episode/7", "https://rickandmortyapi.com/api/episode/8", "https://rickandmortyapi.com/api/episode/9", "https://rickandmortyapi.com/api/episode/10", "https://rickandmortyapi.com/api/episode/11", "https://rickandmortyapi.com/api/episode/12", "https://rickandmortyapi.com/api/episode/14", "https://rickandmortyapi.com/api/episode/15", "https://rickandmortyapi.com/api/episode/16", "https://rickandmortyapi.com/api/episode/17", "https://rickandmortyapi.com/api/episode/18", "https://rickandmortyapi.com/api/episode/19", "https://rickandmortyapi.com/api/episode/20", "https://rickandmortyapi.com/api/episode/21", "https://rickandmortyapi.com/api/episode/22", "https://rickandmortyapi.com/api/episode/23", "https://rickandmortyapi.com/api/episode/24", "https://rickandmortyapi.com/api/episode/25", "https://rickandmortyapi.com/api/episode/26", "https://rickandmortyapi.com/api/episode/27", "https://rickandmortyapi.com/api/episode/29", "https://rickandmortyapi.com/api/episode/30", "https://rickandmortyapi.com/api/episode/31", "https://rickandmortyapi.com/api/episode/32", "https://rickandmortyapi.com/api/episode/33", "https://rickandmortyapi.com/api/episode/34", "https://rickandmortyapi.com/api/episode/35", "https://rickandmortyapi.com/api/episode/36", "https://rickandmortyapi.com/api/episode/38", "https://rickandmortyapi.com/api/episode/39", "https://rickandmortyapi.com/api/episode/40", "https://rickandmortyapi.com/api/episode/41", "https://rickandmortyapi.com/api/episode/42", "https://rickandmortyapi.com/api/episode/43", "https://rickandmortyapi.com/api/episode/44", "https://rickandmortyapi.com/api/episode/45", "https://rickandmortyapi.com/api/episode/46", "https://rickandmortyapi.com/api/episode/47", "https://rickandmortyapi.com/api/episode/48", "https://rickandmortyapi.com/api/episode/49", "https://rickandmortyapi.com/api/episode/51"],
"url": "https://rickandmortyapi.com/api/character/3",
"created": "2017-11-04T19:09:56.428Z"
}, {
"id": 4,
"name": "Beth Smith",
"status": "Alive",
"species": "Human",
"type": "",
"gender": "Female",
"origin": {
"name": "Earth (Replacement Dimension)",
"url": "https://rickandmortyapi.com/api/location/20"
},
"location": {
"name": "Earth (Replacement Dimension)",
"url": "https://rickandmortyapi.com/api/location/20"
},
"image": "https://rickandmortyapi.com/api/character/avatar/4.jpeg",
"episode": ["https://rickandmortyapi.com/api/episode/6", "https://rickandmortyapi.com/api/episode/7", "https://rickandmortyapi.com/api/episode/8", "https://rickandmortyapi.com/api/episode/9", "https://rickandmortyapi.com/api/episode/10", "https://rickandmortyapi.com/api/episode/11", "https://rickandmortyapi.com/api/episode/12", "https://rickandmortyapi.com/api/episode/14", "https://rickandmortyapi.com/api/episode/15", "https://rickandmortyapi.com/api/episode/16", "https://rickandmortyapi.com/api/episode/18", "https://rickandmortyapi.com/api/episode/19", "https://rickandmortyapi.com/api/episode/20", "https://rickandmortyapi.com/api/episode/21", "https://rickandmortyapi.com/api/episode/22", "https://rickandmortyapi.com/api/episode/23", "https://rickandmortyapi.com/api/episode/24", "https://rickandmortyapi.com/api/episode/25", "https://rickandmortyapi.com/api/episode/26", "https://rickandmortyapi.com/api/episode/27", "https://rickandmortyapi.com/api/episode/28", "https://rickandmortyapi.com/api/episode/29", "https://rickandmortyapi.com/api/episode/30", "https://rickandmortyapi.com/api/episode/31", "https://rickandmortyapi.com/api/episode/32", "https://rickandmortyapi.com/api/episode/33", "https://rickandmortyapi.com/api/episode/34", "https://rickandmortyapi.com/api/episode/35", "https://rickandmortyapi.com/api/episode/36", "https://rickandmortyapi.com/api/episode/38", "https://rickandmortyapi.com/api/episode/39", "https://rickandmortyapi.com/api/episode/40", "https://rickandmortyapi.com/api/episode/41", "https://rickandmortyapi.com/api/episode/42", "https://rickandmortyapi.com/api/episode/43", "https://rickandmortyapi.com/api/episode/44", "https://rickandmortyapi.com/api/episode/45", "https://rickandmortyapi.com/api/episode/46", "https://rickandmortyapi.com/api/episode/47", "https://rickandmortyapi.com/api/episode/48", "https://rickandmortyapi.com/api/episode/49", "https://rickandmortyapi.com/api/episode/51"],
"url": "https://rickandmortyapi.com/api/character/4",
"created": "2017-11-04T19:22:43.665Z"
}, {
"id": 5,
"name": "Jerry Smith",
"status": "Alive",
"species": "Human",
"type": "",
"gender": "Male",
"origin": {
"name": "Earth (Replacement Dimension)",
"url": "https://rickandmortyapi.com/api/location/20"
},
"location": {
"name": "Earth (Replacement Dimension)",
"url": "https://rickandmortyapi.com/api/location/20"
},
"image": "https://rickandmortyapi.com/api/character/avatar/5.jpeg",
"episode": ["https://rickandmortyapi.com/api/episode/6", "https://rickandmortyapi.com/api/episode/7", "https://rickandmortyapi.com/api/episode/8", "https://rickandmortyapi.com/api/episode/9", "https://rickandmortyapi.com/api/episode/10", "https://rickandmortyapi.com/api/episode/11", "https://rickandmortyapi.com/api/episode/12", "https://rickandmortyapi.com/api/episode/13", "https://rickandmortyapi.com/api/episode/14", "https://rickandmortyapi.com/api/episode/15", "https://rickandmortyapi.com/api/episode/16", "https://rickandmortyapi.com/api/episode/18", "https://rickandmortyapi.com/api/episode/19", "https://rickandmortyapi.com/api/episode/20", "https://rickandmortyapi.com/api/episode/21", "https://rickandmortyapi.com/api/episode/22", "https://rickandmortyapi.com/api/episode/23", "https://rickandmortyapi.com/api/episode/26", "https://rickandmortyapi.com/api/episode/29", "https://rickandmortyapi.com/api/episode/30", "https://rickandmortyapi.com/api/episode/31", "https://rickandmortyapi.com/api/episode/32", "https://rickandmortyapi.com/api/episode/33", "https://rickandmortyapi.com/api/episode/35", "https://rickandmortyapi.com/api/episode/36", "https://rickandmortyapi.com/api/episode/38", "https://rickandmortyapi.com/api/episode/39", "https://rickandmortyapi.com/api/episode/40", "https://rickandmortyapi.com/api/episode/41", "https://rickandmortyapi.com/api/episode/42", "https://rickandmortyapi.com/api/episode/43", "https://rickandmortyapi.com/api/episode/44", "https://rickandmortyapi.com/api/episode/45", "https://rickandmortyapi.com/api/episode/46", "https://rickandmortyapi.com/api/episode/47", "https://rickandmortyapi.com/api/episode/48", "https://rickandmortyapi.com/api/episode/49", "https://rickandmortyapi.com/api/episode/50", "https://rickandmortyapi.com/api/episode/51"],
"url": "https://rickandmortyapi.com/api/character/5",
"created": "2017-11-04T19:26:56.301Z"
}, {
"id": 6,
"name": "Abadango Cluster Princess",
"status": "Alive",
"species": "Alien",
"type": "",
"gender": "Female",
"origin": {
"name": "Abadango",
"url": "https://rickandmortyapi.com/api/location/2"
},
"location": {
"name": "Abadango",
"url": "https://rickandmortyapi.com/api/location/2"
},
"image": "https://rickandmortyapi.com/api/character/avatar/6.jpeg",
"episode": ["https://rickandmortyapi.com/api/episode/27"],
"url": "https://rickandmortyapi.com/api/character/6",
"created": "2017-11-04T19:50:28.250Z"
}, {
"id": 7,
"name": "Abradolf Lincler",
"status": "unknown",
"species": "Human",
"type": "Genetic experiment",
"gender": "Male",
"origin": {
"name": "Earth (Replacement Dimension)",
"url": "https://rickandmortyapi.com/api/location/20"
},
"location": {
"name": "Testicle Monster Dimension",
"url": "https://rickandmortyapi.com/api/location/21"
},
"image": "https://rickandmortyapi.com/api/character/avatar/7.jpeg",
"episode": ["https://rickandmortyapi.com/api/episode/10", "https://rickandmortyapi.com/api/episode/11"],
"url": "https://rickandmortyapi.com/api/character/7",
"created": "2017-11-04T19:59:20.523Z"
}, {
"id": 8,
"name": "Adjudicator Rick",
"status": "Dead",
"species": "Human",
"type": "",
"gender": "Male",
"origin": {
"name": "unknown",
"url": ""
},
"location": {
"name": "Citadel of Ricks",
"url": "https://rickandmortyapi.com/api/location/3"
},
"image": "https://rickandmortyapi.com/api/character/avatar/8.jpeg",
"episode": ["https://rickandmortyapi.com/api/episode/28"],
"url": "https://rickandmortyapi.com/api/character/8",
"created": "2017-11-04T20:03:34.737Z"
}, {
"id": 9,
"name": "Agency Director",
"status": "Dead",
"species": "Human",
"type": "",
"gender": "Male",
"origin": {
"name": "Earth (Replacement Dimension)",
"url": "https://rickandmortyapi.com/api/location/20"
},
"location": {
"name": "Earth (Replacement Dimension)",
"url": "https://rickandmortyapi.com/api/location/20"
},
"image": "https://rickandmortyapi.com/api/character/avatar/9.jpeg",
"episode": ["https://rickandmortyapi.com/api/episode/24"],
"url": "https://rickandmortyapi.com/api/character/9",
"created": "2017-11-04T20:06:54.976Z"
}, {
"id": 10,
"name": "Alan Rails",
"status": "Dead",
"species": "Human",
"type": "Superhuman (Ghost trains summoner)",
"gender": "Male",
"origin": {
"name": "unknown",
"url": ""
},
"location": {
"name": "Worldender's lair",
"url": "https://rickandmortyapi.com/api/location/4"
},
"image": "https://rickandmortyapi.com/api/character/avatar/10.jpeg",
"episode": ["https://rickandmortyapi.com/api/episode/25"],
"url": "https://rickandmortyapi.com/api/character/10",
"created": "2017-11-04T20:19:09.017Z"
}, {
"id": 11,
"name": "Albert Einstein",
"status": "Dead",
"species": "Human",
"type": "",
"gender": "Male",
"origin": {
"name": "Earth (C-137)",
"url": "https://rickandmortyapi.com/api/location/1"
},
"location": {
"name": "Earth (Replacement Dimension)",
"url": "https://rickandmortyapi.com/api/location/20"
},
"image": "https://rickandmortyapi.com/api/character/avatar/11.jpeg",
"episode": ["https://rickandmortyapi.com/api/episode/12"],
"url": "https://rickandmortyapi.com/api/character/11",
"created": "2017-11-04T20:20:20.965Z"
}, {
"id": 12,
"name": "Alexander",
"status": "Dead",
"species": "Human",
"type": "",
"gender": "Male",
"origin": {
"name": "Earth (C-137)",
"url": "https://rickandmortyapi.com/api/location/1"
},
"location": {
"name": "Anatomy Park",
"url": "https://rickandmortyapi.com/api/location/5"
},
"image": "https://rickandmortyapi.com/api/character/avatar/12.jpeg",
"episode": ["https://rickandmortyapi.com/api/episode/3"],
"url": "https://rickandmortyapi.com/api/character/12",
"created": "2017-11-04T20:32:33.144Z"
}, {
"id": 13,
"name": "Alien Googah",
"status": "unknown",
"species": "Alien",
"type": "",
"gender": "unknown",
"origin": {
"name": "unknown",
"url": ""
},
"location": {
"name": "Earth (Replacement Dimension)",
"url": "https://rickandmortyapi.com/api/location/20"
},
"image": "https://rickandmortyapi.com/api/character/avatar/13.jpeg",
"episode": ["https://rickandmortyapi.com/api/episode/31"],
"url": "https://rickandmortyapi.com/api/character/13",
"created": "2017-11-04T20:33:30.779Z"
}, {
"id": 14,
"name": "Alien Morty",
"status": "unknown",
"species": "Alien",
"type": "",
"gender": "Male",
"origin": {
"name": "unknown",
"url": ""
},
"location": {
"name": "Citadel of Ricks",
"url": "https://rickandmortyapi.com/api/location/3"
},
"image": "https://rickandmortyapi.com/api/character/avatar/14.jpeg",
"episode": ["https://rickandmortyapi.com/api/episode/10"],
"url": "https://rickandmortyapi.com/api/character/14",
"created": "2017-11-04T20:51:31.373Z"
}, {
"id": 15,
"name": "Alien Rick",
"status": "unknown",
"species": "Alien",
"type": "",
"gender": "Male",
"origin": {
"name": "unknown",
"url": ""
},
"location": {
"name": "Citadel of Ricks",
"url": "https://rickandmortyapi.com/api/location/3"
},
"image": "https://rickandmortyapi.com/api/character/avatar/15.jpeg",
"episode": ["https://rickandmortyapi.com/api/episode/10"],
"url": "https://rickandmortyapi.com/api/character/15",
"created": "2017-11-04T20:56:13.215Z"
}, {
"id": 16,
"name": "Amish Cyborg",
"status": "Dead",
"species": "Alien",
"type": "Parasite",
"gender": "Male",
"origin": {
"name": "unknown",
"url": ""
},
"location": {
"name": "Earth (Replacement Dimension)",
"url": "https://rickandmortyapi.com/api/location/20"
},
"image": "https://rickandmortyapi.com/api/character/avatar/16.jpeg",
"episode": ["https://rickandmortyapi.com/api/episode/15"],
"url": "https://rickandmortyapi.com/api/character/16",
"created": "2017-11-04T21:12:45.235Z"
}, {
"id": 17,
"name": "Annie",
"status": "Alive",
"species": "Human",
"type": "",
"gender": "Female",
"origin": {
"name": "Earth (C-137)",
"url": "https://rickandmortyapi.com/api/location/1"
},
"location": {
"name": "Anatomy Park",
"url": "https://rickandmortyapi.com/api/location/5"
},
"image": "https://rickandmortyapi.com/api/character/avatar/17.jpeg",
"episode": ["https://rickandmortyapi.com/api/episode/3"],
"url": "https://rickandmortyapi.com/api/character/17",
"created": "2017-11-04T22:21:24.481Z"
}, {
"id": 18,
"name": "Antenna Morty",
"status": "Alive",
"species": "Human",
"type": "Human with antennae",
"gender": "Male",
"origin": {
"name": "unknown",
"url": ""
},
"location": {
"name": "Citadel of Ricks",
"url": "https://rickandmortyapi.com/api/location/3"
},
"image": "https://rickandmortyapi.com/api/character/avatar/18.jpeg",
"episode": ["https://rickandmortyapi.com/api/episode/10", "https://rickandmortyapi.com/api/episode/28"],
"url": "https://rickandmortyapi.com/api/character/18",
"created": "2017-11-04T22:25:29.008Z"
}, {
"id": 19,
"name": "Antenna Rick",
"status": "unknown",
"species": "Human",
"type": "Human with antennae",
"gender": "Male",
"origin": {
"name": "unknown",
"url": ""
},
"location": {
"name": "unknown",
"url": ""
},
"image": "https://rickandmortyapi.com/api/character/avatar/19.jpeg",
"episode": ["https://rickandmortyapi.com/api/episode/10"],
"url": "https://rickandmortyapi.com/api/character/19",
"created": "2017-11-04T22:28:13.756Z"
}, {
"id": 20,
"name": "Ants in my Eyes Johnson",
"status": "unknown",
"species": "Human",
"type": "Human with ants in his eyes",
"gender": "Male",
"origin": {
"name": "unknown",
"url": ""
},
"location": {
"name": "Interdimensional Cable",
"url": "https://rickandmortyapi.com/api/location/6"
},
"image": "https://rickandmortyapi.com/api/character/avatar/20.jpeg",
"episode": ["https://rickandmortyapi.com/api/episode/8"],
"url": "https://rickandmortyapi.com/api/character/20",
"created": "2017-11-04T22:34:53.659Z"
}]
Raw
script.js
function clonarPersonaje() {
// seleccionar tarjeta modelo
let modelo = document.querySelector(".modelo")
// crear una copia del modelo
let copia = modelo.cloneNode( true )
// retirar clase 'modelo' a las copias
copia.classList.remove("modelo")
// entregar copia para modificar datos después
return copia
}
function cargarDatos( tarjeta, datos ) {
// seleccionar elemento para dato "name" y cambiar dato con lo que viene de la db
tarjeta.querySelector(".nombre").innerHTML = datos.name
// cambiar dato de la especie
tarjeta.querySelector(".especie").innerHTML = datos.species
// cambiar dato del lugar de origen
tarjeta.querySelector(".lugar").innerHTML = datos.origin.name
// cambiar imagen
tarjeta.querySelector("img").setAttribute( "src", datos.image )
}
function cargarPersonajes() {
console.log( "personajes", personajes )
// seleccionar el contenedor de personajes
let contenedor = document.querySelector("#personajes")
let tarjetaPersonaje
for( let datosPersonaje of personajes ) {
console.log( datosPersonaje )
tarjetaPersonaje = clonarPersonaje()
cargarDatos( tarjetaPersonaje, datosPersonaje )
// insertar copia en el contenedor
contenedor.appendChild( tarjetaPersonaje )
}
}
cargarPersonajes()
let mensajeListo = "Rick and Morty"
console.log( mensajeListo )
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment