Permalink
Browse files

Submitting Homework 6

  • Loading branch information...
“Luis
“Luis committed Jan 7, 2019
1 parent 8c92899 commit 44bd330125781aa7550573f24a5cabd68c762f2d
@@ -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,54 @@
$(function(){
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
console.log('lat: ', position.coords.latitude);
console.log('lon: ', position.coords.longitude);
let url = 'https://api.flickr.com/services/rest/?';
let searchOptions = {
method: 'flickr.photos.search', // endpoint
api_key: apiKey, // stored in js/keys.js
tags: 'blackandwhite',
media: 'photos',
lat: position.coords.latitude,
lon: position.coords.longitude,
radius: 10,
radius_units: 'mi',
sort: 'relevance',
per_page: 30,
format: 'json',
nojsoncallback: 1,
extras: 'url_z',
content_type: 1,
safe_search: 1,
};
for (let key in searchOptions) {
url += '&' + key + '=' + searchOptions[key];
}
console.log(url);
$.get(url).done(function(response) {
console.log(response);
if (response.stat === 'fail') {
console.log(response.message);
} else if (response.photos.photo.length === 0) {
console.log('No photos found!');
} else {
handleResponseSuccess(response);
}
});
}, function () {
$('.images').append('Sorry, we need your location to retrieve images');
});
} else {
$('.images').append('Sorry, the browser does not support geolocation');
}
function handleResponseSuccess(response) {
let allData = response.photos.photo;
$.each(allData, function() {
// photos without titles may not be carefully tagged, so exclude them
if (this.title !== '') {
let element = $('<img>').attr('src', this.url_z).addClass('image');
$('.images').append(element);
}
});
}
});

0 comments on commit 44bd330

Please sign in to comment.