const searchBtn = document.getElementById('search-btn');
const search = document.getElementById('search');
const tip = document.getElementById('tip');

//  variables for the typewritter effect
let i = 0;
let message = 'Girls who love Web Devs';
let speed = 150;

//  adding eventlistener for click on the search button for expanding its width
searchBtn.addEventListener('click', () => {
    search.style.width = '90%';
    search.style.paddingLeft = '4rem';
    //  to change the sursor type back to text after expanding
    search.style.cursor = 'text';
    //  to focus the input after expanding and awoid to have to click for input
    search.focus();

    //  typewritter effect on placeholder
    typeWritter();

});

//  function for the typewritter effect
function typeWritter() {
    if (i < message.length) {
        msg = search.getAttribute('placeholder') + message.charAt(i);
        search.setAttribute('placeholder', msg);
        i++;
        setTimeout(typeWritter, speed);
    }
}

//  to make the tooltip appear on the start of typing in the input
search.addEventListener('keydown', () => {
    tip.style.visibility = 'visible';
    tip.style.opacity = 1;
});