https://beeceptor.com/console/diamondtdesign<br>
sign in with google
<br>
https://diamondtdesign.free.beeceptor.com
<br>

curl -v -X GET 'https://diamondtdesign.free.beeceptor.com/todos' -H 'some-header: some-value'
<br>
https://diamondtdesign.free.beeceptor.com/favicon.ico
<br>



 <!-- Here a loader is created which loads till response comes -->
        <div class="d-flex justify-content-center">
            <div class="spinner-border"
                 role="status" id="loading">
                <span class="sr-only">Loading...</span>
            </div>
        </div>
        <h1>Registered Employees</h1>
        <!-- table for showing data -->
        <table id="employees"></table>
<!---->
   <script>
// api url
const api_url =
      "https://diamondtdesign.free.beeceptor.com/todos";
 
// Defining async function
async function getapi(url) {
   
    // Storing response
    const response = await fetch(url);
   
    // Storing data in form of JSON
    var data = await response.json();
    console.log(data);
    if (response) {
        hideloader();
    }
    show(data);
}
// Calling that async function
getapi(api_url);
 
// Function to hide the loader
function hideloader() {
    document.getElementById('loading').style.display = 'none';
}
// Function to define innerHTML for HTML table
function show(data) {
    let tab =
        `<tr>
          <th>Id</th>
          <th>Task</th>
          <th>Completed</th>
         </tr>`;
   
    // Loop to access all rows
    for (let r of data) {
        tab += `<tr>
    <td>${r.id} </td>
    <td>${r.title}</td>
    <td>${r.completed}</td>         
</tr>`;
    }
    // Setting innerHTML as tab variable
    document.getElementById("employees").innerHTML = tab;
}
   </script>