Crypto price tracker with JS
Tags: javascript, beginners, webdev, tutorial
Published: 2022-01-06 08:45:31

Hello Everyone! Today we are going to create a website which gives us current price of any crypto currency listed on coingecko. For this project we are going to use [Coingecko API](https://www.coingecko.com/en/api) Free version. 

{% youtube UED-ytfLcwI %}

##HTML
We have to use two `<select>`. In the first `<select>` we create some `<options>`,which user select to get current price of Cryptocurrency(for example: bitcoin, ethereum etc.) and in the second `<select>` we create `<options>` for currency (example: usd, inr etc.)

We also need to create a button, `onclick` we call our API.

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CoinRate</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div id="header">
            <h1>CoinRate</h1>
        </div>
        <div id="inputs">
            <div id="selectCrypto">
                <select id="crypto">
                    <option>bitcoin</option>
                    <option>ethereum</option>
                    <option>solana</option>
                    <option>aave</option>
                </select>
            </div>
            <div id="btn">
                <button>Check Price</button>
            </div>
            <div id="selectCurrency">
                <select id="currency">
                    <option>usd</option>
                    <option>inr</option>
                    
                </select>
            </div>
            
        </div>
        <div id="outputs"> 
            <br>
            <div id=price>Price</div>
        </div>
    </div>
    <footer>Copyright &copy; CoinRate (Coingecko API) <a href='https://www.freepik.com/vectors/logo'>Logo vector created by freepik - www.freepik.com</a> </footer>
    <script src="main.js"></script>
</body>
</html>
```

##CSS
You can style your webpage as according to you. My CSS code for this project is given below

```css
*{
    margin: 0;
    padding: 0;
    color: #ffff;
}
body{
    height: 100vh;
    width: 100vw;
    background: url(/5499459.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
.container{
    display: grid;
    height: 90vh;
    grid-template-columns: 25% 50% 25%;
    grid-template-rows: 25% 30% 20% 25%;
    grid-template-areas:
    "header header header"
    ". inputs ."
    ". outputs ."
    "footer footer footer";
}
#header{
    grid-area: header;
    display: grid;
    place-items: center;
}
footer{
    display: grid;
    place-items: center;
}
#inputs{
    grid-area:inputs;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    
    grid-template-rows: 1fr 1fr;
    grid-template-areas: 
    "selectCrypto selectCurrency"
    "btn btn";
    place-items: center;
}
#btn{
    grid-area: btn;
    
}
button{
    background: transparent;
    border: 2px solid #9eeaf0;
    font-size: 1.5rem;
    border-radius: 2em;
}
button:hover{
    background: #9eeaf0;
    color: #333;
}

#selectCrypto{
    grid-area: selectCrypto;
}
#selectCurrency{
    grid-area: selectCurrency;
}
#outputs{
    grid-area:outputs;
    display: grid;
    place-items: center;
}
#inpCrypto{
    margin-top: 1rem;
    border: 1px solid rgb(21, 236, 243);
    width: max-content;
}
#inpCrypto{
    margin-top: 1rem;
    border: 1px solid rgb(21, 236, 243);
    width: max-content;
    
}
#price{
    margin-top: 1rem;
    border: 1px solid rgb(21, 236, 243);
    width: max-content;
    z-index: 1;
    display: none;
    font-size: 1.2rem;
    background: rgb(215,215,215);
    color: black;
    
}
select{
    background: transparent;
    width: 5rem;
    border: 2px solid #9eeaf0;
    color: black;
    border-radius: 2em;
    font-size: 1em;
    height: 2em;
    width: 5em;
}
select:hover{
    background: #9eeaf0;
}
option{
    
    color: black;
}
```
##JavaScript

This is the most important part of this project.
Grab the all important elements.

```javascript
let price = document.getElementById('price');
let btn = document.getElementById('btn');
let cryptoInp = document.querySelector('#crypto');
let currencyInp = document.querySelector('#currency');
``` 
 Now add an event listener to `btn` which fire `getPrice()` function
```javascript
btn.addEventListener('click',getPrice);
```

Now we'll write our `getPrice()` fuunction. We use AJAX for this project.
```javascript
function getPrice() {
    let crypto = cryptoInp.value;
    let currency = currencyInp.value;
    let xhr = new XMLHttpRequest();
    xhr.open('GET','https://api.coingecko.com/api/v3/simple/price?ids='+crypto+'&vs_currencies='+currency);

    xhr.onload = function(){
        if (this.status == 200) {
            data =  JSON.parse(this.responseText);
            price.innerHTML = "Current Price is "+data[crypto][currency]+" "+currency;
            price.style.display = 'block';
            
        }else{
            price.innerHTML = 'Error'
        }

    }
    xhr.send();
    
}
```
I hope you loved it. If  yes , then drop a like and support my work.
<a href="https://www.buymeacoffee.com/devrohit" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-blue.png" alt="Buy Me A Coffee" height="41" width="174"></a>