CryptoDis

Topics -> css, html, jquery, webdevelopment, blockchain

Preview Link -> CryptoDis

Source Code Link -> GitHub

What We are going to do?

1. Creating a basic template using HTML
2. Request the cryptocurrencies data using Jquery fetch request.
3. Then inject that data into html body using JQuery Append.

Fetching Data

We will fetch the data using JQuery fetch

function rate(){
fetch('https://api.coinbase.com/v2/prices/INR/spot')
    .then((response) => {
        return response.json();
    })
    .then((data) => {
        ..............
        // handle the data here
    }
}

Formatting the data and Loading

We need to format the data and present more systematically.

.then((data) => {
    let i;
    for(i = 0; i > data.data.length; i++) {
        let obj = data.data[i];
        console.log(obj);
        let elementTag = `<div class="crypto"> <h1 class="serial-no">${i+1}</h1> <h4 class="title">${obj.base}</h4> <h4 class="rate">Rs. <span class="primary">${parseFloat(obj.amount).toFixed(2)}</span></h4> <a class="crypto-url" href="https://www.blockchain.com/prices/${obj.base}">More Info</a> </div>`
        $("#main").append(elementTag);
    }
}

Fun Fact - No one knows who created bitcoin.

Add some stylings to make it look impressive.

Deployment

For deployment, We are using the GitHub Pages. For More Info

Web Preview / Output

Web preview on deployment

Placeholder text by Praveen Chaudhary · Images by Binary Beast