currency-dropdown and fiattosat split into their own containers
This commit is contained in:
parent
d910ac19a7
commit
c21768901c
@ -34,11 +34,10 @@
|
||||
</div>
|
||||
<div id="bitcoin-price"></div>
|
||||
</div>
|
||||
|
||||
<div id="dollars-to-sats"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="dollars-to-sats"></div>
|
||||
|
||||
</body>
|
||||
|
||||
<div class="satstodollars">
|
||||
|
@ -4,24 +4,20 @@ function updateBitcoinPrice(selectedCurrency) {
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
const bitcoinPrice = data['bitcoin'][selectedCurrency];
|
||||
// Update the Bitcoin price on the website
|
||||
const bitcoinPriceElement = document.getElementById('bitcoin-price');
|
||||
|
||||
// Format the Bitcoin price with a comma after every three digits and no decimals
|
||||
const formattedPrice = `${selectedCurrency.toUpperCase()} ` + bitcoinPrice.toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 0 });
|
||||
|
||||
bitcoinPriceElement.textContent = formattedPrice; // Display the formatted Bitcoin price
|
||||
bitcoinPriceElement.textContent = formattedPrice;
|
||||
})
|
||||
.catch(error => console.error(error));
|
||||
}
|
||||
|
||||
function refreshBitcoinPrice() {
|
||||
const currencySelect = document.getElementById('currency-select');
|
||||
const selectedCurrency = currencySelect.value;
|
||||
|
||||
updateBitcoinPrice(selectedCurrency); // Call the function immediately to display the price on page load
|
||||
setInterval(() => updateBitcoinPrice(selectedCurrency), 10000); // Call the function every 30 seconds
|
||||
function refreshBitcoinPrice(selectedCurrency) {
|
||||
updateBitcoinPrice(selectedCurrency);
|
||||
setInterval(() => updateBitcoinPrice(selectedCurrency), 30000);
|
||||
}
|
||||
|
||||
// Call the function to refresh the Bitcoin price
|
||||
refreshBitcoinPrice();
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const currencySelect = document.getElementById('currency-select');
|
||||
const selectedCurrency = currencySelect.value;
|
||||
refreshBitcoinPrice(selectedCurrency);
|
||||
});
|
||||
|
@ -4,13 +4,11 @@ function updateFiatToSatsConversion(selectedCurrency) {
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
const bitcoinPrice = data['bitcoin'][selectedCurrency];
|
||||
const satsConversionFactor = 100000000; // 1 bitcoin = 100 million sats
|
||||
|
||||
const satsConversionFactor = 100000000;
|
||||
const currencyValue = 1;
|
||||
const sats = (currencyValue / bitcoinPrice) * satsConversionFactor;
|
||||
|
||||
const currencyToSatsElement = document.getElementById('dollars-to-sats');
|
||||
currencyToSatsElement.textContent = `1 ${selectedCurrency.toUpperCase()} = ${sats.toFixed(0)} sats`; // Display the result
|
||||
currencyToSatsElement.textContent = `1 ${selectedCurrency.toUpperCase()} = ${sats.toFixed(0)} sats`;
|
||||
})
|
||||
.catch(error => console.error(error));
|
||||
}
|
||||
@ -18,8 +16,7 @@ function updateFiatToSatsConversion(selectedCurrency) {
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const currencySelect = document.getElementById('currency-select');
|
||||
const selectedCurrency = currencySelect.value;
|
||||
|
||||
updateFiatToSatsConversion(selectedCurrency); // Call the function on page load
|
||||
updateFiatToSatsConversion(selectedCurrency);
|
||||
|
||||
currencySelect.addEventListener('change', () => {
|
||||
const selectedCurrency = currencySelect.value;
|
||||
|
@ -1,10 +1,12 @@
|
||||
// currencySelection.js
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const currencySelect = document.getElementById('currency-select');
|
||||
const satsInputElement = document.getElementById('sats-input');
|
||||
|
||||
currencySelect.addEventListener('change', () => {
|
||||
const selectedCurrency = currencySelect.value;
|
||||
updateBitcoinPrice(selectedCurrency); // Update Bitcoin price when currency is changed
|
||||
updateFiatToSatsConversion(selectedCurrency); // Update fiat to sats conversion when currency is changed
|
||||
updateBitcoinPrice(selectedCurrency);
|
||||
updateFiatToSatsConversion(selectedCurrency);
|
||||
updateSatsToDollarsConversion(selectedCurrency);
|
||||
});
|
||||
});
|
||||
|
@ -23,6 +23,20 @@ a:hover {
|
||||
color: rgb(149, 0, 207);
|
||||
}
|
||||
|
||||
.currency-dropdown {
|
||||
width: auto;
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
margin-top: 20px;
|
||||
background-color: #282828;
|
||||
border: 3px solid #ccc;
|
||||
border-radius: 8px;
|
||||
padding: 10px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
|
||||
align-items: center; /* Center items vertically within the container */
|
||||
justify-content: center; /* Center items horizontally within the container */
|
||||
}
|
||||
|
||||
.container {
|
||||
width: auto;
|
||||
margin-left: 20px;
|
||||
@ -67,10 +81,17 @@ a:hover {
|
||||
}
|
||||
|
||||
#dollars-to-sats {
|
||||
font-size: 24px;
|
||||
font-weight: semi-bold;
|
||||
text-align: center;
|
||||
margin: 10px;
|
||||
width: auto;
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
margin-top: 20px;
|
||||
background-color: #282828;
|
||||
border: 3px solid #ccc;
|
||||
border-radius: 8px;
|
||||
padding: 10px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
|
||||
align-items: center; /* Center items vertically within the container */
|
||||
justify-content: center; /* Center items horizontally within the container */
|
||||
}
|
||||
|
||||
.satstodollars {
|
||||
|
Loading…
Reference in New Issue
Block a user