Task:
With the list of clients presented, the user should be able to click on any selected client and redirect the user to another page representing the selected client’s information.
Description:
Create a client class with constructors for initializing client properties such as age, gender, and other essential fields.
Class example:
class Client {
constructor(age, gender, ...) {
this.age = age;
this.gender = gender;
...
}
// Method to format client information
formatClientInfo() {
return `${this.name}, Age: ${this.age}, Gender: ${this.gender}`;
}
}
Create an event listener that tracks when the user clicks on a client in the list. This will trigger the navigation to the client detail page and pass the relevant client ID or name. Create a function that updates the UI with the client information retrieved from the API (either real or placeholder). When the user selects a client, the client details page will be populated with the fetched client data.
Event listener example:
document.addEventListener('DOMContentLoaded', () => {
const clientId = window.location.pathname.split('/').pop(); // Get client ID from URL
Client.fetchClientData(clientId)
.then(client => {
// Update the UI with client information
document.querySelector('#client-age').textContent = client.age;
document.querySelector('#client-gender').textContent = client.gender;
});
});
Acceptance Criteria:
Client class build with constructor and event listener.
Correct event listener created and placed.
Task: With the list of clients presented, the user should be able to click on any selected client and redirect the user to another page representing the selected client’s information.
Description: Create a client class with constructors for initializing client properties such as age, gender, and other essential fields. Class example:
Create an event listener that tracks when the user clicks on a client in the list. This will trigger the navigation to the client detail page and pass the relevant client ID or name. Create a function that updates the UI with the client information retrieved from the API (either real or placeholder). When the user selects a client, the client details page will be populated with the fetched client data.
Event listener example:
Acceptance Criteria:
Client class build with constructor and event listener. Correct event listener created and placed.