MTG Life tracker. Show change in number

Im making a MTG (Magic The Gathering) life tracker. Just for fun really. Even tho its extremely messy written and such.
it does the job OK.

enter image description here

Goal / Issues I'm having

I want to add an indicator to show how many times someone clicked or adjusted the life total on one of the players.

If i were to adjust the life total on one of the players either up or down. a little box fading in displaying how many times that button was just then clicked, before it fades out again. but then "resets" that visualization.

So that then also next time someone were to adjust the life total, visualize the changes they made.

Visualizing the changes up and down.

Using jquery or vanilla JS, is there a fairly simple way to do this?

If not ill probably end up doing something with jquery's .change .change(function(){//"count recent clicks somehow" or something. and have it slap on a + or - depending on what button was pressed.

any input and help would mean the world!


  • I had overcomplicated stuff A LOT

    Here is an example of it working!

    var lastFadeOutTime = 0;
    var fadeOutTimeout;
    function changeLife(player, amount) {
      var lifeTotalElement = $(`#lifeTotal${player.charAt(player.length-1)}`);
      var historyLogElement = $(`#historyLog${player.charAt(player.length-1)}`);
      var visualizationElement = $('#visualization');
      var currentLife = parseInt(lifeTotalElement.text());
      var newLife = currentLife + amount;
      // Update life total
      // Update history log
      var historyItem = amount > 0 ? `+${amount}` : `${amount}`;
      // Update visualization
      var totalChanges = 0;
      // Only consider changes after the last fade out
      historyLogElement.find('p').slice(0, 1000).each(function() {
        totalChanges += parseInt($(this).text());
      // Update visualization
      // Clear the previous timeout
      // Hide visualization after 5 seconds and reset the history log
      fadeOutTimeout = setTimeout(function() {
        var currentTime = new Date().getTime();
        if (currentTime - lastFadeOutTime >= 3000) {
          visualizationElement.fadeOut(function() {
            lastFadeOutTime = currentTime;
      }, 5000);
    body {
      font-family: 'Arial', sans-serif;
      text-align: center;
    .container {
      display: flex;
      justify-content: space-around;
      margin: 20px;
    .player {
      width: 150px;
      padding: 10px;
      border: 2px solid #333;
      border-radius: 5px;
    .life-total {
      font-size: 24px;
      margin-bottom: 10px;
    .btn {
      padding: 8px 16px;
      font-size: 16px;
      cursor: pointer;
    .history-log {
      display: none;
      /* hide history log */
    .visualization {
      margin-top: 20px;
      font-size: 18px;
      display: none;
      /* initially hide */
    <!DOCTYPE html>
    <html lang="en">
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Magic: The Gathering Life Counter</title>
      <div class="container">
        <div class="player" id="player1">
          <h2>Player 1</h2>
          <div class="life-total" id="lifeTotal1">40</div>
          <button class="btn" onclick="changeLife('player1', 1)">+1</button>
          <button class="btn" onclick="changeLife('player1', -1)">-1</button>
          <div class="history-log" id="historyLog1"></div>
        <div class="player" id="player2">
          <h2>Player 2</h2>
          <div class="life-total" id="lifeTotal2">40</div>
          <button class="btn" onclick="changeLife('player2', 1)">+1</button>
          <button class="btn" onclick="changeLife('player2', -1)">-1</button>
          <div class="history-log" id="historyLog2"></div>
      <div class="visualization" id="visualization"></div>
      <script src=""></script>