-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
108 lines (105 loc) · 4.5 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CRYPTO CRAZE</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" href="images/cc_logo.png">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var search = 0;
function getCrypto(crypto){
$.get(`https://api.coingecko.com/api/v3/coins/${crypto}?tickers=true&market_data=true&community_data=true&developer_data=true&sparkline=true`)
.then(response => {
console.log(response);
$("#about").text(`${response.name}`)
$("#mini").attr("src", response.image.large)
$("#mini").attr("alt", `Picture of ${response.name}`);
$("#val").text(`${response.market_data.current_price.usd}`)
$("#founded").text(`${response.genesis_date}`)
$("#market_cap").text(`${response.market_cap_rank}`)
$("#liquidity").text(`${response.liquidity_score}`)
$("#coingecko").text(`${response.coingecko_rank}`)
$("#dev").text(`${response.developer_score}`)
$("#upvote").text(`${response.sentiment_votes_up_percentage}`)
$("#downvote").text(`${response.sentiment_votes_down_percentage}`)
$("#update").text(`${response.last_updated}`)
$("#more").html(`${response.description.en}`)
})
.catch(error => console.log(error));
}
$("#go").click(function(){
getCrypto($("#crypto").val());
search++;
$("#search-count").text(search);
})
$("#go").hover(function(){
$(this).css('background','rgb(208,116,233)');
},
function(){
$("#go").css('background','rgb(250,89,7)');
});
$("#github").hover(function(){
alert("Check out my github!");
})
})
</script>
</head>
<body>
<div id="header">
<img id="logo" src="images/cc_logo.png" alt="cc_logo">
<h1><span style="color:rgb(208,116,233);">CR</span><span style="color:rgb(137,76,212);">YP</span><span style="color:rgb(76,73,206);">TO</span> <span style="color:rgb(253,214,1);">CR</span><span style="color:rgb(253,133,4);">A</span><span style="color:rgb(250,89,7);">ZE</span></h1>
</div>
<div id="info">
<div id="choose">
<label for="crypto" id=choose_text>CHOOSE A CRYPTO</label>
<select name="crypto" id="crypto">
<option value="bitcoin">BTC</option>
<option value="ethereum">ETH</option>
<option value="litecoin">LTC</option>
<option value="dogecoin">DOGE</option>
<option value="chainlink">LINK</option>
<option value="stellar">XLM</option>
<option value="uniswap">UNI</option>
<option value="cosmos">ATOM</option>
<option value="monero">XMR</option>
<option value="tron">TRX</option>
<option value="tether">USDT</option>
<option value="polkadot">DOT</option>
<option value="iota">MIOTA</option>
<option value="tezos">XTZ</option>
</select>
<button id="go">GO</button>
</div>
<div id=main>
<div id=details>
<div id=tinyHeader>
<img id=mini src="images/cc_logo.png" alt="mini">
<h2 id=about>Crypto</h2>
</div>
<ul>
<li class=facts>Current Value: $<span id="val">0000</span> USD</li>
<li class=facts>Founded: <span id="founded">0000-00-00</span></li>
<li class=facts>Market Cap Rank: <span id="market_cap">0</span></li>
<li class=facts>Liquidity Value: <span id="liquidity">00.000</span></li>
<li class=facts>COINGECKO Score: <span id="coingecko">00.000</span></li>
<li class=facts>DEV Score: <span id="dev">000.000</span></li>
<li class=facts>Upvotes: <span id="upvote">00.00</span>%</li>
<li class=facts>Downvotes: <span id="downvote">00.00</span>%</li>
</ul>
<p id="update"></p>
</div>
<div id=description>
<p> <span id=more>Please select a cryptocurrency to get started...</span></p>
</div>
</div>
</div>
<footer>
<div id=bottom>
<p id="counter"><span id="search-count">0</span> searches powered by <a href="https://www.coingecko.com/en" >coingecko</a></p>
<img id="github" src="images/github.png" alt="github"><a href="https://github.com/troubleshoot" id="link">github</a>
</div>
</footer>
</body>
</html>