Skip to content

weather-app update #14

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
rcgutierrez wants to merge 1 commit into
base: master
Choose a base branch
from
Open

weather-app update #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 20 additions & 0 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,21 @@
/* Custom CSS goes here */
body{
height: 100vh;
}

.col-md-offset-4{
text-align: center;
}

h1{
margin: 35px auto;
font-size: 45px;
}

.row, p{
padding: 10px;
};

main{
color: red;
}
5 changes: 3 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
<head>
<meta charset="utf-8">
<title>Mini Weather App</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
Copy link

@BritneyJo BritneyJo Sep 27, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good catch!

</head>
<body>
<main class="weather-app container">
Expand All @@ -14,7 +14,7 @@
<h1 class="title">Weather App</h1>
<form class="getWeatherData">
<input type="text" class="weather-city" placeholder="Enter a city.."/>
<input type="submit" value="Get Weather">
<input type="submit" class="submission" value="Get Weather">
<p class="city-error" style="display:none;">Whoops! Looks like that city doesn't exist, try another one.</p>
</form>
</div>
Expand All @@ -23,6 +23,7 @@ <h1 class="title">Weather App</h1>
<div class="row">
<div class="col-md-4 col-md-offset-4 results">

<span class="flag-icon flag-icon-gr flag-icon-squared"></span>
<h2 class="results-city"></h2>


Expand Down
83 changes: 83 additions & 0 deletions js/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,84 @@
/* Javascript goes here! */
console.log('Sanity Check');

var mapURL;
var toF;
var thisMap;

$('.weather-app').css('background-color', 'rgba(255,255,255,.5)');
Copy link

@BritneyJo BritneyJo Sep 27, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd prefer you set this in the CSS and not use js to add custom styles.


$(document).ready(function(){
//Initialized description
$('.description').append("<strong>Condition Outside:</strong> ");

$('.submission').click(function(event){
Copy link

@BritneyJo BritneyJo Sep 27, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this doing anything?

event.preventDefault();
});

$('.submission').on('click', function(){
var userInput = $('.weather-city').val();
requestWeatherData(userInput);
console.log(userInput);
});
});

function requestWeatherData(cityName){
//AJAX request based on user input
$.ajax({
method: 'GET',
url: 'https://api.openweathermap.org/data/2.5/weather',
dataType:'json' ,
data: 'q=' + cityName + '&APPID=461bf158b2034c572293a7dfe13219a2',
success: onSuccess,
error: onError
});
};

function onSuccess(weatherData){
$('.results').css('display', 'block');
$('.results-city').empty();
$('.temperature').empty();
$('.humidity').empty();
$('.description').empty();
$('.flag-icon').empty();
$('.city-error').css('display', 'none');

var toF = parseInt(((((weatherData.main.temp)-273.15)*1.8)+32));
Copy link

@BritneyJo BritneyJo Sep 27, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of doing all the math, you could have also used the API which requires another parameter to be sent as data in your ajax call 'units=imperial'. Since you are serializing your form to get the data automatically, you could have added another hidden input for this <input type="hidden" name="units" value="imperial">.

console.dir(toF);
$('.results-city').append(weatherData.name + ", " + weatherData.sys.country);
$('.temperature').append(toF + '°');
Copy link

@BritneyJo BritneyJo Sep 27, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You'll want to look up the character code for the degree symbol. While it may work in some browsers, it will also break in a lot more.

$('.humidity').append(weatherData.main.humidity);
$('.description').append("<strong>Condition Outside:</strong> " + weatherData.weather[0].main);
$('.flag-icon').append('<img src="../../../../flag-icon-css-master/flags/4x3/' + weatherData.sys.country + '.svg" style="width:304px;height:228px;">');
// mapURL = getWeatherMap(weatherData.coord.lon, weatherData.coord.lat)
// console.log(mapURL);
// $('body').css("backgroundImage", mapURL);
};

function onError(){
$('.results').css('display', 'none');

$('.city-error').css('display', 'inline-block');
$('.city-error').css('color', 'red');
console.log('dangit');
};

function getWeatherMap(x, y){
// thisMap = 'http://tile.openweathermap.org/map/clouds_new/' + '6' + '/' + x + '/' + y + '.png?appid=' + '461bf158b2034c572293a7dfe13219a2';
thisMap = 'http://tile.openweathermap.org/map/clouds_new/6/-97.74/30.37.png?appid=461bf158b2034c572293a7dfe13219a2'
console.log(thisMap)
$.ajax({
method: 'GET',
url: thisMap,
dataType:'json' ,
// data: 'q=' + cityName + '&APPID=461bf158b2034c572293a7dfe13219a2',
success: mapSuccess,
// error: onError
});
function mapSuccess(mapData){
console.log(mapData);
console.log("here");
};
};

getWeatherMap('-97.74', '30.37');