Hu'n'Do

Un mash-up ce redă imagini de utilizatori fictivi și câini via 2 API-uri publice.

by Sabin Buraga

HTML

<div id="images"><span id="human"></span> vs <span id="dog"></span></div>
<div id="user-name"><span id="text"></span></div>

CSS

img {
  height: 100px;
}
#user-name {
  font-family: sans-serif;
}

JavaScript

// verificăm dacă avem succes (codul de stare e 2XX)
// pe baza unei promisiuni
function status(response) {
  if (response.status >= 200 && response.status < 300) {
    // cererea poate fi rezolvată
    return Promise.resolve(response)
  } else {
    // cererea a fost rejectată
    return Promise.reject(new Error(response.statusText))
  }
}

// generăm în cadrul unui element identificat prin 'id'
// elementul <img /> pentru a include URL-ul fotografiei 
// (parametrul 'url' dat funcției) ce reprezintă un animal
function genImg(url, id) {
  const elem = document.createElement('img');
  elem.setAttribute('src', url);
  document.getElementById(id).appendChild(elem);
}

// generăm în cadrul unui element identificat prin 'id'
// elementul <div> pentru a include un sir de caractere 
// (parametrul 'text' dat funcției)
function genDiv(text, id) {
  const elem = document.createElement('div');
  elem.textContent = text;
  document.getElementById(id).appendChild(elem);
}

const URLDOGS = 'https://dog.ceo/api/breeds/image/random';
const URLUSER = 'https://randomuser.me/api/';

// folosim Dog API pentru a obține o imagine aleatorie
// a unui câine
fetch(URLDOGS)
  .then(status) // datele au fost recepționate cu succes?
  .then(response => response.json())
  .then(json => {
    // procesăm datele JSON primite...
    // proprietatea 'message' stochează URL-ul imaginii câinelui
    genImg(json.message, 'dog');
  })
  .catch(error => { // redăm eroarea survenită
    document.getElementById('dog').textContent = error;
  });

// invocăm randomuser.me API pentru a obține 
// date despre un utilizator fictiv generat algoritmic
fetch(URLUSER)
  .then(status) // datele au fost recepționate cu succes?
  .then(response => response.json())
  .then(json => {
    // procesăm datele JSON primite...
    // preluăm URL-ul imaginii persoanei fictive
    genImg(json.results[0].picture.medium, 'human');
    // obținem și identitatea
    genDiv(json.results[0].name.title + ' ' + 
     ...