SEARCH SESSION

by kimyc1223

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="./style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/core.js"></script>
</head>
<body>
  <div class="bigBox">
    <h2>Search session</h2>
  </div>
  <div class="container">
    <input type="text" class="searchText inputField" id="input">
    <button class="btn"><i class="fas fa-search"></i></button>
  </div>
  <script lang="javascript">
    let textField = document.getElementById('input')

    textField.onfocus = () => {
      textField.classList.remove('searchText')
    }

    textField.onblur = () =>{
      if (textField.value == "")
        textField.classList.add('searchText')
    }
  </script>
</body>
</html>

CSS

*{
  margin:0px;
  padding:0px;
  font-family:sans-serif;
}

body{
  background-color: #27ae60;
}

.bigBox{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  text-align: center;
}

.bigBox h2{
  text-transform: uppercase;
  font-size: 30px;
  color:white;
  margin:15px;
}

.container{
  background-color: #1A7540;
  height: 50px;
  vertical-align: middle;
  border-radius: 50px;
  position:absolute;
  left:50%;
  top:60%;
  transform:translate(-50%,-50%);
}

.inputField{
  border:none;
  outline:none;
  font-size:16px;
  border-radius: 50px;
  height:25px;
  padding: 5px 10px;
  margin:7px 7px;
  display: inline;
  width:200px;
  float:left;
  color:#717171;
}

.searchText{
  width:0px;
  transition: 0.2s !important;
  padding: 5px 0px !important;
  margin:7px 0px !important;
}

.container:hover > .searchText {
  width:200px !important;
  margin:7px 7px !important;
  padding: 5px 10px !important;
}

.btn{
  margin:7px 7px;
  width: 35px;
  height: 35px;
  float:left;
  color:white;
  background-color: #27ae60;
  border-radius: 50px;
  display: inline;
  border:none;
}