<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Square Web Worker Demo</title>
</head>
<body>

    <h1 id="resultContainer"></h1>
    <input type="number" id="inputNumber" placeholder="Enter a number" value="5">
    <button id="squareButton"> SQUARE</button>

    <script>
        var squareWorker = new Worker("doSquareWorker.js"),
            resultContainer = document.getElementById("resultContainer"),
            squareButton = document.getElementById("squareButton"),
            inputNumber=document.getElementById("inputNumber");

        squareButton.addEventListener("click",function(){
            squareWorker.postMessage({number:inputNumber.value});
        });

        squareWorker.addEventListener("message",function(workerEvent){
           var responseData = workerEvent.data,
               squareResult= responseData.result;
            resultContainer.innerText = squareResult;
        });
    </script>
</body>
</html>
// Code goes here

self.addEventListener("message",function(event){
    var inputData = event.data,
        inputNumber = parseInt(inputData.number,10),
        squareResult = Math.pow(inputNumber,2);
    self.postMessage({result:squareResult});
});