Added proper CSS Sytling

This commit is contained in:
0ceanSlim 2023-07-29 09:17:35 -04:00
parent 37c20e9bf7
commit b10ea93ea7

View File

@ -30,30 +30,41 @@ class MainActivity : AppCompatActivity() {
<style> <style>
/* CSS styles for the Bitcoin Price Tracker */ /* CSS styles for the Bitcoin Price Tracker */
body { body {
font-family: Arial, sans-serif; margin: 0;
margin: 20px; padding: 0;
background: #252525;
color: #ffffff;
font-family: monospace, Arial;
font-size: 12px;
font-feature-settings: normal;
overflow-x: hidden;
text-align: center;
} }
.bitcointodollars { .bitcointodollars {
background-color: #f5f5f5; width: auto;
padding: 10px; margin-left: 20px;
margin-right: 20px;
margin-top: 20px;
background-color: #252525;
border: 1px solid #ccc; border: 1px solid #ccc;
border-radius: 5px; border-radius: 8px;
padding: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
} }
h1 { h1 {
color: #333; color: #ff7500;
} }
#bitcoin-price { #bitcoin-price {
font-size: 24px; font-size: 24px;
font-weight: bold; font-weight: bold;
color: #0066cc; text-align: center;
margin-top: 10px; margin: 10px;
} }
</style> </style>
</head> </head>
<body> <body>
<div class="bitcointodollars"> <div class="bitcointodollars">
<h1>Bitcoin Price Tracker.</h1> <h1>Bitcoin Price Tracker</h1>
<p> this is a p </p>
<div id="bitcoin-price"></div> <div id="bitcoin-price"></div>
<script> <script>
// Fetch the Bitcoin price from the CoinGecko API // Fetch the Bitcoin price from the CoinGecko API
@ -63,7 +74,7 @@ class MainActivity : AppCompatActivity() {
const bitcoinPrice = data['bitcoin']['usd']; const bitcoinPrice = data['bitcoin']['usd'];
// Update the Bitcoin price on the website // Update the Bitcoin price on the website
const bitcoinPriceElement = document.getElementById('bitcoin-price'); const bitcoinPriceElement = document.getElementById('bitcoin-price');
bitcoinPriceElement.textContent = '1 Bitcoin = $' + bitcoinPrice.toFixed(2); // Display the Bitcoin price bitcoinPriceElement.textContent = '1 BTC = $' + bitcoinPrice.toFixed(2); // Display the Bitcoin price
}) })
.catch(error => console.error(error)); .catch(error => console.error(error));
</script> </script>