-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
166 lines (147 loc) · 5.5 KB
/
script.js
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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
var base_url = "https://api.coingecko.com/api/v3"
var result = document.getElementById("result")
result.addEventListener("click",function(){
if (event.target.parentNode.className === "card"){
location = "coin.html?coin=" + event.target.parentNode.id
}
})
function showPopularCurrencies(){
console.log("searching popular currencies")
var query = new URLSearchParams(location.search)
var page = query.get("page") || 1
var sort = document.getElementById("sort").value
var order = document.getElementById("order").value
var xhr = new XMLHttpRequest();
var params = new URLSearchParams()
params.append("vs_currency", "usd")
params.append("order", sort+order)
params.append("per_page", "10")
params.append("page", page)
params.append("price_chage_percentage", "24h")
xhr.open("GET", base_url+"/coins/markets?"+params);
xhr.setRequestHeader("accept", "application/json")
xhr.send();
xhr.onload = function(){
console.log(xhr.status)
var data = JSON.parse(this.response);
displayCoins(data)
}
}
function displayCoins(data){
var arr = data
result.innerHTML = ""
var pages = document.createElement("div")
for (var i=0;i<10;i++){
var a = document.createElement("a")
a.innerText = (i+1)
a.href = "popularCurrencies.html?page="+ (i+1)
a.style.padding = "10px"
pages.appendChild(a)
}
document.getElementById("pages").innerHTML = ""
document.getElementById("pages").append(pages)
// result.append(pages)
arr.forEach(function(cryptocurrency){
var div = createCard(cryptocurrency);
result.append(div)
})
function createCard(cryptocurrency){
var div = document.createElement("div");
div.setAttribute("class","card");
div.setAttribute("id",cryptocurrency["id"])
var img = document.createElement("img");
img.setAttribute("src", cryptocurrency.image)
var details = document.createElement("div");
details.innerText = cryptocurrency.name //+ "\n" +
// "Market Cap Rank: " + cryptocurrency.market_cap_rank + "\n" +
// "Volume: " + cryptocurrency.total_volume;
var price = document.createElement("div");
price.innerText = "$ "+Math.round(100*cryptocurrency.current_price)/100
var priceChange = document.createElement("div");
priceChange.innerText = "(" + Math.round(100*cryptocurrency.price_change_percentage_24h)/100 + "%)"
priceChange.style.fontSize = "13px"
if (cryptocurrency.price_change_percentage_24h > 0) {
price.style.color = "green"
priceChange.style.color = "green"
}
else {
price.style.color = "red"
priceChange.style.color = "red"
}
div.append(img,details,price,priceChange);
return div
}
}
function coinPage(){
var searchValue = document.getElementsByTagName("input")[0].value || 0
location = "coin.html?coin=" + searchValue
}
function searchCoin(){
console.log("Searching for coin...")
var query = new URLSearchParams(location.search)
var coin = query.get("coin")
if (coin === "0"){
coinUnavailable()
}
else{
var xhr = new XMLHttpRequest()
var params = new URLSearchParams()
params.append("vs_currency","usd")
params.append("ids", coin)
xhr.open("GET",base_url+"/coins/markets?"+params)
xhr.setRequestHeader("accept","application/json")
xhr.send()
xhr.onload = function(){
var data = JSON.parse(xhr.response)[0];
if (data === undefined){
coinUnavailable()
}
document.getElementById("coinResult").append(displayCoin(data))
}
}
}
function coinUnavailable(){
console.log("Coin not available! Please try again!")
h1 = document.createElement("h1")
h1.innerText = "Coin not available! Please try again..."
h1.setAttribute("class","sub-heading")
document.getElementById("coinResult").append(h1)
}
function displayCoin(data){
console.log(data)
var div = document.createElement("div");
div.setAttribute("class","table")
div.append(createDiv("ID"))
div.append(createDiv(data['id']))
div.append(createDiv("Symbol"))
div.append(createDiv(data['symbol']))
div.append(createDiv("Name"))
div.append(createDiv(data['name']))
div.append(createDiv("Current Price"))
div.append(createDiv(data['current_price']))
div.append(createDiv("Market Cap"))
div.append(createDiv(data['market_cap']))
div.append(createDiv("Market Cap Rank"))
div.append(createDiv(data['market_cap_rank']))
div.append(createDiv("Volume"))
div.append(createDiv(data['total_volume']))
div.append(createDiv("24 hr High"))
div.append(createDiv(data['high_24h']))
div.append(createDiv("24 hr Low"))
div.append(createDiv(data['low_24h']))
div.append(createDiv("Price Change in last 24 hrs ($)"))
div.append(createDiv(data['price_change_24h']))
div.append(createDiv("Price Change in last 24 hrs (%)"))
div.append(createDiv(data['price_change_percentage_24h']))
div.append(createDiv("All time High"))
div.append(createDiv(data['ath']))
div.append(createDiv("All time Low"))
div.append(createDiv(data['atl']))
return div
}
function createDiv(str){
var div = document.createElement("div")
div.innerText = str
div.setAttribute("class","boxDetails")
return div
}