HEADER ADS 728X90

How To Show Live Price of CryptoCurrency in website using HTML CSS and Javascript || BY CodePrime

cryptocurrency,bitcoin price prediction,how to analysis crypto coin price,how to predict crypto coin price tamil,how to use binance,how to buy shiba inu coin,bitcoin price,cryptocurrency news,how to get new coins,how to make own cryptocurrency,how to know when a coin will pump on binance,how to trade cryptocurrency,how to find cryptocurrency gems,how to find recently added coin on coinmarketcap,how to make money with cryptocurrency,cryptocurrency,javascript,how to,how to show cryptocurrency price data into website using php,display cryptocurrency price on website,how to make cryptocurrency website,how to make your own cryptocurrency coin,cryptocurrency price data into website,show cryptocurrency price data,cryptocurrency space,how to make a cryptocurrency,website,how to bitcoin price,javascript tutorial,create cryptocurrency coin,cryptocurrency website design,javascript,cryptocurrency,how to create a website using html and css,how to create complete website using html and css,display cryptocurrency price on website,create we accept bitcoin page using html css javascript,javascript tutorial,cryptocurrency price data into website,how to make website using javascript,how to show cryptocurrency price data into website using php,how to create a website using html,cryptocurrency space,currency converter using javascript,codeprime, coding tutorial, how to learn coding easy way to learn coding

Hi dear welcome to "CodePrime" Blog . In this post we are going to learn How To Show live Cryptocurrency Price. First Creat A index.html file Copy This HTML CODE and pest it one your code editor. 2ndly creat style.css file Then Copy The CSS CODE and pest it. 3rdly creat ap.js file Then Copy The Javascript CODE and pest it. then open the index.html file with your browser.

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>live Coin Price</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

    <div class="container">
        <div class="coin-price">
            <div class="logo"><img src="https://blogger.googleusercontent.com/img/a/AVvXsEi32rDKQR2Swi7YfHjDzyZUBGEmxTz77OClnm24SZl7kWuls7fsVCIfAObY_JRJIReQnBWZIPSVfDLSqDvqeu4CCXCoNQIoUGK-OSDUGMtDJFxh9vmU6WGajIgXH4CsR_-sXU0qWbyJTJl7N0BSTB8HcAGSpCJ54G1daZPnU6h2oANo2CTGsbHCoaGJHQ" ></div>
            <div>
                <h1>$<span id="bitcoin"></span></h1>
                <h1>Bitcoin</h1>
            </div>
        </div>
        <div class="coin-price">
            <div class="logo"><img src="https://blogger.googleusercontent.com/img/a/AVvXsEhrUFoHC68rLHQYMV41awqGtoeU6qI-CkSVmcYK-KBCrOvL-jzwLOx8pN-5B8aALsHh1Zc9mmDm8LVQSSpdpsw0v6vrJsv4r9_lv0ic5aYbogc3i3h9mG6ZGMc7g9_cGSRh_soaKmXtpMEOxBFIsmiTa_wticu9T07MbqQ42J9NwowHp8tn8OUIBlhjqA" ></div>
            <div>
                <h1>$<span id="litecoin"></span></h1>
                <h1>Litecoin</h1>
            </div>
        </div>
       
        <div class="coin-price">
            <div class="logo"><img src="https://blogger.googleusercontent.com/img/a/AVvXsEgfcodOJm7ZIXw2kiqdo5abN4cUvFYgyqpKt91zHI8710ltPK5Ny_S5X93w9LSDsF5jW61frn3C8a_8w2GXu4bf0clzxuJljoQ8n6az5EI5zQOcl5W2LScP-1-41NQwPW5A3JWT9EwejtOnHsd3q2-llUsJJQ3Z74v_2FOPn0TrI2529NS9_hmFbvModw" ></div>
            <div>
                <h1>$<span id="ethereum"></span></h1>
                <h1>Ethereum</h1>
            </div>
        </div>
        <div class="coin-price">
            <div class="logo"><img src="https://blogger.googleusercontent.com/img/a/AVvXsEj9YzGIFUSMpRoWE4IjGl_o2zpdPkvtUS6jzIgZWEWl7ztYyV20oXu80A52v0R_nXpt_qXVBzxnfse2_pfeIbVHwQSR3oLqqAyMqVqnzJpdbSCBHA2b_zlheiLY3Bb0PYCEXQny7q-FnGE01ZtxVFVC8DbLWW-ZC1PC-gaqL7IC7ZfRxFOZufcv8lcY1g" ></div>
            <div>
                <h1>$<span id="dogecoin"></span></h1>
                <h1>Dogecoin</h1>
            </div>
        </div>

    </div>
   
    <script src="ap.js"></script>
</body>
</html>

CSS

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}
.container{
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
}
.container .coin-price{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 20px;
    border-radius: 5px;
    box-shadow: 0 0 3px #ccc;
    margin: 7px;
}

.container .coin-price .logo{
    width: 70px;
    margin-right: 10px;
}
.container .coin-price .logo img{
    width: 100%;
}
.container .coin-price div{
    display: block;
}
.container .coin-price div h1{
    font-size: 20px;
}


Javascript


var btc = document.getElementById("bitcoin");
var ltc = document.getElementById("litecoin");
var eth = document.getElementById("ethereum");
var doge = document.getElementById("dogecoin");

var liveprice = {
    "async": true,
    "scroosDomain": true,
    "url": "https://api.coingecko.com/api/v3/simple/price?ids=bitcoin%2Clitecoin%2Cethereum%2Cdogecoin&vs_currencies=usd",

    "method": "GET",
    "headers": {}
}

$.ajax(liveprice).done(function (response){
    btc.innerHTML = response.bitcoin.usd;
    ltc.innerHTML = response.litecoin.usd;
    eth.innerHTML = response.ethereum.usd;
    doge.innerHTML = response.dogecoin.usd;

});

Youtube Tutorial

FLOW US ON SOCIAL MEDIA

Post a Comment

1 Comments

  1. not working

    ap.js:16 Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')
    at Object. (ap.js:16:19)
    at c (jquery-3.6.0.min.js:2:28327)
    at Object.fireWith [as resolveWith] (jquery-3.6.0.min.js:2:29072)
    at l (jquery-3.6.0.min.js:2:79901)
    at XMLHttpRequest. (jquery-3.6.0.min.js:2:82355)

    ReplyDelete

Join Telegram