Crypto Value Calculator
Crypto Value Calculator
Cryptocurrencies have become a hot topic in recent years, with investors, traders, and enthusiasts constantly trying to keep up with their fluctuating values. Whether you’re a seasoned crypto investor or someone just beginning to explore the world of digital currencies, understanding the real-time value of your holdings is crucial.
Below, I have a simple yet powerful tool – the Crypto Value Calculator. This script allows you to quickly calculate the value of your cryptocurrency portfolio in fiat currency, helping you track your investments with ease.
Current Crypto Prices
Prices update every 10 minutes to avoid API limit.
Loading...
Crypto Value Calculator
Disclaimer
Please note that this script has not been fully tested. It has only been tested with a handful of cryptocurrencies and may not work perfectly with all assets. Use at your own risk, and I recommend verifying the results before making any financial decisions.
I do not take responsibility for any inaccuracies or issues that may arise from using this tool. It is provided as-is for informational purposes only.
Add to website
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
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
## Current Crypto Prices
Prices update every 10 minutes to avoid API limit.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Crypto Value Tracker</title>
<!-- FontAwesome CDN for icons -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
<style>
/* Container for prices */
#crypto-prices {
font-family: Arial, sans-serif;
font-size: 1em;
background-color: #1c1c1c;
padding: 10px;
border-radius: 8px;
border: 1px solid #444;
color: white;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
}
/* Styling for each cryptocurrency block */
.price {
margin-right: 15px;
padding: 5px 10px;
display: flex;
align-items: center;
}
/* Styling for the icons before each crypto title */
.crypto-icon {
margin-right: 8px;
font-size: 1.2em;
}
/* Make titles bold */
.price span {
font-weight: bold;
}
/* Make the value green */
.price span:last-child {
color: green;
margin-left: 5px;
}
/* Reduce font size for smaller screens */
@media (max-width: 600px) {
#crypto-prices {
font-size: 0.9em;
}
}
/* Styling for the calculator form */
#calculator-form {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 20px auto;
padding: 20px;
border-radius: 8px;
border: 1px solid #ccc;
}
.form-group {
margin-bottom: 15px;
}
label {
font-weight: bold;
margin-bottom: 5px;
display: block;
}
input[type="number"] {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
padding: 10px 15px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
width: 100%;
font-size: 16px;
}
button:hover {
background-color: #45a049;
}
#result {
margin-top: 20px;
font-size: 18px;
text-align: center;
}
</style>
</head>
<body>
<div id="crypto-prices">
<p>Loading...</p>
</div>
<h2 id="crypto-value-calculator">Crypto Value Calculator</h2>
<br>
<form id="calculator-form">
<div class="form-group">
<label for="crypto_amount">Crypto Amount (e.g., 1.5 BTC):</label>
<input type="number" id="crypto_amount" name="crypto_amount" step="any" placeholder="Enter crypto amount" required>
</div>
<div class="form-group">
<label for="current_price">Current Price (£/$ per unit):</label>
<input type="number" id="current_price" name="current_price" step="any" placeholder="Enter current price" required>
</div>
<div class="form-group">
<label for="future_price">Future Price (£/$ per unit):</label>
<input type="number" id="future_price" name="future_price" step="any" placeholder="Enter future price" required>
</div>
<button type="submit">Calculate</button>
</form>
<div id="result"></div>
<script>
async function fetchCryptoPrices() {
const lastFetched = localStorage.getItem('lastFetched');
const currentTime = new Date().getTime();
// Check if the data is older than 10 minutes (600,000 milliseconds)
if (lastFetched && currentTime - lastFetched < 600000) {
const cachedData = JSON.parse(localStorage.getItem('cryptoData'));
displayPrices(cachedData);
return;
}
const url = 'https://api.coingecko.com/api/v3/simple/price?ids=bitcoin,ethereum,kaspa,dogecoin,litecoin,ripple,solana&vs_currencies=gbp';
try {
const response = await fetch(url);
const data = await response.json();
if (data.bitcoin && data.ethereum && data.kaspa && data.dogecoin && data.litecoin && data.ripple && data.solana) {
localStorage.setItem('cryptoData', JSON.stringify(data));
localStorage.setItem('lastFetched', currentTime);
displayPrices(data);
} else {
document.getElementById('crypto-prices').innerHTML = '<p>API Limit Failed to load all prices. Please try again later.</p>';
}
} catch (error) {
document.getElementById('crypto-prices').innerHTML = '<p>Failed to load prices. Try again later.</p>';
}
}
function displayPrices(data) {
document.getElementById('crypto-prices').innerHTML = `
<div class="price"><i class="crypto-icon fab fa-bitcoin"></i><span>Bitcoin:</span> <span>£${data.bitcoin.gbp}</span></div>
<div class="price"><i class="crypto-icon fab fa-ethereum"></i><span>Ethereum:</span> <span>£${data.ethereum.gbp}</span></div>
<div class="price"><i class="crypto-icon fas fa-circle"></i><span>Kaspa:</span> <span>£${data.kaspa.gbp}</span></div>
<div class="price"><i class="crypto-icon fas fa-circle"></i><span>Dogecoin:</span> <span>£${data.dogecoin.gbp}</span></div>
<div class="price"><i class="crypto-icon fab fa-bitcoin"></i><span>Litecoin:</span> <span>£${data.litecoin.gbp}</span></div>
<div class="price"><i class="crypto-icon fas fa-coins"></i><span>XRP (Ripple):</span> <span>£${data.ripple.gbp}</span></div>
<div class="price"><i class="crypto-icon fas fa-circle"></i><span>Solana:</span> <span>£${data.solana.gbp}</span></div>
`;
}
// Set an interval to fetch prices every 10 minutes
setInterval(fetchCryptoPrices, 600000);
fetchCryptoPrices();
document.getElementById("calculator-form").addEventListener("submit", function (event) {
event.preventDefault();
const cryptoAmount = parseFloat(document.getElementById("crypto_amount").value);
const currentPrice = parseFloat(document.getElementById("current_price").value);
const futurePrice = parseFloat(document.getElementById("future_price").value);
if (isNaN(cryptoAmount) || isNaN(currentPrice) || isNaN(futurePrice)) {
document.getElementById("result").innerHTML = "<p>Please enter valid numbers for all fields.</p>";
return;
}
const currentValue = cryptoAmount * currentPrice;
const futureValue = cryptoAmount * futurePrice;
const profitLoss = futureValue - currentValue;
document.getElementById("result").innerHTML = `
<p>Current Value: £${currentValue.toFixed(2)}</p>
<p>Future Value: £${futureValue.toFixed(2)}</p>
<p>${profitLoss >= 0 ? "Profit" : "Loss"}: £${Math.abs(profitLoss).toFixed(2)}</p>
`;
});
</script>
</body>
</html>
---
## **Disclaimer**
Please note that this script has not been fully tested. It has only been tested with a handful of cryptocurrencies and may not work perfectly with all assets. Use at your own risk, and I recommend verifying the results before making any financial decisions.
I do not take responsibility for any inaccuracies or issues that may arise from using this tool. It is provided as-is for informational purposes only.
This post is licensed under
CC BY 4.0
by the author.