odiez
Coder
Good day
I have a webpage running on my laptop (using visual studio code).
I am making a webpage (only private) that where I can add/update cryptocurrency. A the moment is has nearly 50 in the table, and it is a lot of html and js scripts in this page. I am going to add more tokens.
Is there an easy way to use this code, so I can add or update table.
I have also search and test a few ideas on how to sort my data, but it does not work.
I will show a few lines of my html, scrips and css.
Can I get help wit this please
Css
Html table
Script
Script2
I have a webpage running on my laptop (using visual studio code).
I am making a webpage (only private) that where I can add/update cryptocurrency. A the moment is has nearly 50 in the table, and it is a lot of html and js scripts in this page. I am going to add more tokens.
Is there an easy way to use this code, so I can add or update table.
I have also search and test a few ideas on how to sort my data, but it does not work.
I will show a few lines of my html, scrips and css.
Can I get help wit this please
Css
CSS:
.currencies-table td {
border: 1px solid #DFCFBE;
padding: 0.5em;
margin: 0%;
}
.coin-value {
color: #17202a;
font-family: Comic Sans MS;
font-weight: bold;
background-color: #ebdef0;
border-radius: 10px;
padding: 0.5em;
}
.total-usd {
color: red;
font-family: Comic Sans MS;
font-weight: bold;
background-color: #070606;
border-radius: 10px;
padding: 0.5em;
}
Html table
HTML:
<table class="currencies-table">
<tr>
<td style="text-align: center;"><font color="#A0DAA9">Name</font></td>
<td style="text-align: center;"><font color="#A0DAA9"></font></td>
<td style="text-align: center;"><font color="#A0DAA9"></font></td>
<td style="text-align: center;"><font color="#A0DAA9">Value</font></td>
<td style="text-align: center;"><font color="#A0DAA9">Day</font></td>
<td style="text-align: center;"><font color="#A0DAA9">Week</font></td>
<td style="text-align: center;"><font color="#A0DAA9">Month</font></td>
<td style="text-align: center;"><font color="#A0DAA9">Year</font></td>
<td style="text-align: center;"><font color="#A0DAA9">Coins</font></td>
<td style="text-align: center;"><font color="#A0DAA9">Button</font></td>
<td style="text-align: center;"><font color="#A0DAA9">USD</font></td>
<td style="text-align: center;"><font color="#A0DAA9">Button</font></td>
<td style="text-align: center;"><font color="#A0DAA9">ZAR</font></td>
</tr>
td><font color="#C3447A"><b><label for="firstNum50">KHAOS</label></b></FONT></td>
<td><a href="https://nomics.com/assets/khaos-khaos-finance"',' target="_blank"><img src="./crypto/.png"></img></a></td>
<td><img src="./crypto/binance.png"></img></td>
<td><input class="coin-value" type="number50" id="firstNum50" name="firstNum50"></td>
<td id="num50For24H"></td>
<td id="num50For7D"></td>
<td id="num50For30D"></td>
<td id="num50For365D"></td>
<td><font color="#BCC6CC"><b><label for="secondNum50">19,476,952.88</label></b></font></td>
<input style="visibility:hidden" type="number50" id="secondNum50" name="secondNum50">
<td><button class="glow-on-hover" type="button" onclick="multiply101()">Multiply</button></td>
<td><input class="total-usd" type=" text" id="result101" name="result101" /></td>
<input style="visibility:collapse" type="usdzar50" id="usd50" name="usd50">
<font style="visibility:collapse" color="#BCC6CC"><b><label for="zar50"></label></b></font>
<input style="visibility:collapse" type="usdzar50" id="gcw_valFnAj0a2vV1" name="zar50">
<td><button class="glow-on-hover" type="button" onclick="multiply102()">Multiply</button></td>
<td><input class="total-usd" type=" text" id="result102" name="result102" /></td>
</tr>
<tr></tr>
<tr>
<tr style="color: bisque;">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td align='right'>$</td>
<td id="totalUsd">0.00</td>
<td align='right'>R</td>
<td id="totalZar">0.00</td>
</tr>
</table>
</center>
Script
JavaScript:
<script>
function multiply99() {
var num197 = document.getElementById("firstNum49").value;
document.getElementById("secondNum49").value = 461832.6999649;
var num198 = document.getElementById("secondNum49").value;
var result99 = num197 * num198;
document.getElementById("result99").value = result99.toLocaleString('en-US', { maximumFractionDigits: 8 });
document.getElementById("result99").style.color = "lime";
document.getElementById("result99").style.fontWeight = "900";
}
</script>
<script>
function multiply100() {
var num199= document.getElementById("result99").value.replace(/,/g, ''); //remove any commas
var num200 = document.getElementById("gcw_valFnAj0a2vV1").value;
var result100 = num199 * num200;
document.getElementById("result100").value = result100.toLocaleString('en-US', { maximumFractionDigits: 8 });
document.getElementById("result100").style.color = "lime";
document.getElementById("result100").style.fontWeight = "900";
}
</script>
Script2
JavaScript:
<script>
const currencies = 'PETS';
const yourAPIKey = `fdf`;
function updateCurrenciesValues() {
const url = `https365d`;
fetch(url).then(async (payload) => {
const convertedPayload = await payload.json();
convertedPayload.forEach(coin => {
switch (coin.id) {
case 'KHAOS':
document.getElementById("firstNum50").value = coin.price;
if (coin['1d']) {
const priceChangeCap = parseFloat(coin['1d'].price_change_pct);
document.getElementById("num50For24H").innerHTML = priceChangeCap < 0 ? getDownPriceChangeCapTemplate(priceChangeCap) : getUpPriceChangeCapTemplate(priceChangeCap);
}
if (coin['7d']) {
const priceChangeCap = parseFloat(coin['7d'].price_change_pct);
document.getElementById("num50For7D").innerHTML = priceChangeCap < 0 ? getDownPriceChangeCapTemplate(priceChangeCap) : getUpPriceChangeCapTemplate(priceChangeCap);
}
if (coin['30d']) {
const priceChangeCap = parseFloat(coin['30d'].price_change_pct);
document.getElementById("num50For30D").innerHTML = priceChangeCap < 0 ? getDownPriceChangeCapTemplate(priceChangeCap) : getUpPriceChangeCapTemplate(priceChangeCap);
}
if (coin['365d']) {
const priceChangeCap = parseFloat(coin['365d'].price_change_pct);
document.getElementById("num50For365D").innerHTML = priceChangeCap < 0 ? getDownPriceChangeCapTemplate(priceChangeCap) : getUpPriceChangeCapTemplate(priceChangeCap);
}