Can any one help me out with my code since its different to the scrim explaining it (methods and loops super chalenge)

Javascript
1

import {contactsArr} from “/contactsData.js”
/*
Challenge:

  1. Wire up this search pattern app so that inputting
    a full or partial name brings up the matching
    contact or contacts.
    */

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

function renderContact(contactObj) {
const contactCard = document.createElement(‘aside’)
contactCard.classList.add(‘contact-card’)

const nameP = document.createElement('p')
nameP.textContent = `Name: ${contactObj.name}`

const emailP = document.createElement('p')
emailP.textContent = `Email:${contactObj.email}`

const phoneP = document.createElement('p')
phoneP.textContent = `Phone:${contactObj.phone}`

contactCard.appendChild(nameP)
contactCard.appendChild(emailP)
contactCard.appendChild(phoneP)

return contactCard

/*
The CSS for contact-card has been done for you.
The name, email and phone details can be placed in
‘p’ elements and placed inside contact-card.
*/

}

patternSearchSubmit.addEventListener(“click”,filterContacts)

function filterContacts(){
const filteredContacts = contactsArr.filter(function(contactsArr){
return contactsArr.name.toLowerCase().includes(patternSearchInput.value.toLowerCase())
})

filteredContacts.forEach(function(contact) {
const card = renderContact(contact);
contactDisplay.appendChild(card);
})
}

2

Hey @agam_parmar, is this coding running as and outputting things like you expected? Getting more context around it as it might be that if it works, could just be another way of writing it, or if it’s not working correctly.

3

This is my review on your code:

import { contactsArr } from "./contactsData.js"
/*
Challenge:

Wire up this search pattern app so that inputting
a full or partial name brings up the matching
contact or contacts.
*/
const patternSearchInput = document.getElementById("pattern-search-input")
const patternSearchSubmit = document.getElementById("pattern-search-submit")
const contactDisplay = document.getElementById("contact-display")

function renderContact(contactObj) {
    const contactCard = document.createElement("aside")
    contactCard.classList.add("contact-card")

    const nameP = document.createElement('p')
    nameP.textContent = `Name: ${contactObj.name}`

    const emailP = document.createElement('p')
    emailP.textContent = `Email: ${contactObj.email}`

    const phoneP = document.createElement('p')
    phoneP.textContent = `Phone: ${contactObj.phone}`

    contactCard.appendChild(nameP)
    contactCard.appendChild(emailP)
    contactCard.appendChild(phoneP)

    return contactCard
    /*
    The CSS for contact-card has been done for you.
    The name, email and phone details can be placed in
    "p" elements and placed inside contact-card.
    */

}

patternSearchSubmit.addEventListener("click", filterContacts)

function filterContacts() {
    /**
     * CODE-REVIEW-NOTES
     * -----------------
     * 
     * Your app has one BUG 🐞
     * search for "jo", and hit the "search button" multiple times!
     * 
     * 👀 see what happens!!
     */
    const filteredContacts = contactsArr.filter(function (contactsArr) {
        /**
         * CODE-REVIEW-NOTES
         * -----------------
         * 
         * naming issue:
         * the .filter() function is iterating over "contactsArr"
         * which means it's working on "a contact" on each iteration
         * Thus, it's better named "singular" rather that "contactsArr"
         * which is plural AND also is the same
         * as the main array you're filtering.
         * These are two separate variables. try to name them differently then.
         * 
         * better like → contactsArr.filter(function (contact) { ... }
         */
        return contactsArr.name.toLowerCase().includes(patternSearchInput.value.toLowerCase())
    })

    /**
     * CODE-REVIEW-NOTES
     * -----------------
     * 
     * Two R&D for you: 
     * 1. What if you use .map() instead of .forEach()?
     * 2. What if you chain your .forEach() after .filter()?
     * 
     */
    filteredContacts.forEach(function (contact) {
        const card = renderContact(contact);
        contactDisplay.appendChild(card);
    })
}
1 Like