// site.js
                            "use strict";

                            // using lambda expressions to fetch users
                            fetch('https://jsonplaceholder.typicode.com/users')
                                .then((response) => response.json())
                                .then((data) => appendData(data))
                                // .then((json) => console.log(json))
                                .catch((err) => alert(err + " " + err.messages));


                            // function/loop thru json user 'data' and append it into the div with the id of 'userData'
                            function appendData(data) {
                                // get the div id where data will be placed
                                let allUsers = document.getElementById('userData');

                                for (let i = 0; i < data.length; i++) {
                                    // append each user/person to the html page
                                    // new div element
                                    let div = document.createElement('div');
                                    // fill the new div with a user/persons data
                
                                    div.innerHTML = `<span class="fw-bold">Full Name: </span>${data[i].name} <br>
                                                    <span class="fw-bold">Email: </span>${data[i].email} <br>
                                                    <span class="fw-bold"><a href="app_details.html?${data[i].id}">User Details</a></span><br>
                                                    <br>`;

                                    // append div to the allUsers div
                                    allUsers.appendChild(div);

                                }
                            }
                        
                            // app_details.html script
                            let url = document.location.href; // get the url
                            let splitUrl = url.split("?"); // split the url to get the id
                            let data = splitUrl[splitUrl.length - 1] || splitUrl[splitUrl.length - 2]; // assign the id value

                            fetch(`https://jsonplaceholder.typicode.com/users/${data}`)
                                .then(function (data) {
                                    return data.json(); // get the JSON data from the response using json()
                                })
                                .then((data) => {
                                    console.log(data);
                                    let results = document.getElementById('results');
                                    results.innerHTML = `<span class="fw-bold">User Id: </span>${data.id}</a><br>
                                                    <span class="fw-bold">User Name: </span><span class="h6 text-primary">${data.username}</span> <br>
                                                    <span class="fw-bold">Full Name: </span>${data.name} <br>
                                                    <span class="fw-bold">Email: </span><span class="h6 text-primary">${data.email}</span> <br>
                                                    <span class="fw-bold text-nowrap">Address: </span>${data.address.street} ${data.address.suite}, <br>
                                                    <span class="fw-bold">City/Zipcode: </span>${data.address.city} ${data.address.zipcode} <br>
                                                    <span class="fw-bold">Phone: </span><span class="h6 text-primary">${data.phone}</span> <br>
                                                    <span class="fw-bold">Personal Website: </span><a href="https://github.com/Hamberfim" title="The text is a Fake Link - Opens my GitHub site" target="_blank">${data.website}</a> <br>
                                                    <br>
                                                    <span class="fw-bold">Employer: </span><span class="h6 text-danger">${data.company.name}</span> <br>
                                                    <span class="fw-bold">Company Focus: </span>${data.company.catchPhrase} <br>
                                                    <span class="fw-bold">Market Approach: </span>${data.company.bs} <br>
                                                    <br>`;

                                })
                                // .then((json) => console.log(json))
                                .catch((err) => alert(err + " " + err.messages));
                        
                    

site.js

fetch()

Using fetch with modern lambda expressions we make the request by passing in the mandatory path to the api resource being consumed. The fulfilled response is assigned to the variable 'data' and passed into a function called appendData().

appendData()

Here we retrieve a div tag with 'userData' as the id where data will be placed in the html page. Using document.getElementById we assign it to the variable 'allUsers'. We then loop through the response data creating a new div tag to hold each user's name and email address, along with the users unique ID.

After each loop the information is added to a new div, then the div is appended to allUsers via allUsers.appendChild(div) and populated in the html page.

JS in app_details.html

User Details Link

From a very simple standpoint and using vanilla JS, we can send the user id in the url to the app_details.html page. We get the current url using document.location.href and assign it to the varible 'url'.

We split the url at the '?' to get the actual user id and assign it to the vaiable 'data'. Then basically using the same fetch() api process as in the site.js file we populate the html page with details specific to the user.