Permalink
Browse files

First pass at Homework 6

  • Loading branch information...
Anna Kalil
Anna Kalil committed Jan 6, 2019
1 parent 0b26e2d commit 7006f34d40cea8262c3bf18dcaad55eb26e2aed6
@@ -0,0 +1,2 @@
.DS_Store
js/keys.js
@@ -0,0 +1,29 @@
body {
background-color: #f2f2f2;
font-family: helvetica, sans-serif;
}

h1 {
font-weight: bold;
}

h1 span {
font-weight: normal;
}

.images {
display: flex;
flex-wrap: wrap;
height: 1000px;
margin-top: 1em;
}

.image {
flex: 1 1 200px;
margin: 3px;
background-size: cover;
}

.btn-default {
margin-top: 4em;
}
@@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Advanced APIs Lesson</title>

<!-- bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- css -->
<link rel="stylesheet" href="css/styles.css">
</head>
<body>

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

<div class="container-fluid text-center image-results-view">
<h3>Here are some landscape photos from Flickr near you:</h3>
<div class="images"></div>
</div>

<!-- js -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="js/keys.js"></script>
<script src="js/app.js"></script>
</body>
</html>
@@ -0,0 +1,69 @@
$(function() {
// DOM is ready - how do we make it ready?
if (navigator.geolocation) {
// if browser enables geolocation, use it.
navigator.geolocation.getCurrentPosition(function(position){
console.log('lat: ', position.coords.latitude);
console.log('lon: ', position.coords.longitude);

// search the API for landscape photos nearby
let url = 'https://api.flickr.com/services/rest/?'; // base url

let searchOptions = { // https://www.flickr.com/services/api/flickr.photos.search.html
method: 'flickr.photos.search',
api_key: apiKey,
tags: 'night, dog',
// tag_mode: 'all',
media: 'photos',
lat: position.coords.latitude,
lon: position.coords.longitude,
radius: 4,
radius_units: 'mi',
format: 'json',
nojsoncallback: 1,
extras: 'url_c',
content_type: 1,
safe_search: 1,
per_page: 30,
sort: 'relevance',
};

// loop through searchOptions object and append each key/value pair to build full search URL
for ( let key in searchOptions ) { // `key` is built-in
url += '&' + key + '=' + searchOptions[key]; // now we're build the URL
};
// use the above URL to send our GET request using jQuery
$.get(url).done(function(response) { // must read the documentation to know what response status will be getting back
// stat is a success/fail response.
console.log(response);
console.log(response.photos.photo);
if (response.stat === 'fail') { // https://www.flickr.com/services/api/response.json.html
console.log(response.message);
} else if (response.photos.photo.length === 0) {
console.log('no photos found!');
} else {
handleResponseSuccess(response);
};

}); // closes get

}); // closes getCurrentPosition
} /* closes navigator.geolocation */ else {
// let's append to the images class
$('.images').append('Please enable geolocation in your browser.'); // this error doesn't appear if you block the prompt upon loading the page
console.log('Please enable geolocation in your browser');
};

// now let's build the handleResponseSuccess function
function handleResponseSuccess(response) {
// let's say 'i want photos returned from the api'
let allData = response.photos.photo; // `photos.photo` is via example response in the documentation
$.each(allData, function() {
if (this.title !== '') { // 'this' tags the one object you're working with at that moment
let element = $('<img>').attr('src', this.url_c).addClass('image');
$('.images').append(element);
};
});
};

}) // DOM is ready

0 comments on commit 7006f34

Please sign in to comment.