Libert Search

index.html

<div class="wrap">
  <h1>Libert 📖</h1>
  <form id="form">
   <div class="search">
      <input type="text" class="searchTerm" id="lolz" placeholder="What are you looking for?">
      <button type="submit" class="searchButton"  onclick="search()">
        <i class="fa fa-search"></i>
     </button>
     </form>
   </div>
</div>

libert-search.markdown

Libert Search

Just a simple responsive search bar.

A Pen by Sam Jajoo on CodePen.

License.

script.js

$('#form').submit(function(ev) {
  ev.preventDefault();
  var button = document.getElementById('lolz');
  var location = "https://libert.glitch.me/" + lolz.value;
  console.log(location)
  window.location.href = location;
  
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

style.css

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

body{
  background: #f2f2f2;
  font-family: 'Open Sans', sans-serif;
}

.search {
  width: 100%;
  position: relative
}

.searchTerm {
  float: left;
  width: 100%;
  border: 3px solid #00B4CC;
  padding: 5px;
  height: 20px;
  border-radius: 5px;
  outline: none;
  color: #9DBFAF;
}

.searchTerm:focus{
  color: #00B4CC;
}

.searchButton {
  position: absolute;  
  right: -50px;
  width: 40px;
  height: 36px;
  border: 1px solid #00B4CC;
  background: #00B4CC;
  text-align: center;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
  font-size: 20px;
}

/*Resize the wrap to see the search bar change!*/
.wrap{
  width: 30%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}