restaurant tag creator

Helper to create tags for restaurants

by falldeaf

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div id="message" class="alert alert-info amessage" role="alert">
  This is a info alert—check it out!
</div>

<div class="container maincontain">

  <h1>
    TCPalm Restaurant Review Tag Creator
  </h1>


  <form>
    <div class="form-group">
      <label for="exampleInputEmail1">Restaurant Name</label>
      <input class="form-control" name="rname" type="text" val=""/>
      <small class="form-text text-muted"></small>
    </div>

    <div class="form-group">
      <label for="exampleInputEmail1">Style of Food</label>
      <select class="form-control" id="rselect" size="1">
<option value=''>Choose a style</option>
<option value='allyoucaneat'>All-You-Can-Eat</option>All-You-Can-Eat
<option value='american'>American</option>American
<option value='bakery'>Bakery</option>Bakery
<option value='bbq'>Bar-b-q</option>Bar-b-q
<option value='brazilian'>Brazilian</option>Brazilian
<option value='bar'>Bar and Grill</option>Bar and Grill
<option value='buffet'>Buffet</option>Buffet
<option value='brunch'>Brunch</option>Brunch
<option value='cafeteria'>Cafeteria</option>Cafeteria
<option value='candy'>Candy Shop</option>Candy Shop
<option value='caribbean'>Caribbean</option>Caribbean
<option value='chinese'>Chinese</option>Chinese
<option value='coffee'>Coffee shop</option>Coffee shop
<option value='crab'>Crab House</option>Crab House
<option value='cuban'>Cuban</option>Cuban
<option value='diner'>Diner</option>Diner
<option value='donuts'>Donuts</option>Donuts
<option value='eclectic'>Eclectic</option>Eclectic
<option value='french'>French</option>French
<option value='korean'>Korean</option>Korean
<option value='german'>German</option>German
<option value='greek'>Greek</option>Greek
<option value='health'>Health Food</option>Health Food
<option value='hotdog'>Hot...

CSS

#message {
  display:none;
  position:absolute;
  top: 5px;
  left: 50px;
  right: 50px;
}

.maincontain {
  margin-top:100px;
}

.cpinstructions {
  margin-top:40px;
}

#cutpaste {
  border:dashed 2px grey;
  border-radius:5px;
  padding: 10px 10px 30px 10px;
  margin:5px;
}

#scissors {
  width: 48px;
  height: 43px;
  position: absolute;
  margin-left:50px;
  margin-top: 10px;
  background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAArCAYAAAA+EwvfAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA7ZJREFUeNrMmWtIFFEUx9fNQMK0stLKkEgJQ4wo1FCjF0h9qA+9hKDIih5IREgImR+Snqh96Ytg9CFKCaSsKOgpJD4SelGIVGQPKoyM0CRT2/43/gu3YR53d2dm58APhpkzd87Ze+8595z1+bwpk8Ah0Ar6wCD4CK6CdT6Py1LQAwImnAPjvWh8Hn/toKG/QTu4Bp7qOKEr0fIsDjyTDGwDC6XnfrAFDEk6BcEHS0A1XxLT9wQ0gu0g1SUH1kuGfQYzDfTKJb2z4kaFxXr7Bo7xF3JS6qRvHjXRSwED1LsfvFFn4YSgAyxy0IFL0rc2muglge/UaxHL5wvYzZe+mryYCx6CMocc6JGuZ5jo5TPM+hha/5MM8EBhNq6D2TY7kKuZbT1JAM8lvWKjKHQSjFk48Q5sttEBP8NlcPwzYLL0fDETW/B5l9W+LAIfFGajHsTb5MRURsDg2GKJ3AWPwIh0X2TnTJUB53C5WDnxmBk0UhkHmiy+1QlyQh34oOYX0EMsuSNcCuHIKmZdvbFFRr4F1tLJsGQleKUwG7dBegjjZoEGg7F6wWnq2CLTwEUFJ8QaLbEYK43nmSGd99sYIBKcSjr7wE8FRy6ARM27MWA/ndTqi5y0LYJlGPLJsUvBiRdgDd/JYVTR0xMhdK7bJ8gJPFAFFGg2mbX6aJ/jd/HQFwiDBreWjJVk8KwUivF3vFZZxfEYMqBgfK+LtUZIkqaYL+550fhig/BoxAGvGC4STk0YG3hYCrFRk2ydjkEoiP1SGC3jS6TyzgyRvJaDywbPRSW4zE3DkxTPROKcU6qJ85vAex3dX6DSjZwgprtbsUbIMxgjmRlcr+prcWo2YtiTGVYwvkaxSss3KWBuMqpNtMP4WSworAx/G2ZUKTIpZl6zTzQ/XONXgzcKxl+ho5GUk3t5pA4Y7JFGBgMliQW1Cob/4BneLilT+Gat1SDz2LazGqiVecAuydR0QppZj5dzc8vfPmw0yFaFo/EIB7DzJOnXNNX26OiIDuIon49qW53xij3Slw6FuWyFzpyQ45JendzW61RsYk1xKL+USt+pMtGbLmX/Lj83TYdFs+gT2AB2gn6HHEiWrsdM9Pq4T4Qk+lmndhsoi/BZTeeaHM7wvdL1ChM90ZlO4fWg3NDN5zRWMB4Xsmh3S1I1ldwOA70Tks55rxVEVZp24imwgOs+U6fmKPCaA3HM6LKRf7hptb3ZSp9HJZYzYdQY6JdL0RifdyWdh7wsblxxZBH/ztxgPfFP/gowAOwXRHE0zdX4AAAAAElFTkSuQmCC');
}

JavaScript

geoapi = "https://maps.googleapis.com/maps/api/geocode/json?address=";
gmapkey = "&key=AIzaSyBqqZoEoekIWyFgxZIHohDs3EX4nX0XEto";

//No 'real' form submissions
$("form").submit(function(e){e.preventDefault();});

//All model cancel buttons
$('.mcancel').click(function(){ $('#geomodal').hide(); })

//fill in all fields automatically
$('input[name="rname"]').keyup(function() { $('#rname').html($('input[name="rname"]').val()) });
$('#rselect').change(function() { $('#rstyle').html($('#rselect option:selected').val()) });
//"Find Geo Coordinates button"
$('#get_coords').click(function() {

	if($('input[name="rgeo"]').val()) {
  	getLatLng($('input[name="rgeo"]').val());
  } else {
		message("danger", "Please enter a restaurant name or address");
  }
});
 
//
function getLatLng(address) {
	$.getJSON( geoapi + encodeURIComponent(address) + gmapkey, {
    format: "json"
  })
  .done(function( data ) {
   	geoModal(data);
 	});
}

function geoModal(data) {
	$('#geomodal').show();
  console.log( data.results );
  $('#modallistplaces').empty();
	$.each( data.results, function( index, value ) {

   	console.log(value);
  	var latlng = value.geometry.location.lat + "|" + value.geometry.location.lng;


    $('#modallistplaces').append(
	    $('<li>').append(
        $('<a>').attr('href','#').append(
            $('<span>').attr('class', 'tab').append(value.formatted_address)
				)
      ).attr('latlng', latlng).click(function(){ fillGeoCloseModal($(this).attr('latlng')); })
    );
    
	});
}

function fillGeoCloseModal(latlng) {
	$('#rgeo').html(latlng);
  $('#geomodal').hide();
}

function message(type, mess) {
	$('#message').show().removeClass().addClass("alert alert-" + type).html(mess).delay(5000).fadeOut('slow');
}