GoFood - Restaurant Finder using Zomato API

gofood-restaurant-finder-using-zomato-api.markdown

GoFood - Restaurant Finder using Zomato API

A Pen by Pradosh Ranjan Bairishal on CodePen.

License.

index.html

       
<div class="jumbotron jumbotron-billboard text-center">
	<div class="img"></div>
	<div class="container pt">
		<div class="text-center">
			<img class="logo" src='http://image.ibb.co/g52Ayb/Go_Food_2.png' />
		</div>
		<div class="mt-5 text-color">
			<h1>Find the best Restaurants</h1>
		</div>
		<div class="row mx-auto well col-lg-12 mt-5">
			<div class="col-xs-4 pr-0">
				<select id="select_id" class="form-control form-control-lg">
					<option value="Select City" hidden>Select City</option>
					<option value="4">Bengaluru</option>
					<option value="3" >Mumbai</option>
					<option value="1">Delhi</option>
					<option value="6">Hyderabad</option>
					<option value="5">Pune</option>
				</select>
			</div>
			<div class="col-xs-6 pl-0 pr-0">
				<input id="getText" type="text" class="form-control" placeholder="Search for Restaurant">
				</div>
				<button id = "getMessage" class = "btn btn-success col-xs-2">Search</button>
			</div>
		</div>
	</div>
	<div class="container">
		<div>
			<div class = "message col-md-12"></div>
		</div>
	</div>
	<hr>
		<h5 class="text-center">Written and coded by 
			<a target="_blank" href="https://www.linkedin.com/in/pradoshranjan/">Pradosh Ranjan</a>.
		</h5>

script.js

$(document).ready(function() {

 $("#getMessage").on("click", function() {
  var valueSearchBox = $('#getText').val()
  if (valueSearchBox === "") {
   return;
  }
  select();
 });
 //--------------------------------------------------SEARCH BY CITY-----------------------------------------

 function select() {
  var valueDropdown = $('#select_id').val();
  var valueSearchBox = $('#getText').val()
  var searchCity = "&q=" + valueSearchBox;
  var settings = {
   "async": true,
   "crossDomain": true,
   "url": "https://developers.zomato.com/api/v2.1/search?entity_id=" + valueDropdown + "&entity_type=city" + searchCity + "&count=100",
   "method": "GET",
   "headers": {
    "user-key": "d710754ce67200fb6fb9b5e26139f50e",
    'Content-Type': 'application/x-www-form-urlencoded'
   }
  }

  $.getJSON(settings, function(data) {

   data = data.restaurants;
   var html = "";

   $.each(data, function(index, value) {

    var x = data[index];
     console.log(typeof x);
    $.each(x, function(index, value) {
     var location = x.restaurant.location;
     var userRating = x.restaurant.user_rating;
     html += "<div class='data img-rounded'>";
     html += "<div class='rating'>";

     html += "<span title='" + userRating.rating_text + "'><p style='color:white;background-color:#" + userRating.rating_color + ";border-radius:4px;border:none;padding:2px 10px 2px 10px;text-align: center;text-decoration:none;display:inline-block;font-size:16px;float:right;'><strong>" + userRating.aggregate_rating + "</strong></p></span><br>";
     html += "  <strong class='text-info'>" + userRating.votes + " votes</strong>";
     html += "</div>";
     html += "<img class='resimg img-rounded' src=" + value.thumb + " alt='Restaurant Image' height='185' width='185'>";
     html += "<a href=" + value.url + " target='_blank' class='action_link'><h2 style='color:red;'><strong>" + value.name + "</strong></h2></a>";
     html += "  <strong class='text-primary'>" + location.locality + "</strong><br>";
     html += "  <h6 style='color:grey;'><strong>" + location.address + "</strong></h6><hr>";
     html += "  <strong>CUISINES</strong>: " + value.cuisines + "<br>";
     html += "  <strong>COST FOR TWO</strong>: " + value.currency + value.average_cost_for_two + "<br>";
     html += "</div><br>";
    });
   });
   $(".message").html(html);
  });

 }
 //--------------------------------------------------------------------------------------------------------
 $("#select_id").change(function() {
  select();
 });
});

scripts

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

style.css

  .jumbotron-billboard .img {
  margin-bottom: 0px;
  opacity: 0.7;
  color: #fff;
  background: #000 url("https://cdn.fstoppers.com/styles/full/s3/media/2017/09/11/autumn_food_photography_0.jpg") top center no-repeat;
  width: 100%;
  height: 100%;
  background-size: cover;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.jumbotron h2 {
  margin-top: 0;
}

.jumbotron {
  position: relative;
  padding-top: 50px;
  padding-bottom: 50px;
}

.jumbotron .container {
  position: relative;
  z-index: 2;
}

@media screen and (max-width: 768px) {
  .jumbotron {
    padding-top: 20px;
    padding-bottom: 20px;
  }
}

.text-color {
  color: white;
}

.pt {
  padding-top: 75px;
}

.logo {
  width: 150px;
  height: 150px;
}

.data {
  padding-left: 50px;
  padding-right: 50px;
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: #F5F5F5;
}

a.action_link {
  text-decoration: none;
}

.resimg {
  float: left;
  margin-right: 15px;
}

body {
  background-image: url("https://image.ibb.co/fqkgMw/dust_scratches.png");
}

.horizontal-center-row {
  display: flex;
  justify-content: center;
}

.rating {
  float: right;
  margin-right: 15px;
}
    

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />