Here is my way of solution of super challenge 2 of advance javascript!

General Discussion
1

import contactsArr from “./contactsData.js”

const patternSearchInput = document.getElementById(‘pattern-search-input’)
const patternSearchSubmit = document.getElementById(‘pattern-search-submit’)
const contactDisplay = document.getElementById(‘contact-display’)

function renderContact(contactObj) {
contactDisplay.innerHTML = “”
if (patternSearchInput.value === “”) {
contactDisplay.innerHTML = <p>Type something</p>
return;
}
let filteredData = contactObj.filter(e =>
e.name.toLowerCase().includes(patternSearchInput.value.toLowerCase()) ||
e.phone.includes(patternSearchInput.value.toLowerCase()) ||
e.email.includes(patternSearchInput.value)
)

if (filteredData.length === 0) {
    contactDisplay.innerHTML = `<p>No match found!</p>`
}

filteredData.forEach((o) => {

    const contactCard = document.createElement('aside')
    contactCard.classList.add('contact-card')
    contactDisplay.append(contactCard)

    contactCard.innerHTML = `<p>${o.name}</p>

${o.email}

${o.phone}

` 
})

}

patternSearchSubmit.addEventListener(“click”, () => {
renderContact(contactsArr)
})

patternSearchInput.addEventListener(“input”, () => {
renderContact(contactsArr)
})