css split from html, accounted for in MainActivity and working

This commit is contained in:
0ceanSlim 2023-07-29 18:34:00 -04:00
parent 11a0c7beee
commit 05104acbe9
4 changed files with 84 additions and 5 deletions

View File

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="bitcointodollars">
<h1>Bitcoin Price Tracker</h1>
<div id="bitcoin-price"></div>
</div>
</body>
</html>

View File

@ -0,0 +1,10 @@
// Fetch the Bitcoin price from the CoinGecko API
fetch('https://api.coingecko.com/api/v3/simple/price?ids=bitcoin&vs_currencies=usd')
.then(response => response.json())
.then(data => {
const bitcoinPrice = data['bitcoin']['usd'];
// Update the Bitcoin price on the website
const bitcoinPriceElement = document.getElementById('bitcoin-price');
bitcoinPriceElement.textContent = '1 BTC = $' + bitcoinPrice.toFixed(2); // Display the Bitcoin price
})
.catch(error => console.error(error));

View File

@ -0,0 +1,35 @@
/* CSS styles for the Bitcoin Price Tracker */
body {
margin: 0;
padding: 0;
background: #252525;
color: #ffffff;
font-family: monospace, Arial;
font-size: 12px;
font-feature-settings: normal;
overflow-x: hidden;
text-align: center;
}
.bitcointodollars {
width: auto;
margin-left: 20px;
margin-right: 20px;
margin-top: 20px;
background-color: #252525;
border: 1px solid #ccc;
border-radius: 8px;
padding: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
color: #ff7500;
}
#bitcoin-price {
font-size: 24px;
font-weight: bold;
text-align: center;
margin: 10px;
}

View File

@ -24,7 +24,7 @@ class MainActivity : AppCompatActivity() {
// Clear the WebView cache (optional) // Clear the WebView cache (optional)
webView.clearCache(true) webView.clearCache(true)
// Load the HTML content from the "bitcoin_price_tracker.html" file // Load the HTML content from the "index.html" file
val htmlContent = try { val htmlContent = try {
assets.open("index.html").bufferedReader().use { it.readText() } assets.open("index.html").bufferedReader().use { it.readText() }
} catch (e: IOException) { } catch (e: IOException) {
@ -33,7 +33,7 @@ class MainActivity : AppCompatActivity() {
"<html><body><h1>Error loading HTML</h1></body></html>" "<html><body><h1>Error loading HTML</h1></body></html>"
} }
// Load the JavaScript code from the "bitcoin_price_tracker.js" file // Load the JavaScript code from the "script.js" file
val javaScriptCode = try { val javaScriptCode = try {
assets.open("script.js").bufferedReader().use { it.readText() } assets.open("script.js").bufferedReader().use { it.readText() }
} catch (e: IOException) { } catch (e: IOException) {
@ -42,9 +42,28 @@ class MainActivity : AppCompatActivity() {
"" ""
} }
// Inject the JavaScript code into the HTML content // Load the CSS code from the "style.css" file
val finalHtmlContent = "$htmlContent<script>$javaScriptCode</script>" val cssCode = try {
assets.open("style.css").bufferedReader().use { it.readText() }
} catch (e: IOException) {
e.printStackTrace()
// If loading CSS fails, set an empty style
""
}
// Combine the HTML, CSS, and JavaScript code
val finalHtmlContent = """
<html>
<head>
<style type="text/css">$cssCode</style>
</head>
<body>
$htmlContent
<script>$javaScriptCode</script>
</body>
</html>
""".trimIndent()
webView.loadDataWithBaseURL(null, finalHtmlContent, "text/html", "UTF-8", null) webView.loadDataWithBaseURL(null, finalHtmlContent, "text/html", "UTF-8", null)
} }
} }