<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">

<div class="container">
		<h1>Search for your Soulmate</h1>

		<div class="search-field">
				<i id="search-btn" class="fas fa-search"></i>
				<input id="search" type="text" placeholder="">
				<p id="tip">Hit Enter to Search</p>
		</div>
</div>

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-family: sans-serif;
    background: #242424;
}

body {
    height: 100vh;
    color: #eee;
    display: grid;
    justify-content: center;
    align-items: center;
}

.container {
    text-align: center;
}

h1 {
    margin: 1.5rem;
}

input {
    background: #000;
    width: 4rem;
    height: 4rem;
    margin: 1.5rem;
    padding: 1.5rem;
    border-radius: 2rem;
    border: 2px solid cornflowerblue; 
    cursor: pointer;  
    outline: none;
    font-size: 1.5rem;
    color: #eee;
    transition: width 1s ease;
}

i.fas {
    font-size: 2rem;
		color: cornflowerblue;
    margin: 2.5rem;
    position: absolute;
    cursor: pointer;
}

p#tip {
    text-align: left;
    margin-left: 6rem;
    visibility: hidden;
    opacity: 0;
    transition: all 2s;
    color: cornflowerblue;
}

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;
});