Permalink
Browse files

Added click event on submit button and logic to pull tag from field.

  • Loading branch information...
norbs committed Jan 4, 2019
1 parent 1af84b6 commit f25cc804f591af68206da080dbc9bf233a2ed0d1
Showing with 64 additions and 43 deletions.
  1. +2 −2 Ryan-norbs/Homework-6/index.html
  2. +62 −41 Ryan-norbs/Homework-6/js/app.js
@@ -11,12 +11,12 @@
<body>

<header class="container-fluid text-center">
<h1>Local<span>Landscapes</span></h1>
<h1>Local<span id="yourSearch">Landscapes</span></h1>
</header>

<div class="user-input">
<input id="searchTag"></input>
<button>Submit</button>
<button id="submit">Submit</button>
</div>
<div class="container-fluid text-center image-results-view">
<h3>Here are some landscape photos from Flickr near you:</h3>
@@ -1,56 +1,77 @@
$(function() {
// DOM is now ready

// Check we can get the location data from the local machine
if (navigator.geolocation) {
// if it is use the getCurrentPosition method to retrieve the Window's location
navigator.geolocation.getCurrentPosition(function(position) {
//Form the request URL
let url = 'https://api.flickr.com/services/rest/?';
$('#submit').click(function(event) {
event.preventDefault();
//Clear old image results if there are any
$(".image").remove();
//Get the query string
const searchTagString = $('#searchTag').val();
//Clear search field
$('#searchTag').val('');
//Capitalize first char
function capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
//Append search string in title of document
$('#yourSearch').text(capitalizeFirstLetter(searchTagString));
//Trigger geo tag info and request
searchImages(searchTagString);
});

let searchOptions = {
method: 'flickr.photos.search', // endpoint
api_key: api_key, // stored in js/keys.js
tags: 'cars',
media: 'photos',
lat: position.coords.latitude,
lon: position.coords.longitude,
radius: 10,
radius_units: 'mi',
format: 'json',
nojsoncallback: 1,
extras: 'url_n',
content_type: 1,
safe_search: 1,
per_page: 30,
sort: 'relevance',
};
let searchImages = function(searchTagString) {
//Form the request URL
let url = 'https://api.flickr.com/services/rest/?';

//Concat each of the URL params from the list above onto the url string
$.each(searchOptions, (key, value) => {
url += '&' + key + '=' + value;
});
let searchOptions = {
method: 'flickr.photos.search', // endpoint
api_key: api_key, // stored in js/keys.js
tags: searchTagString,
media: 'photos',
lat: position.coords.latitude,
lon: position.coords.longitude,
radius: 10,
radius_units: 'mi',
format: 'json',
nojsoncallback: 1,
extras: 'url_n',
content_type: 1,
safe_search: 1,
per_page: 30,
sort: 'relevance',
};

//Make the request to the Flickr API
$.get(url).done(function(response) {
// console.log(response);
if (response.photos.photo.length === 0) {
console.log('No photos found!');
} else {
handleResponseSuccess(response);
}
});
//Handle the response
let handleResponseSuccess = function(response) {
//For each photo in the returned data
$.each(response.photos.photo, function() {
if(this.title !== '' && 'url_n' in this) {
//Create and insert photo data into DOM elements on the page
let newImg = $('<img>').addClass('image').attr('src', this.url_n);
$('.images').append(newImg);
//Concat each of the URL params from the list above onto the url string
$.each(searchOptions, (key, value) => {
url += '&' + key + '=' + value;
});

//Make the request to the Flickr API
$.get(url).done(function(response) {
// console.log(response);
if (response.photos.photo.length === 0) {
console.log('No photos found!');
} else {
console.log('ignored an untilted or missing pic');
handleResponseSuccess(response);
}
});
//Handle the response
let handleResponseSuccess = function(response) {
//For each photo in the returned data
$.each(response.photos.photo, function() {
if(this.title !== '' && 'url_n' in this) {
//Create and insert photo data into DOM elements on the page
let newImg = $('<img>').addClass('image').attr('src', this.url_n);
$('.images').append(newImg);
} else {
console.log('ignored an untilted or missing pic');
}
});
};
};
});
} else {

0 comments on commit f25cc80

Please sign in to comment.