Show message when web worker starts and hide it when it's done

JavaScript
1

I’m a bit new to Javascript. I’m on Windows 10 with Visual Studio Code.

I was doing a tutorial on JS Web Workers. I’m not familiar with async and await stuff. I was wondering if it’s possible to make a message <p> tag visible which says “Calculating” and then hide this <p> element when the web worker is done. Surely there is some event that fires when the web worker is done but I haven’t found it yet.

My HTML page:

<!DOCTYPE html>
<html lang="en">
<head>
<!-- comment -->
    <title>DOM Manipulation Guide, templates</title>
    <meta charset="UTF-8"> <!-- Required to show emojis -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="HTML, CSS, Javascript">
    <meta name="description" content="Learn HTML">
    <meta name="author" content="Me@somewhere.com">
    <!-- link rel="stylesheet" href="style1.css" -->
    <!-- base href="https://mysite.com/base/" target="_blank" -->
    <!-- Using Google fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
    <style>
    </style>
</head>
<body>
  <h3>Web worker test</h3>
  <button id="sumButton">Calculate Sum</button>
  <button id="bgButton">Change background</button>

  <p id="calcMessage"></p>
    <script src="script02ww.js"></script>
</body>
</html>

My script02ww.js which is called by the index.html page

/* Javascript web worker tutorial. */
// console.log("Hello world");



const worker = new Worker("worker.js"); //Use the script filename.

const sumButton = document.querySelector("#sumButton");
const bgButton = document.querySelector("#bgButton");
const calcMessage = document.querySelector("#calcMessage");
calcMessage.style.display = "none"; //Hide element
//const sleep = (delay) => new Promise((resolve) => setTimeout(resolve, delay)); //Define function which takes milliseconds as parameter.


sumButton.addEventListener("click", (event)=> {
  //Web workers cannot access the DOM so make the "Calculating" message visible here.
  calcMessage.style.display = "block"; //Hide element
  calcMessage.textContent = "Calculating..."
  sumButton.style.background = 'yellow';
  
  // let sum = 0;
  // for (let i = 0; i< 10000000000; i++)
  //   sum += 1;
  worker.postMessage('Hello worker');

  sumButton.style.background = 'lightgray';
  calcMessage.style.display = "none"; //Hide element
  
});

worker.onmessage = function(message) { //Receive message here. 
  //console.log(message);
  alert(`The final sum is ${message.data}`);
}

bgButton.addEventListener("click", event => {
  if (document.body.style.background !== "green")
    document.body.style.background = "green";
  else 
    document.body.style.background = "blue";
});

My worker.js file called by script02ww.js

//worker.js for Web Worker
self.onmessage = function(message) {
  let sum = 0;
  for (let i = 0; i< 10000000000; i++)
    sum += 1;
  postMessage(sum);
  //alert(`Sum=${sum}`);

}

Thank you for your help. The point is to let me (pretending to be the user) know when the web worker is done working without using console.log or alert().

I may have fundamental misunderstanding about this since web workers run in another thread, not in the main JS thread.
What I’d like may not be possible.