Bitcoin Ticker with HTML, CSS, and JS
HTML
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
</head>
<body>
</div>
<div id="ticker_window">
<h1>Bitcoin Ticker</h1>
<table id="day_and_time">
<tr>
<td>
<p id="date"></p>
</td>
<td>
<p id="clock"></p>
</td>
</tr>
</table>
<p id="exchange">Exchange:<span class="exchange"> Coinbase</span></p>
<p class="status">Websocket Status: <span class="status" id="status">Connecting...</span></p>
<div style="padding-left: 5px;">
<ul id="ticker">
</ul>
</div>
</div>
</body>
</html>
CSS
html {
height: 100%;
background: #1D1F20;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
h1 {
position: relative;
Font-family: Montserrat;
font-weight: 350;
font-size: 35px;
margin: 0;
}
p {
position: relative;
Font-family: Montserrat;
}
#day_and_time {
position: relative;
border-spacing: 0px;
padding: 0;
margin: 0;
}
#ticker_window {
position: relative;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: auto;
width: 300px;
background: #FFF;
padding: 1em;
margin: 6em auto;
border: 7px solid #393939;
border-radius: 25px;
box-shadow: 0px 30px 60px -5px #000;
}
.exchange {
color: #1D75B7;
padding: 0;
margin: 0;
}
#status,
#exchange {
padding: 0;
margin: 0;
}
#ticker {
width: 200px;
max-height: 100px;
overflow: auto;
list-style: none;
font-size: 0.95rem;
direction: rtl;
}
.tick {
margin: auto;
text-align: center;
}
li {
width: 175px;
list-style-type: none;
text-align: left;
}
li.sell {
background-color: rgb(105, 199, 115);
}
li.buy {
background-color: rgb(199, 105, 105);
}
JAVASCRIPT
$(document).ready(function() {
var socket = new WebSocket("wss://ws-feed.gdax.com");
socket.onopen = function() {
var msg = {
type: "subscribe",
product_id: "BTC-USD"
};
socket.send(JSON.stringify(msg));
console.log(msg);
$("#status").text("Connected").css("color", "#1E8F1E");
};
socket.onmessage = function(event) {
var msg = JSON.parse(event.data);
if (msg["type"] == "match") {
var price = parseFloat(msg["price"]).toFixed(2);
var sign;
if (msg["side"] == "sell") {
sign = "▲\t";
} else {
sign = " ▼\t";
}
var time = new Date();
var hours = time.getHours();
var minutes = time.getMinutes();
var seconds = time.getSeconds();
if (hours > 12) {
hours = hours - 12;
} else if (hours == 0) {
hours = 12;
}
if (hours < 10) {
hours = "0" + hours;
}
if (minutes < 10) {
minutes = "0" + minutes;
}
if (seconds < 10) {
seconds = "0" + seconds;
}
var fulltime = hours + ":" + minutes + ":" + seconds;
var side = '"' + msg["side"] + '"';
var price_list_item =
"<li class=" +
side +
"><p class='tick'>" +
sign +
" " +
price +
" - " +
fulltime +
"</p></li>";
$("#ticker").prepend(price_list_item);
}
};
function sendText() {
var msg = {
type: "subscribe",
product_id: "BTC-USD"
};
socket.send(JSON.stringify(msg));
}
});
$(document).ready(function() {
function showDate() {
var time = new Date();
var date = time.getDate();
var year = time.getFullYear();
var monthArray = new Array();
monthArray[0] = "January";
monthArray[1] = "February";
monthArray[2] = "March";
monthArray[3] = "April";
monthArray[4] = "May";
monthArray[5] = "June";
monthArray[6] = "July";
monthArray[7] = "August";
monthArray[8] = "September";
monthArray[9] = "October";
monthArray[10] = "November";
monthArray[11] = "December";
month = monthArray[time.getMonth()];
var dateDiv = document.getElementById("date");
dateDiv.innerText = month + " " + date + ", " + year;
}
function showTime() {
var time = new Date();
var hours = time.getHours();
var minutes = time.getMinutes();
var seconds = time.getSeconds();
// format numbers
if (hours < 10) {
hours = "0" + hours;
}
if (minutes < 10) {
minutes = "0" + minutes;
}
if (seconds < 10) {
seconds = "0" + seconds;
}
if (hours == 0) {
showDay();
hours = 12;
}
var clockDiv = document.getElementById("clock");
clockDiv.innerText = hours + ":" + minutes + ":" + seconds;
}
showDate();
setInterval(showTime, 1);
});
2 Responses
As we delve deeper into this realm, be prepared to witness a convergence <a href= https://helpbitcoin.fun/coin/hawaii-dollar-coin-worth.html>of</a> two seemingly disparate worlds – the immutable realm <a href= https://helpbitcoin.fun/from/how-to-send-money-from-paypal-to-bitcoin-wallet.html>of</a> technology and the age-old pursuit <a href= https://cryptolive.fun/nano/zcash-difficulty-adjustment.html>of</a> material wealth. Digital extraction encompasses a fascinating fusion <a href= https://helpbitcoin.fun/mining/mining-hashrate-gpu.html>of</a> cryptography, computer science, and data analysis, empowering visionaries and entrepreneurs alike to unlock the footholds <a href= https://bitcoinlove.fun/pool/prop-pool-mining.html>of</a> uncharted territories.
Source: https://ecobt.ru or <a href= https://helpbitcoin.fun/token/trx-token-exchange.html>here</a>.
Ripple, unlike many other cryptocurrencies, was not created to be a direct replacement for traditional fiat currencies. Instead, it serves as a digital intermediary, facilitating fast and secure cross-border transactions. This makes it an attractive solution for banks and other financial institutions looking to streamline their payment processes.
Source: https://cryptolog.fun or here https://bitcoinlove.fun/pool/beam-pools.html.