wasm/index.html

<!--  
  To use this html file to  successfully test the WASM codes with no error:
  1) Ensure that the index.html file is loaded from a running http or https server.
     A locally deployed server (http://localhost:80/index.html) can also be used.
  2) Ensure that the WASM file (sample.wasm) is located in the root directory of the server.
     The file can also be located in a path relative to the root. If this is so, ensure that the path is changed on line 27.
-->

<!DOCTYPE html>
<html lang="en">
  <head>
      <title>WASM Demo</title>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body align="center">
      <h1>WASM Demo on Front-End</h1>
      
      <div id="div-display" style="text-align:center"></div>
      
      <script>
        
        // This is a demo of wasm-rust compiled module with JavaScript IIFE
        (async function callWasm ()
        {
          let response = await fetch('sample.wasm');
          let bytes = await response.arrayBuffer();
          let { instance } = await WebAssembly.instantiate(bytes);
          
          // call functions
          let add = instance.exports.add(13, 12);
          let sub = instance.exports.sub(13, 12);
          let irr = instance.exports.irr([1.01, 2.07, 1.0, 3.0, 2.0]);
          
          // display functions' return value in the console
          console.log("The answer for add is: ", add);
          console.log("The answer for sub is: ", sub);
          console.log("The answer for irr is: ", irr);
          
          // display functions' return value on the web page
          const answers = `
            The answer for add is: ${add} <br>
            The answer for sub is: ${sub} <br>
            The answer for irr is: ${irr} <br>
          `
          document.getElementById("div-display").innerHTML = answers;
        })();
        
      </script>
  </body>
</html>