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;
});
1 Comments
not working
ReplyDeleteap.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)