Created
August 31, 2022 15:21
-
-
Save furenku/804d18c96e6dd096ba95e55e97d1b41c to your computer and use it in GitHub Desktop.
characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- ! --> | |
| <!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"> | |
| <title>Consulta API</title> | |
| <!-- link --> | |
| <link rel="stylesheet" href="estilos.css"> | |
| </head> | |
| <body> | |
| <!-- section#characters --> | |
| <section id="characters"> | |
| <!-- article.character.model --> | |
| <article class="character model"> | |
| <!-- div.image --> | |
| <div class="image"> | |
| <!-- img --> | |
| <img src="https://fakeimg.pl/300x300" alt=""> | |
| </div> | |
| <!-- .text --> | |
| <div class="text"> | |
| <!-- h3.name --> | |
| <h3 class="name"> | |
| Nombre de personaje | |
| </h3> | |
| <!-- p.nickname --> | |
| <p class="nickname"> | |
| Apodo | |
| </p> | |
| </div> | |
| </article> | |
| </section> | |
| <!-- script --> | |
| <script src="codigo.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const apiUrl = "https://breakingbadapi.com/api/" | |
| function doQuery( url, displayFunction ){ | |
| // mandamos una solicitud y obtenemos una promesa | |
| const request = fetch( apiUrl + url ) | |
| // esperar a que resuelva la promesa | |
| request.then( function(response) { | |
| // info sobre nuestra respuesta | |
| console.log("response", response) | |
| // extraer 'cuerpo' de respuesta | |
| response.json().then( function(data) { | |
| console.log("data", data) | |
| if( typeof displayFunction == "function" ) { | |
| displayFunction( data ) | |
| } | |
| }) | |
| }) | |
| console.log( "request", request ) | |
| } | |
| function formatCharacter( character ) { | |
| return { | |
| id: character.char_id, | |
| name: character.name, | |
| nickname: character.nickname, | |
| image: character.img | |
| } | |
| } | |
| function displayCharacters( data ) { | |
| console.log("display", data); | |
| const formattedCharacters = data.map( formatCharacter ) | |
| formattedCharacters.forEach( createAppendCharacter ) | |
| } | |
| function openElement( event ) { | |
| const el = event.target | |
| console.log( "id", el.getAttribute("data-id") ) | |
| } | |
| function setupInteraction( element ) { | |
| element.addEventListener("click", openElement ) | |
| } | |
| function createAppendCharacter( character ){ | |
| const container = document.querySelector("#characters") | |
| const characterBox = createCharacterHTML(character) | |
| setupInteraction( characterBox ) | |
| container.append(characterBox) | |
| } | |
| function createCharacterHTML( character ) { | |
| const model = document.querySelector(".character.model") | |
| const characterBox = model.cloneNode( true ) | |
| characterBox.classList.remove("model") | |
| const nameBox = characterBox.querySelector(".name") | |
| const nicknameBox = characterBox.querySelector(".nickname") | |
| const img = characterBox.querySelector(".image img") | |
| nameBox.innerHTML = character.name | |
| nicknameBox.innerHTML = character.nickname | |
| img.setAttribute("src", character.image ) | |
| characterBox.setAttribute("data-id", character.id ) | |
| // characterBox.append( textBox ) | |
| // characterBox.append( nicknameBox ) | |
| characterBox.classList.add("character") | |
| return characterBox | |
| } | |
| doQuery("characters", displayCharacters ) | |
| console.log("Consulta API") |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .character { | |
| /* w18rem */ | |
| width: 18rem; | |
| /* m1rem */ | |
| margin: 1rem; | |
| /* p1rem | |
| padding: 1rem; */ | |
| /* bgc */ | |
| background-color: #fff; | |
| /* curp */ | |
| cursor: pointer; | |
| } | |
| .character * { | |
| /* pev */ | |
| pointer-events: none; | |
| } | |
| .character .image { | |
| /* w100p */ | |
| width: 100%; | |
| /* h18rem */ | |
| height: 18rem; | |
| } | |
| .character img { | |
| /* w100p */ | |
| width: 100%; | |
| /* h100p */ | |
| height: 100%; | |
| /* obf */ | |
| object-fit: cover; | |
| } | |
| .character .text { | |
| /* p1rem */ | |
| padding: 1rem; | |
| } | |
| .character .name { | |
| /* mt0 */ | |
| margin-top: 0; | |
| } | |
| .character .nickname { | |
| /* mb0 */ | |
| margin-bottom: 0; | |
| font-style: italic; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment