I am studying about JavaScript these days. But a few days ago, I saw this problem and thought about it, but failed to structure it.
I have no idea which one to start with.
How can I write a code?
[ Issue ]
Enter employee information into an array, transform it into an HTML element, and append it to
ul#container
[ Input ]
Factor 1:arr
Array with objects as elements
arr[i] has attributes such as 'firstName', 'lastName', 'age', 'role'
Properties such as 'firstName', 'lastName', 'role' are string type
Property 'age' is number type (1 or more integers)
[ Output ]
Do not create a separate return statement.
[ Precautions ]
If you click on the name of an employee created with the <a> element, the provided
printRole function must be executed and the role of that employee must be output to the
console.
[Input/Output Example ]
{ firstName: 'Joe', lastName: 'Blow', age: 42, role: 'clerk' },
{ firstName: 'Mary', lastName: 'Jenkins', age: 36, role: 'manager' },
];
test4(list);
// --> 'ul#container' should be changed as below.
<ul id="container">
<li>
<a class="name">Joe Blow</a>
<div class="age">42</div>
</li>
<li>
<a class="name">Mary Jenkins</a>
<div class="age">36</div>
</li>
</ul>
[ Hint ]
ul#container is given.
<!DOCTYPE html>
<html>
<body>
<ul id="container"></ul>
</body>
</html> ```