Introduction:
<p dir="auto">Hey Steemit,
<p dir="auto"><span>Thank your for letting me be apart of the Steemit community, I just joined today, July 9, 2017. Over the last couple of days i have been viewing the curated content on this website because I wanted to figure out what type of content, I would create and promote so one day I can be very successful on Steemit. I finally now have decided to post different types of content ranging from Bitcoin, music, sports to programming. I found Steemit because of <a href="/@trevonjb">@trevonjb and other youtube mentors. But today I will walk you through the process of having a clean website to show the current Bitcoin Price.
<hr />
<h1>Demo
<p dir="auto"><span><a href="https://codepen.io/johnskdev/pen/VPZWYz" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://codepen.io/johnskdev/pen/VPZWYz
<p dir="auto"><img src="https://images.hive.blog/768x0/https://steemitimages.com/DQmdAL8aZ5aYEiWqprAtdTdvNDX7CP1iS4ARybZWBmanna4/Screen%20Shot%202017-07-09%20at%2012.49.44%20AM.png" alt="Screen Shot 2017-07-09 at 12.49.44 AM.png" srcset="https://images.hive.blog/768x0/https://steemitimages.com/DQmdAL8aZ5aYEiWqprAtdTdvNDX7CP1iS4ARybZWBmanna4/Screen%20Shot%202017-07-09%20at%2012.49.44%20AM.png 1x, https://images.hive.blog/1536x0/https://steemitimages.com/DQmdAL8aZ5aYEiWqprAtdTdvNDX7CP1iS4ARybZWBmanna4/Screen%20Shot%202017-07-09%20at%2012.49.44%20AM.png 2x" />
<ul>
<li><span>The first step is to go to <a href="https://codepen.io/johnskdev/pen/VPZWYz" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://codepen.io/johnskdev/pen/VPZWYz.
<p dir="auto"><img src="https://images.hive.blog/768x0/https://steemitimages.com/DQmePS6a8t3Da7YS1U45jkNKWjWbZg6AGL9YLrBW46Qc3j5/Screen%20Shot%202017-07-09%20at%2012.50.40%20AM.png" alt="Screen Shot 2017-07-09 at 12.50.40 AM.png" srcset="https://images.hive.blog/768x0/https://steemitimages.com/DQmePS6a8t3Da7YS1U45jkNKWjWbZg6AGL9YLrBW46Qc3j5/Screen%20Shot%202017-07-09%20at%2012.50.40%20AM.png 1x, https://images.hive.blog/1536x0/https://steemitimages.com/DQmePS6a8t3Da7YS1U45jkNKWjWbZg6AGL9YLrBW46Qc3j5/Screen%20Shot%202017-07-09%20at%2012.50.40%20AM.png 2x" />
<ul>
<li><p dir="auto">Then click on the button in the bottom right corner which says export and then click on export to zip.<br />
<img src="https://images.hive.blog/768x0/https://steemitimages.com/DQmW3qtAX5pU233NJGNYmq4TBkiEZr5c9wq9PFj85ioSeaL/Screen%20Shot%202017-07-09%20at%2012.50.01%20AM.png" alt="Screen Shot 2017-07-09 at 12.50.01 AM.png" srcset="https://images.hive.blog/768x0/https://steemitimages.com/DQmW3qtAX5pU233NJGNYmq4TBkiEZr5c9wq9PFj85ioSeaL/Screen%20Shot%202017-07-09%20at%2012.50.01%20AM.png 1x, https://images.hive.blog/1536x0/https://steemitimages.com/DQmW3qtAX5pU233NJGNYmq4TBkiEZr5c9wq9PFj85ioSeaL/Screen%20Shot%202017-07-09%20at%2012.50.01%20AM.png 2x" />
<li><p dir="auto">Download and extract the zip file and click on the index.html file. You now have access to a Bitcoin Price ticker.. All the time.
<p dir="auto"><img src="https://images.hive.blog/768x0/https://steemitimages.com/DQmVY7K5RH9MtVTDTjgKhv1qimS6eS3XgC6qQcoyytd4fgp/Screen%20Shot%202017-07-09%20at%2012.50.19%20AM.png" alt="Screen Shot 2017-07-09 at 12.50.19 AM.png" srcset="https://images.hive.blog/768x0/https://steemitimages.com/DQmVY7K5RH9MtVTDTjgKhv1qimS6eS3XgC6qQcoyytd4fgp/Screen%20Shot%202017-07-09%20at%2012.50.19%20AM.png 1x, https://images.hive.blog/1536x0/https://steemitimages.com/DQmVY7K5RH9MtVTDTjgKhv1qimS6eS3XgC6qQcoyytd4fgp/Screen%20Shot%202017-07-09%20at%2012.50.19%20AM.png 2x" />
<h1>Bonus Code Explanation :
<pre><code>// This assumes you already have jQuery Installed.
$(document).ready(function() {
// When the page loads execute this code
$.getJSON("https://blockchain.info/ticker?cors=true", function(json) {
//Grab BlockChain's API information
var html = "";
var usd = "";
var gbp = "";
var aud = "";
// set default values to be used in the function
html = '<table class="table"><thead><tr><th>Currency</th><th>Price</th></thead><tbody>';
// Create a string that builds an html table
jQuery.each(json, function(key, val) {
html += "<tr><td><strong>" + key + "</strong></td><td>" + val["last"] + "</td></tr>"
// For Each item in the jSon create a new row in the table
if (key == "USD"){
usd += val["last"] + " " + key
// If the key is USD set the value of USD
}
else if (key == "GBP"){
gbp += val["last"] + " " + key
// If the key is GBP set the value of GBP
}
else if (key == "AUD"){
aud += val["last"] + " " + key
// If the key is AUD set the value of AUD
}
});
html += "</tbody></table>";
// End the table by adding to the end of the html string.
$(".prices").html(html);
$(".usd-price").html(usd);
$(".gbp-price").html(gbp);
$(".aud-price").html(aud);
// Set prices
If this post was helpful please drop a comment below.
});
});
<h1>Vist My Website:
<p dir="auto"><span><a href="http://mildfun.com" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">http://mildfun.com
<h1>Help Me
<p dir="auto">BTC: 15ZAH6xfr8nWDuxVPrmuDBW7hJg2o5RWiX
<p dir="auto"><a href="https://www.999dice.com/?100059511" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link"> 999dice.com | 99.9% Dice Payout | Earn BTC/Doge/LTC with 50/50 Referral Program | Play & Chat