<main>
    <div class="container">
      <input type="text" class="searchBox" placeholder="Search on Google.com">
      <button class="btn">
        <i class="fa fa-search" aria-hidden="true"></i>
      </button>
      <a class="btn-2" href="#" target="_blank">
        <i class="fa fa-search" aria-hidden="true"></i>        
      </a>
        <i class="fas fa-redo redo"></i>
    </div>
  </main>
  <footer>
    <p> Note: Allowing pop-up might be required for search actions. </p>
</footer>

:root {
  --bg-color: #fafafa;
  --text-color: #5f5c68;
  --circle-border: #603ce2;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Baloo 2', cursive;  
}

body {
  background-image: linear-gradient(#603ce2, #e591aa);  
}


main {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  text-align: center;  
}

.container {
  position: relative;
  width: 300px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.searchBox {
  /* display: block; */
  width: 300px;
  height: 50px;
  padding: 10px;
  border-radius: 15px;
  border: none;
  background-color: var(--bg-color);
  transform: scale(0);
  transition: transform 1s ease;
}

.searchBox:focus {
  outline: none;
}

.btn, .btn-2 {
  position:absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: none;  
  transition: transform 0.2s ease;
  cursor: pointer;
  background: var(--bg-color);
}

.btn-2 {
  width: 50px;
  height: 50px;
  bottom: 0;
  transform: scale(0);
  z-index: 100;
  display: flex;  
  text-decoration: none;
}

.btn i, .btn-2 i {
  color: var(--text-color);
  transform: rotate(0.25turn);
  font-size: 1.5rem;
}


.btn-2 i  {
  color: var(--bg-color);
}

.redo {
  display: block;
  position: absolute;
  bottom: -50px;
  color:#dcd3fd;
  opacity: 0;
  transition: opacity 1.5s ease;
  cursor: pointer;
}

.appear {
  transform: scale(0);
  transition: transform 0.2s ease;

}


.redo:active {
  transform: scale(0.9);
}

.btn::after, .btn-2::after {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  height: calc(100% + 10px);
  width: calc(100% + 10px);
  border-radius: 50%;
  z-index: -10;
  transform-origin: center;
  background: linear-gradient(#603ce2,#f54991,#e591aa); 
  animation: circling 8s infinite;
}

@keyframes circling {

  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }  
}


.btn:hover i{
  color: var(--bg-color);
}


.btn:hover {
  background: linear-gradient(#e591aa,#603ce2);    
}


.btn:active {
  transform: scale(0.9);
}

footer {
  color: var(--bg-color);
  text-align: center;
  margin-bottom: 100px;
  text-shadow: 1px 1px 3px #3b268a;
}

const openBtn = document.querySelector('.btn');
const goBtn = document.querySelector('.btn-2');
const searchBox = document.querySelector('.searchBox');
const redo = document.querySelector('.redo');


openBtn.addEventListener('click', ()=> {
  goBtn.style.transform = 'scale(1)';
  openBtn.classList.add('appear');
  searchBox.style.transform = 'scale(1)';  
  searchBox.value = '';
  redo.style.opacity = '1';
})


goBtn.addEventListener('click', () => {
  goBtn.href = `https://www.google.com/search?q=${searchBox.value}`;
  searchBox.value = ''
})

searchBox.addEventListener('keyup', (e) => {
  if (e.keyCode === 13) {
    goBtn.click();    
  }
})

redo.addEventListener('click', () => {
  openBtn.classList.remove('appear');
  goBtn.style.transform = 'scale(0)';
  searchBox.style.transform = 'scale(0)'; 
  redo.style.opacity = '0';
});