Untitled

unknown
plain_text
20 days ago
2.4 kB
Indexable
Never
<!DOCTYPE html>

<html>
  <head>
    <link rel="stylesheet" href="styles.css" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
      crossorigin="anonymous"
    />
  </head>

  <body>
    <!-- the entire body must be written by student -->
    <table class="table table-striped table-hover table-bordered">
      <thead>
        <tr>
          <th>Promise Name</th>
          <th>Time taken (s)</th>
        </tr>
      </thead>
      <tbody id="output">
        <tr id="loading">
            <td style="text-align:center;" colspan="2" >Loading...</td>
        </tr>
    </tbody>
</table>

<script type="text/javascript" src="./script.js"></script>
<script>
    const tbody = document.querySelector('tbody');

    let first = (Math.random()*3000).toPrecision(4);
    let second = (Math.random()*3000).toPrecision(4);
    let third = (Math.random()*3000).toPrecision(4);
    
    const prom1 = new Promise((resolve,reject)=>{
            setTimeout(() => {
                resolve('x');
            }, first);
        })
        const prom2 = new Promise((resolve,reject)=>{
            setTimeout(() => {
                resolve('y');
            }, second);
        })
        const prom3 = new Promise((resolve,reject)=>{
            setTimeout(() => {
                resolve('z');
            }, third);
        })

        Promise.all([prom1, prom2, prom3]).then((values) => {
            console.log(values);
            makeTBody();
        });
        console.log(third);
        // console.log(first.toPrecision(7), second, third);
        let total = (Number(first)+Number(second)+Number(third)).toPrecision(4);
        function makeTBody(){
            let myStr = ` <tr>
                <td>Promise 1</td>
                <td>${first/1000}</td>
            </tr>
            <tr>
                <td>Promise 2</td>
                <td>${second/1000}</td>
            </tr>
            <tr>
                <td>Promise 3</td>
                <td>${third/1000}</td>
            </tr>
            <tr>
                <td>Total</td>
                <td>${total/1000}</td>
            </tr>`;
            tbody.innerText='';
            tbody.innerHTML = myStr;
        }
        </script>
  </body>
  </html>