JSFiddle - React, Tailwind, and code Playground

HTML

<h1>This is a heading</h1>
<p>This is a paragraph!</p>



<a href="downloadFile.zip" id="download" class="button">Download the file...</a><p>

<p id="demo">A Paragraph.</p>

<button id="pChange">Try It</button>

CSS

body {background-color:lightgrey}
h1   {color:blue}
p    {color:green}

.button {
    background-color: #ddcccc;
    border: 1px solid black;
    color: black;
    font-family: Arial;
    font-size: small;
    text-decoration: none;
    padding: 3px;
}

JavaScript

var downloadButton = document.getElementById("download");
var counter = 10;
var newElement = document.createElement("p");
newElement.innerHTML = "You can download the file in 10 seconds.";
var id;

downloadButton.parentNode.replaceChild(newElement, downloadButton);

id = setInterval(function() {
    counter--;
    if(counter < 0) {
        newElement.parentNode.replaceChild(downloadButton, newElement);
        clearInterval(id);
    } else {
        newElement.innerHTML = "You can download the file in " + counter.toString() + " seconds.";
    }
}, 1000);
var b = document.getElementById("pChange");
b.addEventListener('click',function myFunction() {
    document.getElementById("demo").innerHTML = "Paragraph changed.";
});