task2.html

<html>
   <head>
       <title>List of Users</title>
   </head>
   <body>
     
     <table></table>

     <script>
      /**
          * List the Users from the below API
          * https://jsonplaceholder.typicode.com/users
          */
         let userData = []

         //Get the list of Users from API
         let fetchUsers = async () => {
             let fetchUserResponse = await fetch('https://jsonplaceholder.typicode.com/users')
             
             if(!fetchUserResponse.ok) return 
             
             return await fetchUserResponse.json();
         }

         //Generate the HTML Table Head
        function generateTableHead(table, data) {
          let thead = table.createTHead();
          let row = thead.insertRow();
          for (let key of data) {
            let th = document.createElement("th");
            let text = document.createTextNode(key);
            th.appendChild(text);
            row.appendChild(th);
          }
        }

        //Generate the HTML Table Rows
        function generateTable(table, data) {
          data.forEach(user => {
            let row = table.insertRow();
            for (key in user) {
              let cell = row.insertCell();
              let text = document.createTextNode(user[key]);
              cell.appendChild(text);
            }
          });
        }

        /**
         * Functionality to call a API to get the Users lit
         * Generate a HTML Table to render it.
        */
       fetchUsers()
         .then(users => {
           console.log(users)
           let table = document.querySelector("table");
           let data = Object.keys(users[0]);
           generateTable(table, users); // generate the table
           generateTableHead(table, data); // then the head

        })         
     </script>

   </body>
</html>