JSFiddle - React, Tailwind, and code Playground

by Dug Sohn

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<div class="container p-5 text-cetner">
<div class-"row">
<div class="col">
<div class="btn-group">
  <button id="download-button" class="btn btn-default btn-primary"><i class="fas fa-download"></i></button>
  <button id="play-button" class="btn btn-default" disabled>Download to Begin</button>
</div>
<div class-"row">
<div class="col text-center">
<small id="download-status" class="text-muted text-center"></small>
</div>
</div>

</div>
</div>

CSS

.btn:disabled {
    cursor: not-allowed;
    opacity: 0.3;
  }
  small {
    font-size:10px;
    text-transform:uppercase;
    color: #ecec
  }

JavaScript

document.addEventListener("DOMContentLoaded", function() {
    const downloadButton = document.getElementById("download-button");
    const playButton = document.getElementById("play-button");
        const downloadStatus = document.getElementById("download-status");


    downloadButton.addEventListener("click", function() {
    downloadButton.innerHTML = '<i class="fas fa-circle-notch fa-spin"></i>';
      downloadButton.classList.remove("btn-primary");
      downloadButton.disabled = true;

      let downloadProgress = 0;
      const interval = setInterval(function() {
        downloadProgress++;
         downloadStatus.innerHTML = `Downloading: ${downloadProgress}%`;
        if (downloadProgress === 100) {
          clearInterval(interval);
          playButton.classList.add("btn-primary");
          downloadButton.innerHTML = '<i class="fas fa-download"></i>';
          downloadButton.classList.remove("btn-primary");
          downloadButton.disabled = true;
          playButton.disabled = false;
          playButton.innerHTML = "Ready to Play";

        }
      }, 50);
    });

    playButton.addEventListener("click", function() {
      console.log("Playing...");
    });
  });