C
Ja, habe es inzwischen selber hinbekommen. Es ist jetzt kürzer, besser und "schöner":
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<title>Umrechnungstabelle</title>
<style>
table,
th,
td {
border: solid black 1px;
}
td {
width: 125px;
}
main {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
</style>
</head>
<body>
<header></header>
<main>
<div id="div-1"></div>
<br />
<div>
<button
id="button-1"
onclick="(function (btn) {
btn.disabled = true;
let t = new Date();
t.setSeconds(t.getSeconds() + 30);
let inter = setInterval(function() {
let t2 = new Date();
if (t2 < t) {
btn.textContent = 'Kurse aktualisieren! (' + Number((t - t2) / 1000.0).toFixed(1) + ')';
} else {
clearInterval(inter);
btn.textContent = 'Kurse aktualisieren!';
btn.disabled = false;
}
}, 100);
initTable();
})(this);
return false;"
>
Kurse aktualisieren!
</button>
</div>
<br />
<table id="table-1">
<tr>
<th>Coin</th>
<th>Betrag</th>
<th>Betrag $</th>
<th>Kurs</th>
<th>Betrag Neu</th>
</tr>
</table>
</main>
<footer></footer>
<script>
let prices;
async function getPrices() {
const response1 = await fetch("https://api.livecoinwatch.com/coins/list", {
method: "POST",
headers: {
"content-type": "application/json",
"x-api-key": "",
},
body: JSON.stringify({
currency: "USD",
sort: "rank",
order: "ascending",
offset: 0,
limit: 100,
meta: false,
}),
});
const jsonData1 = await response1.json();
console.log(jsonData1);
return jsonData1;
}
function insertRow(table, name, rate) {
let row = table.insertRow();
{
let c = row.insertCell(0);
c.textContent = name;
}
{
let c = row.insertCell(1);
c.textContent = round10(rate);
}
{
let c = row.insertCell(2);
c.textContent = round10(1.0);
}
{
let c = row.insertCell(3);
c.textContent = round10(rate);
}
{
let c = row.insertCell(4);
let inp = document.createElement("input");
inp.addEventListener("input", function (evt) {
if (this.value.length > 0 && Number(this.value) === parseFloat(this.value)) {
let amount = parseFloat(this.value);
let usdAmount = amount * rate;
table.rows[1].cells[1].textContent = round10(usdAmount);
table.rows[1].cells[2].textContent = round10(usdAmount);
for (let i = 2; i < table.rows.length; i++) {
let row2 = table.rows[i];
let rate2 = parseFloat(prices[i - 2].rate);
row2.cells[1].textContent = round10(usdAmount / rate2);
row2.cells[2].textContent = round10(usdAmount);
}
}
});
c.appendChild(inp);
}
}
async function initTable() {
prices = await getPrices();
let table = document.getElementById("table-1");
for (let i = table.rows.length - 1; i > 0; i--) {
table.deleteRow(i);
}
insertRow(table, "$", 1.0);
prices.forEach((p) => {
insertRow(table, p.code.replaceAll("_", ""), parseFloat(p.rate));
});
document.getElementById("div-1").textContent = "Stand: " + new Date();
}
initTable();
function round10(value) {
return Number(value).toFixed(10);
}
</script>
</body>
</html>
Die inline-Funktion konnte ich mit this aufrufen, und der float-Wert wird mit Number(this.value) === parseFloat(this.value) auf Validität überprüft, und die letzten Preise werden jetzt zwischengespeichert und nicht mehr (umständlich) aus der Tabelle gezogen und geparst.
Falls dennoch irgendetwas Komisches auffällt, bin ich für Ratschläge offen.
