diff --git a/README.md b/README.md index 335bfc6..ffd5e1a 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ - + # Build a Weather App diff --git a/css/styles.css b/css/styles.css index e69de29..78d3d5a 100755 --- a/css/styles.css +++ b/css/styles.css @@ -0,0 +1,11 @@ +* { + font-family: Helvetica, Arial, sans-serif; +} + +body { + background-color: white +} + +current-temp { + +} diff --git a/index.html b/index.html index d2cf814..d003d49 100755 --- a/index.html +++ b/index.html @@ -8,10 +8,30 @@ +
+
+

Weather Finder

+
+
+ +
+
+ + +
+
+
+
+
+
+ +
+ + diff --git a/js/app.js b/js/app.js index 5382523..91eb8a6 100644 --- a/js/app.js +++ b/js/app.js @@ -1,2 +1,89 @@ -$(function () { +$(document).ready(function () { + $('#submit-btn').click(() => { + + refreshSearch() + + const city = $('#city-type').val() + + getWeatherByCity(city) + + }) + + + function getWeatherByCity (city) { + axios.get(`http://api.openweathermap.org/data/2.5/weather?q=${city}&APPID=1c739a9713a0919a3024a089c3b027df`) + .then((response) => { + console.log(response.data) + displayCityName(response.data.name) + displayCurrentTemperature(convertToFahrenheit(response.data.main.temp)) + displayWeatherDescription(response.data.weather[0].description) + displayMinTemp(convertToFahrenheit(response.data.main.temp_min)) + displayMaxTemp(convertToFahrenheit(response.data.main.temp_max)) + + }).catch((error) => { + console.log(error) + }) + + } + + + + + function displayCityName (cityName) { + $('#current-city').append( + `

Current City:

${cityName}

`) + } + + function displayCurrentTemperature (temperature) { + $('#current-temp').append( + `

Current Temperature:

${temperature} F°

`) + setTempFontColor(temperature) + } + + function displayWeatherDescription (description) { + $('#description').append( + `

Description:

${description}

`) + } + + function displayMinTemp (temperature) { + $('#min-temp').append( + `

Today's Low:

${temperature} F°

`) + } + + function displayMaxTemp (temperature) { + $('#max-temp').append( + `

Today's High:

${temperature} F°

`) + } + + function convertToFahrenheit (kelvinUnits) { + return parseInt((kelvinUnits-273.15)*(9/5)+32) + } + + function setTempFontColor (temperature) { + if (temperature > 85) { + $('#current-temp').css({ + color: "red" + }) + } + if (temperature < 40) { + $('#current-temp').css({ + color: "blue" + }) + } + } + +function refreshSearch () { + $('#current-city').html('') + $('#current-temp').html('') + $('#description').html('') + $('#min-temp').html('') + $('#max-temp').html('') +} + + + + + + + })