Tutorial - Aprende a agregar el valor actual del Bitcoin en tu website solamente con Javascript con la Api de Coindesk.com - Bitcoin - Coindesk - API

Tecnología
  
Programación Web
  
Javascript
  
Desarrollo Web
  
Api Rest
    17 Enero, 2021   Regresar el blog
Compartir:

Hoy vamos a aprender a como consumir la Api que nos provee https://www.coindesk.com para poder agregar a nuestra página web el valor actual del Bitcoin

Para ello primero nos iremos a la web de coindesk  al siguiente link https://www.coindesk.com/coindesk-api


Nuestro Html quedaria de esta manera:


<head>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Oxygen:wght@300&display=swap" rel="stylesheet">
</head>
<body>
    
</body>


Nuestro css quedaria de esta manera:


*,
*::before,
*::after{
  box-sizing: border-box;
  margin: 0;

}

body {
  font-family: ´Oxygen´, sans-serif;
  font-weight: 700;
  color : #c00;
 
}

div {
    
    padding: 10px;
    background-color: #ededed;
}

span {
    font-size:.7em;
    padding-left:1em;
}

Y lo mas importante el JS :

async function main() {
  
    const result = await fetch(´https://api.coindesk.com/v1/bpi/currentprice.json´)
    
    const data = await result.json()
    
    const div = document.createElement(´div´)

    const price = data.bpi.USD.rate.split(´.´)

    const act = document.createElement(´span´)

    act.innerText = `Actualizado el ${data.time.updated}`

    div.innerText = `Bitcoin : ${price[0]} $`

    div.append(act)
    
    document.body.append(div)
    
  }
  
  main()

con esto ya tenemos listo el tutorial, ahora podrás tener en tu website el valor actual del bitcoin.


El ejemplo en vivo lo puedes ver ingresando en mi Pen https://codepen.io/jfdesousa7/pen/MWjLyXm


No olvides visitar mi web oficial TupaginaOnline


253 vistas
Compartir:


Autor
Jose Fuentes

- Web Developer -

 


0 COMENTARIO(S)
Contesta
Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *
Comentario *
Nombre *
Correo electrónico *
Sitio web

Articulos Relacionados
Articulos recientes

Desarrollos en venta

$ usd dólar 600