Untitled
plain_text
20 days ago
2.4 kB
4
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>