How to filter items in JavaScript

1

When i load the page i am getting data from JSON server(contacts).Each contact has it s name,email,phone and type.When i type the name of any particular contact in the input field designed for filtering i want that contact to show in the UI and others to disappear.When i remove that contact from the input field all contacts should appear in the UI again.I am not seeing any errors in the console.
This is the link to my Github repo:

Here are the snippets of the code
HTML

  <!--Filter-->
          <form class="col s12" id="filter-form">
            <div class="row">
              <div class="input-field col s12">
                <input type="text" id="filter" class="validate" />
                <label for="filter" class="active">Filter Contacts...</label>
              </div>
            </div>
          </form>

app.js

import { ui } from "./ui";
import axios from "axios";

//Get contacts on DOM load

const getContacts = () => {
  axios
    .get("http://localhost:3000/contacts")
    .then(response => ui.showContacts(response.data))
    .catch(err => console.log(err));
};

document.addEventListener("DOMContentLoaded", getContacts);

//Filter contacts

const filterContacts = e => {
  //Get filter value
  const text = e.target.value.toLowerCase();

  //Get contacts
  document.querySelectorAll(".contact-row").forEach(contact => {
    const contactName =
      contact.children[0].children[0].children[0].children[0].children[0]
        .children[0].textContent;

    if (contactName.toLowerCase().indexOf(text) != -1) {
      contact.style.display = "block";
    } else {
      contact.style.display = "none";
    }
  });
  e.preventDefault();
};

document.querySelector("#filter").addEventListener("keyup", filterContacts);

ui.js

class UI {
  constructor() {
    this.contactList = document.querySelector("#contact-list");
   }

showContacts(contacts) {
    let output = "";

    contacts.forEach(contact => {
      output += `
      <div class="row contact-row">
      <div class="col s12">
      <div class="card">
      <div class="card-content">
      <p class="card-title indigo-text text-darken-4"><span>${contact.name}</span>
      
      <a class="waves-effect indigo darken-4 btn right"> ${contact.type}</a>
      
      </p>
      <p><i class="fas fa-envelope-open"></i> ${contact.email}</p>
      
      <p><i class="fas fa-phone"></i> ${contact.phone}</p>
      <br>
      <p>
      <a class="waves-effect grey darken-4 btn-flat edit" data-id="${contact.id}"><span class="white-text">Edit</span></a>
  <a class="waves-effect red darken-2 btn-flat delete" data-id="${contact.id}"><span class="white-text">Delete</span></a>
      </p>
      </div>
      </div>
      </div>
      </div>`;
    });
    this.contactList.innerHTML = output;
  }
}
export const ui = new UI();