Crypto price tracker with JS

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 Free version.

HTML

We have to use two <select>. In…


This content originally appeared on DEV Community and was authored by Rohit Sharma

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 Free version.

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.

<!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

*{
    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.

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

btn.addEventListener('click',getPrice);

Now we'll write our getPrice() fuunction. We use AJAX for this project.

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.
Buy Me A Coffee


This content originally appeared on DEV Community and was authored by Rohit Sharma


Print Share Comment Cite Upload Translate Updates
APA

Rohit Sharma | Sciencx (2022-01-06T08:45:31+00:00) Crypto price tracker with JS. Retrieved from https://www.scien.cx/2022/01/06/crypto-price-tracker-with-js/

MLA
" » Crypto price tracker with JS." Rohit Sharma | Sciencx - Thursday January 6, 2022, https://www.scien.cx/2022/01/06/crypto-price-tracker-with-js/
HARVARD
Rohit Sharma | Sciencx Thursday January 6, 2022 » Crypto price tracker with JS., viewed ,<https://www.scien.cx/2022/01/06/crypto-price-tracker-with-js/>
VANCOUVER
Rohit Sharma | Sciencx - » Crypto price tracker with JS. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/01/06/crypto-price-tracker-with-js/
CHICAGO
" » Crypto price tracker with JS." Rohit Sharma | Sciencx - Accessed . https://www.scien.cx/2022/01/06/crypto-price-tracker-with-js/
IEEE
" » Crypto price tracker with JS." Rohit Sharma | Sciencx [Online]. Available: https://www.scien.cx/2022/01/06/crypto-price-tracker-with-js/. [Accessed: ]
rf:citation
» Crypto price tracker with JS | Rohit Sharma | Sciencx | https://www.scien.cx/2022/01/06/crypto-price-tracker-with-js/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.