Permalink
Browse files

Merge pull request #13 from norbs/master

Homework 5
  • Loading branch information...
vodnik committed Jan 17, 2019
2 parents a77640b + f25cc80 commit 4c712c95f7da6530a57792edf035a504b2b7b2d5
@@ -0,0 +1,2 @@
.DS_Store
js/keys.js
@@ -0,0 +1,86 @@
/* apply a natural box layout model to all elements */
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

/* reset rules */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}

body {
line-height: 1;
background: ivory;
margin: 0 auto;
font-family: Arial, Helvetica, sans-serif;
}

/* page header */
header {
background: #FFCF40;
width: 100%;
color: black;
font-size: 48px;
text-align: center;
line-height: 1.5em;
}

/* main content */
article {
text-align: center;
padding: 20px;
overflow: auto;
margin: 0 auto;
}

p {
text-align: center;
padding: 0.4em;
}

#temp {
font-weight: bold;
}

/* form */
form {
max-width: 640px;
text-align: center;
margin: 1em auto;
font-size: 1em;
}

label {
text-align: right;
margin-right: 0.4em;
line-height: 1.4em;
}

#zip {
width: 6em;
}
@@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta id="viewport" content="width=device-width, initial-scale=1.0" />
<title>City and State Lookup</title>
<link rel="stylesheet" href="css/styles.css" />
</head>

<body>
<header><h1>Weather Lookup</h1></header>

<article>
<form>
<fieldset id="zipset">
<label for="zip" id="ziplabel">Zip Code</label>
<input id="zip" type="number" />
</fieldset>
</form>
<p id="location"></p>
<p id="temp"></p>
</article>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/keys.js"></script>
<script src="js/script.js"></script>
</body>
</html>
@@ -0,0 +1,118 @@
/*
* Asynchronous JavaScript Exercise
*
* This app fetches location information based on a zip code. You'll build
* on this code to look up weather information based on the latitude and
* longitude coordinates returned from your location search.
*
* STEP 1: Create a getWeather function that uses a Fetch request to return
* data from the weatherunlocked API. Within the function, include a statement
* to log the result to the console. (Note that this data will not be logged
* until after you complete Step 2 below.)
*
* STEP 2: Within the getData function, chain another .then() method after the
* one that calls the getLocation function. Within this new .then() method,
* return a function call to the getWeather function. Save your work, load
* the app in the browser, and verify that weather data is logged to the
* console from the getWeather function.
* Hint: The getWeather() function must use a 'return' statement to return the
* result of the Fetch request.
*
* STEP 3: Update the updateUISuccess function to do the following:
* - Obtain the Fahrenheit temperature from the returned data.
* (Hint: Start by examining the data structure in the console that was
* logged in the previous step.)
* - Update the element referenced by the tempPara variable with the
* temperature you obtained, the degree symbol, and the letter F (for
* Fahrenheit)
*
* STEP 4: Test your app and verify that for any 5-digit zip code you type
* in the input box, the UI updates with city, state, and current temperature.
*
* BONUS: Write a getWeather2 function to makea request to openweathermap.org.
* Incorporate a call to this function into the getData function. In the
* updateUISuccess function, average the temperatures returned from the two
* weather APIs and display the average in the browser window.
*
* BONUS 2: Combine the getWeather and getWeather2 functions into a single
* function that can accept the necessary parameters to make an API call to
* either weatherunlocked or openweathermap. Be sure to update your function
* calles in the getData function to reference the new function with the
* appropriate name and arguments.
*/

'use strict';

const zip = document.querySelector('#zip');
const tempPara = document.querySelector('#temp');
const locationPara = document.querySelector('#location');
const weatherUrl = 'http://api.weatherunlocked.com/api/current/';
let city;
let state;
let lat;
let lon;

zip.addEventListener(
'keyup',
function() {
const zipString = zip.value;
if (zipString.length === 5) {
getData(zipString);
}
},
false
);

function getWeather(lat, lon) {
let url = weatherUrl + lat + ',' + lon + '?app_id=' + appid + '&app_key=' + apikey;
console.log(url);
return fetch(url)
.then(function(response) {
if (response.ok) {
return response.json();
} else {
updateUIError();
}
});
}

function getData(zip) {
fetch('http://api.zippopotam.us/us/' + zip)
.then(function(response) {
if (response.ok) {
return response.json();
} else {
updateUIError();
}
})
.then(function(data) {
return getLocation(data);
})
.then(function(data) {
return getWeather(lat, lon);
})
.then(function(data) {
return updateUISuccess(data);
})
.catch(function(error) {
return updateUIError();
});
}

function getLocation(data) {
city = data.places[0]['place name'];
state = data.places[0]['state'];
lat = parseFloat(data.places[0].latitude).toFixed(2);
lon = parseFloat(data.places[0].longitude).toFixed(2);
}

function updateUISuccess(data) {
let degF = data.temp_f;
tempPara.innerHTML = degF + ' °F';
zip.value = '';
locationPara.innerHTML = city + ', ' + state;
}

function updateUIError() {
locationPara.innerHTML = 'Please try again in a bit.';
}
@@ -0,0 +1,2 @@
.DS_Store
js/keys.js
@@ -0,0 +1,34 @@
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;
}

.user-input {
display: flex;
justify-content: center;
}
@@ -0,0 +1,31 @@
<!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 id="yourSearch">Landscapes</span></h1>
</header>

<div class="user-input">
<input id="searchTag"></input>
<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>
<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,80 @@
$(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) {
$('#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 searchImages = function(searchTagString) {
//Form the request URL
let url = 'https://api.flickr.com/services/rest/?';

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',
};

//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 {
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 {
$('.images').text("Sorry, your browser doesn't support geo location.");
}
});

0 comments on commit 4c712c9

Please sign in to comment.