JSFiddle - React, Tailwind, and code Playground

by Shubham Agrawal

HTML

<div id="searchfield">
  <div id="main-search-fields">
    <div class="selects-container">
      <p>Genre:</p>
      <select name="genre">
        <option value="all">All</option>
        <option value="action">Action</option>
        <option value="adventure">Adventure</option>
        <option value="animation">Animation</option>
      </select>
    </div>

    <div class="selects-container">
      <p>Rating:</p>
      <select name="rating">
        <option value="0">All</option>
        <option value="9">5</option>
        <option value="8">4</option>
        <option value="7">3</option>
        <option value="6">2</option>
        <option value="5">1</option>
      </select>
    </div>

    <div class="selects-container" class="selects-container-last">
      <p>Year:</p>
      <select name="order_by">
        <option value="0">2005</option>
        <option value="9">2006</option>
        <option value="8">2007</option>
        <option value="7">2008</option>
      </select>
    </div>
  </div>
  <input type="button" onclick="saveValues()" id="browsepagebutton" value="search" />
</div>
</div>

CSS

.selects-container {
  display: inline-block;
}

.selects-container select {
  margin: 0;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  width: 130px;
  padding-left: 10px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-appearance: none;
  box-sizing: border-box;
  height: 40px;
  color: #a2a2a2;
  font-size: .9em;
  font-weight: normal;
  overflow: hidden;
  background-color: #282828;
  border: 0;
}

#browsepagebutton {
  background: #6ac045;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  display: inline-block;
  font-weight: bold;
  color: #fff;
  height: 42px;
  font-size: 16px;
  position: relative;
  width: 130px;
  padding: 7px 0;
  margin-top: 20px;
  -webkit-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  transition: all 300ms ease;
}

JavaScript

$('#search').on('click', function() {

      $('input[type="button"]').each(function() {
        var id = $(this).attr('id');
        var value = $(this).val();
        localStorage.setItem(id, value);

      });
    });