jQuery addClass example

Change class name on click in jQuery

by droomiechikito

HTML

<!DOCTYPE html>
<html>
<center>
<body>
<h2 style="color:green;">Welcome Droomie Chikito</h2>
<a target="_blank" href="https://bitcointalk.org/index.php?action=profile;u=938833/"><img src="https://i.ibb.co/QX5FNJh/avatar-938833.png" alt="avatar-938833" border="0"></a>
<p style="color:blue;">3B4b1EUTohk7yTajgkRzG7bpPRhxELe11T </p>
</body>
<p><b></b></p>
<table id="coins">
  <th>Harga</th>
  <th>Indodax</th>
</table>
<p><a target="_blank" href="https://bitcointalk.org/gettopics.php?user=938833&posts">	Full Posted</a></p>
<p><a target="_blank" href="https://bitcointalk.org/gettopics.php?user=938833&board=191.0&posts">	Full Posted  Bahasa Indonesia Local Forum only</a></p>
<p><a target="_blank" href="https://bitcointalk.org/gettopics.php?user=938833">	Full Thread</a></p>
<p><a target="_blank" href="https://bitcointalk.org/gettopics.php?user=938833&board=191.0">	Full Thread Bahasa Indonesia Local Forum only</a></p>

<p><a target="_blank" href="https://bitcointalk.org/index.php?topic=5196472.0">	Lending Service-No Interest-No Collateral</a></p>

<p><a target="_blank" href="https://bitcointalk.org/index.php?topic=1159946.msg52794877#msg52794877">	My PGP Signature</a></p>
<p><a target="_blank" href="https://bitcointalk.org/index.php?topic=996318.msg51727627#msg51727627">	My Bitcoin Address Signature</a></p>

<p><a target="_blank" href="https://bitcointalk.org/index.php?topic=5205729.0">	Bikin Private Key Bitcoin Pake Lemparan Koin </a></p>
<iframe width="360" height="215" src="https://www.youtube.com/embed/8OhBV42qjZo" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<p><a target="_blank" href="https://public.tableau.com/shared/9M7MM2SBJ?:display_count=y&:origin=viz_share_link&:embed=y">	Most Merited Post </a></p>
<p><a target="_blank" href="https://public.tableau.com/shared/GB6PW7RKT?:display_count=y&:origin=viz_share_link&:embed=y">	Data Merit </a></p>
<p><a target="_blank"...

CSS

table {
  border-collapse: inherit;
  width: 15%;
}

table td,
table th {
  border: 1px solid #000000;
  padding: 6px;
}

table tr:nth-child(even) {
  background-color: #E0E1E8;
}

table tr:hover {
  background-color: #9BAEBF;
}

table th {
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: left;
  background-color: #9BAEBF;
  color: white;
}

JavaScript

var reloadData = 600; // dalam detik

var timer;

function updateDataAPI() {

  $.ajax({
    url: 'https://indodax.com/api/summaries',
    success: function(data) {
      var row;

      $('#Bitcoin').html('<th>Bitcoin Price</th>')
      for (var key in data.tickers) {
        if (!['btc_idr', ].includes(key)) continue;
        row = `<tr>
              <td>` + key.toUpperCase() + `</td>
              <td>` + formatNumber(data.tickers[key].last) + `</td>
            </tr>`
        $('#coins tr:last').after(row);
      }

      clearTimeout(timer)
      $('#timer').html(reloadData)
      setTimeout(updateDataAPI, reloadData * 1000)
      updateTimer()
    },
    error: function(err) {
      alert("Tidak bisa mengambil data API")
    }
  })
}

function formatNumber(n) {
  if (n.indexOf('.') > -1)
    return parseFloat(n).toFixed(8);
  else
    return parseInt(n).toLocaleString("id-ID")
}

function updateTimer() {
  a = parseInt($('#timer').html())
  $('#timer').html(a - 1)
  if (a > 0)
    timer = setTimeout(updateTimer, 1000)
}
updateDataAPI()