4. Clickable container

Sometimes, you want a bigger area to be clickable than just the Link element. For example, an entire Container element. The Repeat element has 2 parts:

• A Link element that contains the actual link
• A Container element that contains everything we want to show in the Repeat element and that must be clickable.

The trick here is to move the HTML from the Container element inside the Link element. This can be done with the following code. Be sure to check the class names for each element to ensure it references the correct element

• employees__container: the Repeat element
• employee__link: the Link element that will have it's content replaced.
• employee__container: the Container element with the Text and Image elements.

// get the repeat element with all employees
const employees = document.querySelector('.employees__container')
// get the Link and Container elements
const links = employees.querySelectorAll('.employee__link')
const employee_container = employees.querySelectorAll('.employee__container')
// for each link: replace the text with the content from the container
links.forEach((link, index) => {
    const a = link.querySelector('a')
    const employee_content = employee_container[index].parentElement.innerHTML
    a.innerHTML = employee_content
    // remove the original container
    employee_container[index].parentElement.parentElement.removeChild(employee_container[index].parentElement)
})

The final step is to set the cursor to a pointer to indicate to the user that the entire container is clickable. This is done in CSS.

.employee__container{ cursor: pointer; }