En esta api:
https://rickandmortyapi.com/documentation
Nos dan información acerca de los capítulos de la estupenda serie Rick y Morty.
Vamos a crear una página en la que tengamos un selector con todas las especies que aparecen en la serie y todas las localizaciones y cuando seleccionemos una u otra (o las dos) nos aparezcan las imágenes de los personajes que son de esa especie o de esa localización (o las dos).
<div id="contenedor" class="container"> <button id="empezar" class="btn btn-success">Empezar</button> <p id="mensaje"></p> <button id="carta" class="btn btn-success">Sacar una carta</button> <button id="carta5" class="btn btn-success">Sacar cinco cartas</button> <div id="cartas"></div> </div> <script src="js/cartas.js"></script>
document.getElementById('empezar').addEventListener('click', empezar)
document.getElementById('carta').addEventListener('click', () => {
cartas(1)
})
document.getElementById('carta5').addEventListener('click', () => {
cartas(5)
})
let baraja
function empezar () {
fetch('https://deckofcardsapi.com/api/deck/new/shuffle/?deck_count=1')
.then(response => response.json())
.then(json => {
console.log(json)
baraja = json.deck_id
document.getElementById('mensaje').innerHTML =
'Tienes la baraja: ' + baraja
})
.catch(err => {
console.log('Error: ', err)
})
}
function cartas (num) {
fetch('https://deckofcardsapi.com/api/deck/' + baraja + '/draw/?count=' + num)
.then(response => response.json())
.then(json => {
console.log(json)
for (let i = 0; i < json.cards.length; i++) {
const imagen = document.createElement('img')
imagen.src = json.cards[i].image
document.getElementById('cartas').appendChild(imagen)
}
})
.catch(err => {
console.log('Error: ', err)
})
}
<div id="contenedor" class="container "> <button id="recuperar" class="btn btn-success">Recuperar</button> <div id="usuarios"></div> </div> <script src="js/test.js"></script>
document.getElementById('recuperar').addEventListener('click', recuperar)
function recuperar () {
fetch('https://jsonplaceholder.typicode.com/users')
.then(function (response) {
return response.text()
})
.then(function (html) {
console.log(html)
const resultado = JSON.parse(html)
console.log(resultado)
for (let i = 0; i < resultado.length; i++) {
const usuario = document.createElement('p')
usuario.innerHTML = resultado[i].name
document.getElementById('usuarios').appendChild(usuario)
}
})
.catch(function (err) {
console.log('Error: ', err)
})
}
<div id="contenedor" class="container "> <button id="empezar" class="btn btn-success">Empezar</button> <p id="mensaje"></p> <button id="carta" class="btn btn-success">Sacar una carta</button> <button id="carta5" class="btn btn-success">Sacar cinco cartas</button> <div id="cartas"></div> </div> <script src="js/test.js"></script>
document.getElementById('empezar').addEventListener('click', empezar)
document.getElementById('carta').addEventListener('click', carta)
document.getElementById('carta5').addEventListener('click', cartas)
let baraja
function carta () {
fetch('https://deckofcardsapi.com/api/deck/' + baraja + '/draw/?count=1')
.then(function (response) {
return response.text()
})
.then(function (html) {
console.log(html)
const resultado = JSON.parse(html)
console.log(resultado)
const imagen = document.createElement('img')
imagen.src = resultado.cards[0].image
document.getElementById('cartas').appendChild(imagen)
})
.catch(function (err) {
console.log('Error: ', err)
})
}
function empezar () {
fetch('https://deckofcardsapi.com/api/deck/new/shuffle/?deck_count=1')
.then(function (response) {
return response.text()
})
.then(function (html) {
console.log(html)
const resultado = JSON.parse(html)
console.log(resultado)
baraja = resultado.deck_id
document.getElementById('mensaje').innerHTML = 'Tienes la baraja: ' + baraja
})
.catch(function (err) {
console.log('Error: ', err)
})
}
function cartas () {
fetch('https://deckofcardsapi.com/api/deck/' + baraja + '/draw/?count=5')
.then(function (response) {
return response.text()
})
.then(function (html) {
const resultado = JSON.parse(html)
for (let i = 0; i < resultado.cards.length; i++) {
const imagen = document.createElement('img')
imagen.src = resultado.cards[i].image
document.getElementById('cartas').appendChild(imagen)
}
})
.catch(function (err) {
console.log('Error: ', err)
})
}
<div id="contenedor" class="container "> <h1>Hoy el bitcoin está a <span id="cotizacion"></span></h1> Cuantos bitcoins tienes: <input type="number" id="bitcoins" value="0"> <button id="calcular">Calcular</button> <h3>Tienes: <span id="cartera"></span> €</h3> </div> <script src="js/test.js"></script>
document.getElementById('calcular').addEventListener('click', calcular)
function calcular () {
fetch('https://api.coindesk.com/v1/bpi/currentprice.json')
.then(function (response) { // Si tengo respuesta
return response.text() // El html de la página me lo pasas al siguiente then
})
.then(function (html) { // Dentro de html yo tengo la respuesta de la página
console.log(html)
const objeto = JSON.parse(html)
console.log(objeto)
console.log(objeto.bpi.EUR.rate)
const cantidad = parseFloat(document.getElementById('bitcoins').value)
document.getElementById('cotizacion').innerHTML = objeto.bpi.EUR.rate
document.getElementById('cartera').innerHTML = objeto.bpi.EUR.rate_float * cantidad
})
.catch(function (err) {
console.log('Error: ', err)
})
}
<div id="contenedor" class="container "> <img id="imagen" src="" width="300"> <video id="video" controls src=""> </video> </div> <script src="js/test.js"></script>
fetch('https://random.dog/woof.json?ref=apilist.fun')
.then(function (response) { // Si tengo respuesta
console.log(response)
return response.text() // El html de la página me lo pasas al siguiente then
})
.then(function (html) { // Dentro de html yo tengo la respuesta de la página
console.log(html)
const perrito = JSON.parse(html)
console.log(perrito)
// Solo me interesa la url del perrito
const url = perrito.url
// Obtengo la extensión del archivo
const extension = url.split('.').pop()
// SI es vídeo lo pongo en el vídeo y oculto la imagen y viceversa
if (extension == 'mp4') {
const video = document.getElementById('video')
video.src = url
document.getElementById('imagen').style.display = 'none'
} else {
document.getElementById('imagen').src = url
document.getElementById('video').style.display = 'none'
}
})
.catch(function (err) {
console.log('Error: ', err)
})
<script>
fetch('https://deckofcardsapi.com/api/deck/new/shuffle/')
.then(
function (response) {
console.log(response);
if (response.status !== 200) {
console.log('Looks like there was a problem. Status Code: ' +
response.status);
return;
}
// Examine the text in the response
response.json().then(function (data) {
console.log(data);
});
}
)
.catch(function (err) {
console.log('Fetch Error :-S', err);
});
fetch('https://deckofcardsapi.com/api/deck/new/shuffle/')
.then(
function (response) {
return response.json()
// Examine the text in the response
}
).then(function (data) {
console.log(data);
})
.catch(function (err) {
console.log('Fetch Error :-S', err);
});
fetch('https://deckofcardsapi.com/api/deck/new/shuffle/')
.then(response => response.json())
.then(data => console.log(data))
.catch(function (err) {
console.log('Fetch Error :-S', err);
});
fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
body: JSON.stringify({
title: 'foo',
body: 'bar',
userId: 1
}),
headers: {
"Content-type": "application/json; charset=UTF-8"
}
})
.then(response => response.json())
.then(json => console.log(json))
let data = {
title: 'foo',
body: 'bar',
userId: 1
};
let params = {
method: 'POST',
body: JSON.stringify(data),
headers: {
"Content-type": "application/json; charset=UTF-8"
}
};
fetch('https://jsonplaceholder.typicode.com/posts',params)
.then(response => response.json())
.then(json => console.log(json))
</script>