This repository has been archived by the owner on Oct 11, 2021. It is now read-only.
/
index.html
77 lines (72 loc) · 3.4 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CryptoCompare</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://bootswatch.com/simplex/bootstrap.min.css">
<link rel="stylesheet" href="static/css/style.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body class="container">
<h1>Crypto Compare</h1>
<div class="row">
<div class="jumbotron col-xs-offset-2 col-xs-8">
<p>
This website indexes the top 10 cryptocurrencies by market cap (how
much the sum of all coins is collectively worth), and gives you an easy
way to compare cryptocurrency performance and rank over the last week.
</p>
</div>
</div>
<div id="app">
<table class="table table-hover">
<thead>
<tr>
<td>Rank</td>
<td>Name</td>
<td>Symbol</td>
<td>Price (USD)</td>
<td>1H</td>
<td>1D</td>
<td>1W</td>
<td>Market Cap (USD)</td>
</thead>
<tbody>
<tr v-cloak v-for="coin in coins">
<td>{{ coin.rank }}</td>
<td><img v-bind:src="getCoinImage(coin.symbol)"> {{ coin.name }}</td>
<td>{{ coin.symbol }}</td>
<td>{{ coin.quotes.USD.price | currency }}</td>
<td v-bind:style="getColor(coin.quotes.USD.percent_change_1h)">
<span v-if="coin.quotes.USD.percent_change_1h > 0">+</span>{{ coin.quotes.USD.percent_change_1h }}%
</td>
<td v-bind:style="getColor(coin.quotes.USD.percent_change_24h)">
<span v-if="coin.quotes.USD.percent_change_24h > 0">+</span>{{ coin.quotes.USD.percent_change_24h }}%
</td>
<td v-bind:style="getColor(coin.quotes.USD.percent_change_7d)">
<span v-if="coin.quotes.USD.percent_change_7d > 0">+</span>{{ coin.quotes.USD.percent_change_7d }}%
</td>
<td>{{ coin.quotes.USD.market_cap | currency }}</td>
</tr>
</tbody>
</table>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://unpkg.com/vue"></script>
<script src="static/js/vue2-filters.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="static/js/app.js"></script>
</body>
</html>