currency-dropdown and fiattosat split into their own containers

This commit is contained in:
0ceanSlim 2023-08-09 11:16:57 -04:00
parent d910ac19a7
commit c21768901c
5 changed files with 43 additions and 28 deletions

View File

@ -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">

View File

@ -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);
});

View File

@ -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;

View File

@ -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);
}); });
}); });

View File

@ -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 {