<html>
<head>
<title>JavaScript</title>
</head>
<body>
<script>
let counter = 0;
document.addEventListener("DOMContentLoaded", function (event) {
const body = document.querySelector("body");
let output = document.createElement("div");
output.innerHTML = "click the button";
output.style.fontSize = "2em";
output.style.padding = "5px";
output.style.fontFamily = "fantasy";
output.setAttribute("class", "message");
body.appendChild(output);
let btn = document.createElement("button");
btn.innerHTML = "click me";
btn.style.border = "1px solid #ddd";
btn.style.padding = "25px";
btn.style.width = "400px";
btn.style.fontSize = "2em";
btn.style.textAlign = "center";
btn.style.backgroundColor = "red";
btn.style.color = "white";
btn.addEventListener("click", function () {
console.log("clicked");
counter++;
let mes = "You clicked this <b>" + counter + "</b> times";
document.querySelector(".message").innerHTML = mes;
})
body.appendChild(btn);
})
</script>
</body>
</html>