KODOWANIE -widget

Widget

Poniżej kod do stworzenia widgeta tak jak na filmie. Wszelkie ikonki oraz tło należy pozyskać samodzielnie . Pamiętajcie również o strukturze plików  wprojekcie

 

HTML

 

<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>widget</title>

<link rel=”stylesheet” href=”style.css”>
<script src=”java.js”></script>

</head>

<body>

<div class=”marquee”>
<marquee scrolldelay=”25″ truespeed>

<table class=”tabelka”>

<!–Bitcoin –>
<tr>
<td><span class=”nazwa”><img src=”img/brc.png” width=”80px” height=”80px”>BTC</span></td>
<td><span id=”BTCc”></span></td>
<td><span>USD</span></td>
<td id=”kolori”>(<span id=”BTCp”></span>)</td>
<td id=”doli”><span>%</span></td>
<td ><span></span></td>
<!–ETH –>
<td><span><span class=”nazwa” ><img src=”img/ETH.png” width=”80px” height=”80px”>ETH</span></td>
<td><span id=”ETHc”></span></td>
<td><span>USD</span></td>
<td id=”Ekolori”>(<span id=”ETHp”> </span>)</td>
<td id=”Edoli”><span> % </span></td>
<td><span></span></td>
<!–XRP –>
<td><span class=”nazwa”><img src=”img/XRP.png” width=”80px” height=”80px”>XRP<span></td>
<td><span id=”XRPc”> </span></td>
<td><span>USD</span></td>
<td id=”Xkolori”>(<span id=”XRPp”> </span>)</td>
<td id=”Xdoli”><span> % </span></td>
<td><span> </span></td>

<!–LISK –>
<td><span class=”nazwa”><img src=”img/1214.png” width=”80px” height=”80px”>LISK</span></td>
<td><span id=”LRPc”> </span></td>
<td><span>USD</span></td>
<td id=”Lkolori”>(<span id=”LRPp”> </span>)</td>
<td id=”Ldoli”><span> % </span></td>
<td><span> </span></td>
<!–NANO –>
<td><span class=”nazwa” ><img src=”img/Neo.png” width=”80px” height=”80px”>NEO</span></td>
<td><span id=”NRPc”> </span></td>
<td><span>USD</span></td>
<td id=”Nkolori”>(<span id=”NRPp”> </span>)</td>
<td id=”Ndoli”><span> % </span></td>
<td><span> </span></td>
<!–NEO–>

</tr>
</table>
</marquee>

</div>

</body>

</html>

 

 

CSS

body{
background-image: url(pociag1.jpg);
background-attachment: fixed;
background-size: 100% 100%;

}
.marquee{
margin:auto;
background: darkgrey;
height: 90px;
width: 80%;
display: table;
margin-top: 200px;
border-radius: 10px;
border: 1px solid white;
}

.tabelka{

font-size: 40px;

margin: 0 auto;
border-spacing: 10px;
border-radius: 10px;
color: white;

}
.nazwa{
font-style: oblique;
font-weight: bold;
font-size: 80px;
color: black;
}

 

 

 

JAVASCRIPT

 

//BITCOIN

{
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
//var myObj = JSON.stringify(xmlhttp);

var myObj = JSON.parse(this.responseText);

var intBrice = Number(myObj[0][“price_usd”]);
var intPrice = intBrice.toFixed(2);
document.getElementById(“BTCc”).innerHTML = intPrice;

var intBercent = Number(myObj[0][“percent_change_24h”]);
var intPercent = intBercent.toFixed(2);
document.getElementById(“BTCp”).innerHTML = intPercent;

}

kolorek();
function kolorek(){
if(intPercent>=0){
document.getElementById(“kolori”).style.color = “green”;
document.getElementById(“doli”).style.color = “green”;
}
else {
document.getElementById(“kolori”).style.color = “red”;
document.getElementById(“doli”).style.color = “red”;

}
}

};
xmlhttp.open(“GET”, “https://api.coinmarketcap.com/v1/ticker/Bitcoin/”, true);
xmlhttp.send();
}

//ETHEREUM

{
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
//var myObj = JSON.stringify(xmlhttp);

var EmyObj = JSON.parse(this.responseText);
var EintBrice = Number(EmyObj[0][“price_usd”]);
var EintPrice = EintBrice.toFixed(2);
document.getElementById(“ETHc”).innerHTML = EintPrice;

var EintBercent = Number(EmyObj[0][“percent_change_24h”]);
var EintPercent = EintBercent.toFixed(2);
document.getElementById(“ETHp”).innerHTML = EintPercent;

}

kolorek();
function kolorek(){
if(EintPercent>=0){
document.getElementById(“Ekolori”).style.color = “green”;
document.getElementById(“Edoli”).style.color = “green”;
}
else {
document.getElementById(“Ekolori”).style.color = “red”;
document.getElementById(“Edoli”).style.color = “red”;

}
}

};
xmlhttp.open(“GET”, “https://api.coinmarketcap.com/v1/ticker/Ethereum/”, true);
xmlhttp.send();
}

//XRP

{
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
//var myObj = JSON.stringify(xmlhttp);

var XmyObj = JSON.parse(this.responseText);
var XintBrice = Number(XmyObj[0][“price_usd”]);
var XintPrice = XintBrice.toFixed(2);
document.getElementById(“XRPc”).innerHTML = XintPrice;

var XintBercent = Number(XmyObj[0][“percent_change_24h”]);
var XintPercent = XintBercent.toFixed(2);
document.getElementById(“XRPp”).innerHTML = XintPercent;

}

kolorek();
function kolorek(){
if(XintPercent>=0){
document.getElementById(“Xkolori”).style.color = “green”;
document.getElementById(“Xdoli”).style.color = “green”;
}
else {
document.getElementById(“Xkolori”).style.color = “red”;
document.getElementById(“Xdoli”).style.color = “red”;

}
}

};
xmlhttp.open(“GET”, “https://api.coinmarketcap.com/v1/ticker/Ripple/”, true);
xmlhttp.send();
}

//LISK
{
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
//var myObj = JSON.stringify(xmlhttp);

var LmyObj = JSON.parse(this.responseText);
var LintBrice = Number(LmyObj[0][“price_usd”]);
var LintPrice = LintBrice.toFixed(2);
document.getElementById(“LRPc”).innerHTML = LintPrice;

var LintBercent = Number(LmyObj[0][“percent_change_24h”]);
var LintPercent = LintBercent.toFixed(2);
document.getElementById(“LRPp”).innerHTML = LintPercent;

}

kolorek();
function kolorek(){
if(LintPercent>=0){
document.getElementById(“Lkolori”).style.color = “green”;
document.getElementById(“Ldoli”).style.color = “green”;
}
else {
document.getElementById(“Lkolori”).style.color = “red”;
document.getElementById(“Ldoli”).style.color = “red”;

}
}

};
xmlhttp.open(“GET”, “https://api.coinmarketcap.com/v1/ticker/Lisk/”, true);
xmlhttp.send();
}
//NEO

{
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
//var myObj = JSON.stringify(xmlhttp);

var NmyObj = JSON.parse(this.responseText);
var NintBrice = Number(NmyObj[0][“price_usd”]);
var NintPrice = NintBrice.toFixed(2);
document.getElementById(“NRPc”).innerHTML = NintPrice;

var NintBercent = Number(NmyObj[0][“percent_change_24h”]);
var NintPercent = NintBercent.toFixed(2);
document.getElementById(“NRPp”).innerHTML = NintPercent;

}

kolorek();
function kolorek(){
if(NintPercent>=0){
document.getElementById(“Nkolori”).style.color = “green”;
document.getElementById(“Ndoli”).style.color = “green”;
}
else {
document.getElementById(“Nkolori”).style.color = “red”;
document.getElementById(“Ndoli”).style.color = “red”;

}
}

};
xmlhttp.open(“GET”, “https://api.coinmarketcap.com/v1/ticker/Neo/”, true);
xmlhttp.send();
}

setTimeout(function () {
location.reload()
}, 40000);

 

loading