I'm trying to solve a testdome question.
Implement the showCustomers function so that it renders customers as list items. The first argument to the function, customers, is an array of objects with the name and email properties. The second argument to the function, targetList, is an unordered HTML list to which each customer should be added as a separate list item.
The name and email properties should be added as two paragraphs inside the list item. At first, the email paragraph element should not be present in the DOM. The email paragraph element should be added to the DOM after the name is clicked, and it should be removed from the DOM when the name is clicked again.
For example, the following code:
document.body.innerHTML = `
<div>
<ul id="customers">
</ul>
</div>
`;
let customers = [{name: "John", email: "john@example.com"},
{name: "Mary", email: "mary@example.com"}];
showCustomers(customers, document.getElementById("customers"));
let customerParagraph = document.querySelectorAll("li > p")[0];
if(customerParagraph) {
customerParagraph.click();
}
console.log(document.body.innerHTML);
Should render:
<div>
<ul id="customers">
<li>
<p>John</p>
<p>john@example.com</p>
</li>
<li>
<p>Mary</p>
</li>
</ul>
</div>
I did the first part. This is my code:
function showCustomers(customers, targetList) {
// Your code goes here
customers.forEach(item => {
let elem = `
<li>
<p>${item.name}</p>
<p>${item.email}</p>
</li>
`;
targetList.innerHTML += elem;
})
}
document.body.innerHTML = `
<div>
<ul id="customers">
</ul>
</div>
`;
let customers = [{name: "John", email: "john@example.com"},
{name: "Mary", email: "mary@example.com"}];
showCustomers(customers, document.getElementById("customers"));
let customerParagraph = document.querySelectorAll("li > p")[0];
if(customerParagraph) {
customerParagraph.click();
}
console.log(document.body.innerHTML);
This code passes 2 of 4 tests. I couldn't find a way to make the email toggle.
function showCustomers(customers, targetList) {
// Your code goes here
customers.forEach((item) => {
const li = document.createElement("li");
const name = document.createElement("p");
name.textContent = item.name;
name.style.cursor = "pointer";
name.addEventListener("click", (event) => {
const parent = event.target.parentElement;
if (parent.children.length == 1) {
const email = document.createElement("p");
email.textContent = item.email;
parent.appendChild(email);
} else {
parent.lastChild.remove();
}
});
li.appendChild(name);
targetList.appendChild(li);
});
}
document.body.innerHTML = `
<div>
<ul id="customers">
</ul>
</div>
`;
let customers = [
{ name: "John", email: "john@example.com" },
{ name: "Mary", email: "mary@example.com" }
];
showCustomers(customers, document.getElementById("customers"));
let customerParagraph = document.querySelectorAll("li > p")[0];
if (customerParagraph) {
customerParagraph.click();
}
console.log(document.body.innerHTML);