diff --git a/css/style.css b/css/style.css index 96445a6..3dcaab1 100644 --- a/css/style.css +++ b/css/style.css @@ -1 +1,187 @@ /* Custom CSS goes here */ + +html { + display:table; + width:100%; +} + +body { + text-align: center; + background-size: cover; +} + +main { + display: block; + font-family: 'Raleway', sans-serif; + margin: 50px auto; + color: white; + line-height: 1.5; + font-size: 115%; +} + +#btn { + background: #3B84F9; + color: white; + height: 30px; + width: 110px; + border: none; + font-weight: 700; + text-shadow: none; + font-size: 14px; +} + +#btn:hover { + background: #5E9AFA; +} + +.weather-city { + color: #939393; +} + +h2 .results-city { + font-weight: 700 !important; +} + +.temperature-container, .humidity-container { + visibility: hidden; +} + +.row { + /*visibility: hidden;*/ + margin-top: 30px; +} + +footer { + position: fixed; + width: 100%; + background-color: rgba(0,0,0,.3); + padding: 10px 0; +} + +footer, a { + color: white; +} + +a { + font-weight: bold; +} + +a:hover { + color: grey; + text-decoration: none; +} + +/*it's icon time*/ +.icon { + visibility: hidden; + position: relative; + display: inline-block; + width: 12em; + height: 10em; + font-size: .5em; /* control icon size here */ +} + +.sun { + position: absolute; + top: 50%; + left: 50%; + width: 2.5em; + height: 2.5em; + margin: -1.25em; + background: currentColor; + border-radius: 50%; + box-shadow: 0 0 0 0.375em #fff; + animation: spin 12s infinite linear; +} +.rays { + position: absolute; + top: -2em; + left: 50%; + display: block; + width: 0.375em; + height: 1.125em; + margin-left: -0.1875em; + background: #fff; + border-radius: 0.25em; + box-shadow: 0 5.375em #fff; +} +.rays:before, +.rays:after { + content: ''; + position: absolute; + top: 0em; + left: 0em; + display: block; + width: 0.375em; + height: 1.125em; + transform: rotate(60deg); + transform-origin: 50% 3.25em; + background: #fff; + border-radius: 0.25em; + box-shadow: 0 5.375em #fff; +} +.rays:before { + transform: rotate(120deg); +} + +/* Animations */ + +@keyframes spin { + 100% { transform: rotate(360deg); } +} + +@keyframes cloud { + 0% { opacity: 0; } + 50% { opacity: 0.3; } + 100% { + opacity: 0; + transform: scale(0.5) translate(-200%, -3em); + } +} + +@keyframes rain { + 0% { + background: #0cf; + box-shadow: + 0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2), + -0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2), + -1.375em -0.125em 0 #0cf; + } + 25% { + box-shadow: + 0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2), + -0.875em 1.125em 0 -0.125em #0cf, + -1.375em -0.125em 0 rgba(255,255,255,0.2); + } + 50% { + background: rgba(255,255,255,0.3); + box-shadow: + 0.625em 0.875em 0 -0.125em #0cf, + -0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2), + -1.375em -0.125em 0 rgba(255,255,255,0.2); + } + 100% { + box-shadow: + 0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2), + -0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2), + -1.375em -0.125em 0 #0cf; + } +} + +@keyframes lightning { + 45% { + color: #fff; + background: #fff; + opacity: 0.2; + } + 50% { + color: #0cf; + background: #0cf; + opacity: 1; + } + 55% { + color: #fff; + background: #fff; + opacity: 0.2; + } +} diff --git a/index.html b/index.html index 33c1580..443959b 100644 --- a/index.html +++ b/index.html @@ -3,18 +3,21 @@ Mini Weather App - + + + - + +

Weather App

- - + +
@@ -25,6 +28,13 @@

Weather App

+ +
+
+
+
+
Temperature: @@ -43,8 +53,14 @@

-
+ diff --git a/js/main.js b/js/main.js index da8a934..6804f43 100644 --- a/js/main.js +++ b/js/main.js @@ -1 +1,89 @@ /* Javascript goes here! */ +console.log('is your script running? better go catch it!'); + +$(document).ready(function(){ + console.log('ready'); + +//I DONT KNOW WHAT TO DO TO MAKE MY WEBSITE DELETE OLD STUFF ON ENTRY!!! + $('form').submit(function(event) { + event.preventDefault(); + $('.results-city').text(''); + $('.temperature').text(''); + $('.humidity').text(''); + $('.description').text(''); + + // NOTE: tried using $('.class-name').remove(); to achieve + // the same result, but they weren't working properly + // need to dig in more + + requestWeatherData(); + }); +}); + +function requestWeatherData(){ + console.log('requesting data...'); + $.ajax({ + method: 'GET', + url: 'http://api.openweathermap.org/data/2.5/weather', + data: $('form').serialize() + '&units=imperial&appid=a77765c844f61df44fe43412c991b9cf', + dataType: 'json', + success: onSuccess, + error: onError + }) +} + +function onSuccess(data) { + console.log('success. proceed.'); + $('.city-error').css('display', 'none'); + displayCityAndIcon(data); + displayTemp(data); + displayHumid(data); + displayDescription(data); +} + +function onError() { + console.log('errororororor'); + $('.city-error').css('display', 'block'); +} + +function ifInvalidEntry(data){ + +} + + +// error 403 forbidden for img :'( +function displayCityAndIcon(data){ + var cityName = String(data.name); + // var iconID = String(data.weather[0].icon); + // var img = ''; + // console.log(iconID); + // console.log(img); + // $('.icon').append(img); + $('.icon').css('visibility', 'visible'); + $('.results-city').append(cityName); +} + +function displayTemp(data){ + var temp = parseFloat(data.main.temp); + console.log(temp); + $('.temperature-container').css('visibility', 'visible'); + $('.temperature').append(temp + String.fromCharCode(176) + "F"); +} + +function displayHumid(data){ + var humidity = parseFloat(data.main.humidity); + console.log(humidity); + $('.humidity-container').css('visibility', 'visible'); + $('.humidity').append(humidity + '%'); +} + +function displayDescription(data){ + var description = String(data.weather[0].description); + $('.description').append('The weather is currently: ' + description + '.'); +} + + +//NOTE: (WIP) this function will eventually change based on the description of the city's weather +// function changeBackground(){ +// +// }