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