commit 314aeb8545fe2d615897ac34be88f3fb64ecc197 Author: Nicholas Ngo Date: Mon May 16 09:49:54 2022 -0700 First git commit diff --git a/images/thunderstorm.gif b/images/thunderstorm.gif new file mode 100644 index 0000000..db71740 Binary files /dev/null and b/images/thunderstorm.gif differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..05748e4 --- /dev/null +++ b/index.html @@ -0,0 +1,37 @@ + + + + + + + Weather App + + + + + + + +

+ + +

Weather in Surrey

51°C

Cloudy

Humidity: 60%

Wind speed: 6.2 km/h

+ + diff --git a/script.js b/script.js new file mode 100644 index 0000000..0cda65b --- /dev/null +++ b/script.js @@ -0,0 +1,114 @@ +const API_KEY = "9cc4edd6d8064a5b7d8fea55305f7c1d" +const API_URL = "https://api.opencagedata.com/geocode/v1/json" + +let weather = { + apiKey: API_KEY, + fetchWeather: function (city) { + fetch( + "https://api.openweathermap.org/data/2.5/weather?q=" + + city + + "&units=metric&appid=" + + this.apiKey + ) + .then((response) => { // error part if it fails + if (!response.ok) { + alert("No weather found."); + throw new Error("No weather found."); + } + return response.json(); + }) + .then((data) => this.displayWeather(data)); + }, + displayWeather: function (data) { + const { name } = data; + const { icon, description } = data.weather[0]; + const { temp, humidity } = data.main; + const { speed } = data.wind; + document.querySelector(".city").innerText = `Weather in ${name}`; + document.querySelector(".icon").src = `https://openweathermap.org/img/wn/${icon}.png`; + document.querySelector(".description").innerText = description; + document.querySelector(".temp").innerText = `${temp} °C`; + document.querySelector(".humidity").innerText = `Humidity: ${humidity}%`; + document.querySelector(".wind").innerText = `Wind speed: ${speed}km/h`; + document.querySelector(".weather").classList.remove("loading"); + document.body.style.backgroundImage = `var(--${data.weather[0].main})`; + }, + search: function () { + this.fetchWeather(document.querySelector(".search-bar").value); + }, +}; + +let geocode = { + reverseGeocode: function (latitude, longitude) { + var apikey = "5333f43e8a7a4553abee4745425cae8b"; + + var api_url = "https://api.opencagedata.com/geocode/v1/json"; + + var request_url = + api_url + + "?" + + "key=" + + apikey + + "&q=" + + encodeURIComponent(latitude + "," + longitude) + + "&pretty=1" + + "&no_annotations=1"; + + // see full list of required and optional parameters: + // https://opencagedata.com/api#forward + + var request = new XMLHttpRequest(); + request.open("GET", request_url, true); + + request.onload = function () { + // see full list of possible response codes: + // https://opencagedata.com/api#codes + + if (request.status == 200) { + // Success! + var data = JSON.parse(request.responseText); + weather.fetchWeather(data.results[0].components.city); + console.log(data.results[0].components.city) + } else if (request.status <= 500) { + // We reached our target server, but it returned an error + + console.log("unable to geocode! Response code: " + request.status); + var data = JSON.parse(request.responseText); + console.log("error msg: " + data.status.message); + } else { + console.log("server error"); + } + }; + + request.onerror = function () { + // There was a connection error of some sort + console.log("unable to connect to server"); + }; + + request.send(); // make the request + }, + getLocation: function() { + function success (data) { + geocode.reverseGeocode(data.coords.latitude, data.coords.longitude); + } + if (navigator.geolocation) { + navigator.geolocation.getCurrentPosition(success, console.error); + } + else { + weather.fetchWeather("Surrey"); + } + } +}; + +document.querySelector(".search button").addEventListener("click", function () { + weather.search(); +}); + +document.querySelector(".search-bar") +.addEventListener("keyup", function (event) { + if (event.key == "Enter") { + weather.search(); + } +}); + +geocode.getLocation(); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..e054f3a --- /dev/null +++ b/style.css @@ -0,0 +1,97 @@ +:root { + --Rain: url("https://cdnb.artstation.com/p/assets/images/images/044/191/175/original/ryan-haight-kerry-park-rainy.gif?1639344501"); + --Clouds: url("https://64.media.tumblr.com/9ee59e8b2b137130d55209f48398878a/tumblr_pac4orsuyr1tlgv32o1_540.gif"); + --Drizzle: url("https://c.tenor.com/O5-9NwLytp4AAAAd/minimoss-pixel-art.gif"); + --Clear: url("https://thumbs.gfycat.com/UnfoldedRedJaguarundi-max-1mb.gif"); + --Snow: url("https://thumbs.gfycat.com/DecimalBabyishAmericancreamdraft-max-1mb.gif"); + --Thunderstorm: url("../images/thunderstorm.gif"); + --default: url("https://wallpaperaccess.com/full/3517019.gif"); +} +body { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; + font-family: 'Open Sans', sans-serif; + background: #222; + background-image: var(--default); + background-repeat: no-repeat; + background-size: cover; + font-size: 120%; +} + +.card { + background: #000000d0; + color: white; + padding: 2em; + border-radius: 30px; + width: 100%; + max-width: 420px; + margin: 1em; +} + +.search { + display: flex; + align-items: center; + justify-content: center; +} + +button { + margin: 0.5em; + border-radius: 50%; + border: none; + height: 44px; + width: 44px; + outline: none; + background: #7c7c7c2b; + color: white; + cursor: pointer; + transition: 0.2s ease-in-out; +} + +input.search-bar { + border: none; + outline: none; + padding: 0.4em 1em; + border-radius: 24px; + background: #7c7c7c2b; + color: white; + font-family: inherit; + font-size: 105%; + width: calc(100% - 100px); +} + +button:hover { + background: #7c7c7c6b; +} + +h1.temp { + margin: 0; + margin-bottom: 0.4em; +} + +.flex { + display: flex; + align-items: center; +} + +.description { + text-transform: capitalize; + margin-left: 8px; +} + +.weather.loading { + visibility: hidden; + max-height: 20px; + position: relative; +} + +.weather.loading:after { + visibility: visible; + content: "Input Location"; + color: white; + position: absolute; + top: 0; + left: 20px; +} \ No newline at end of file