<body>

    <section class="preview">
        
        
        <label for="search">Search by contact name: </label>
        <input id="search" type="text">
        <button>Search</button>


    </section>

 </body>
  <script>
  </script>

</html>
  p {
        color: purple;
        margin: 0.5em 0;
      }

      * {
        box-sizing: border-box;
      }
const name = 'Mustafa';
    const para = document.createElement('p');
    const button = document.querySelector('button');
    const input = document.querySelector('input');
    

    const phonebook = [
      { name : 'Chris', number : '1549' },
      { name : 'Li Kang', number : '9634' },
      { name : 'Anne', number : '9065' },
      { name : 'Francesca', number : '3001' },
      { name : 'Mustafa', number : '6888' },
      { name : 'Tina', number : '4312' },
      { name : 'Bert', number : '7780' },
      { name : 'Jada', number : '2282' },
    ]

    button.addEventListener('click', search);


    function search(){
        const searchName = input.value.toLowerCase();
        for(let i = 0; i < phonebook.length; i++){
            if(searchName === phonebook[i].name.toLowerCase()){
                para.textContent = `${phonebook[i].name} ${phonebook[i].number}`;
                break;
            } 
            
        } if(para.textContent === ''){
                para.textContent = ('Contact not found')
    }
      input.value = '';
      input.focus();
}


    const section = document.querySelector('section');
    section.appendChild(para);
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.