55 - Desafío 2: Precio del Bitcoin
Problema:
pagina.html
estilos.css
funciones.js
Ejecución de la página
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Prueba</title> <link rel="stylesheet" href="estilos.css"> </head> <body> <div id="cuadro"> <div>Precio Bitcoin</div> <div id="precio"></div> <div>Variación</div> <div id="variacion"></div> </div> <script src="funciones.js"></script> </body> </html>
#cuadro { display: flex; flex-direction: column; font-size: 2rem; text-align: center; max-width: 800px; margin: 0 auto; box-shadow: 0 5px 8px 4px rgba(0, 0, 0, .15); border-radius: 1rem; } #precio { font-size: 6rem; color: green; text-shadow: 0 0 10px green; } #variacion { font-size: 6rem; text-shadow: 0 0 10px lightgray; }
function recuperarPrecio() { fetch("https://api.coincap.io/v2/assets/bitcoin") .then(respuesta => respuesta.json()) .then(datos => { document.querySelector("#precio").innerHTML = parseInt(datos.data.priceUsd) if (parseFloat(datos.data.changePercent24Hr) > 0) { document.querySelector("#variacion").style.color = "green"; document.querySelector("#variacion").innerHTML = "↑" + parseFloat(datos.data.changePercent24Hr).toFixed(2) } else { document.querySelector("#variacion").style.color = "red"; document.querySelector("#variacion").innerHTML = "↓" + parseFloat(datos.data.changePercent24Hr).toFixed(2) } }) } recuperarPrecio() setInterval(recuperarPrecio, 5000)
No tiene disponible el navegador la capacidad de iframe
Retornar