diff --git a/WeatherApp/Shuklaaa/README.md b/WeatherApp/Shuklaaa/README.md new file mode 100644 index 000000000..4ff77e1b0 --- /dev/null +++ b/WeatherApp/Shuklaaa/README.md @@ -0,0 +1,16 @@ +#Weather App + +##Overview +This is a simple weather app that provides current weather information for a location using data from a weather API. It is built using HTML, CSS, and JavaScript. The special thing about it is that the background image changes according to the search location. + +##Features +- Current weather information including temperature, description, and location. +- Dynamic background image that changes based on the weather conditions. +- Easy-to-use and intuitive user interface. + +##SCREENSHOTS +![image](https://github.com/Shuklaaa/javascript-mini-projects/assets/93446673/1b12e800-0e5c-46f3-8b67-aef5780c3c9a) +![image](https://github.com/Shuklaaa/javascript-mini-projects/assets/93446673/0ac3cb4e-3972-4573-a297-1cdb17b26d26) +![image](https://github.com/Shuklaaa/javascript-mini-projects/assets/93446673/6800e633-2a6a-4b3e-9de8-5a1560914479) + + diff --git a/WeatherApp/Shuklaaa/index.html b/WeatherApp/Shuklaaa/index.html new file mode 100644 index 000000000..9fd5b0ca2 --- /dev/null +++ b/WeatherApp/Shuklaaa/index.html @@ -0,0 +1,39 @@ + + + + + + + + WEATHER APP + + + + + + +
+
+ + +
+
+

Weather in Denver

+

51°C

+
+ +
Cloudy
+
+
Humidity: 60%
+
Wind speed: 62km/h
+
+
+ + + + diff --git a/WeatherApp/Shuklaaa/script.js b/WeatherApp/Shuklaaa/script.js new file mode 100644 index 000000000..4e82419da --- /dev/null +++ b/WeatherApp/Shuklaaa/script.js @@ -0,0 +1,107 @@ +let weather = { + "apikey": "466ddaa21a8de191e9f608bd11a56acb", + fetchWeather: function(city){ + fetch( + "https://api.openweathermap.org/data/2.5/weather?q=" + + city + + "&units=metric&appid=" + + this.apikey + ) + .then((response) => 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; + // console.log(name,icon,description,temp,humidity,speed); + 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 = "url('https://source.unsplash.com/1600x900/?" + name + "')" + }, + search: function(){ + this.fetchWeather(document.querySelector(".search-bar").value); + } +}; + +let geocode = { + reverseGeocode: function (latitude ,longitude) { + var api_key = '089943fd115440dbb4d95b091479e834'; + + var api_url = 'https://api.opencagedata.com/geocode/v1/json' + + var request_url = api_url + + '?' + + 'key=' + api_key + + '&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); + + } 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("denver"); + } + } + } +} + +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(); diff --git a/WeatherApp/Shuklaaa/style.css b/WeatherApp/Shuklaaa/style.css new file mode 100644 index 000000000..26471a7ec --- /dev/null +++ b/WeatherApp/Shuklaaa/style.css @@ -0,0 +1,84 @@ +body { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; + font-family: 'Open Sans', sans-serif; + background: #222; + background-image: url('https://source.unsplash.com/1600x900/?landscape'); + font-size: 120%; +} + +.card { + background: #000000d0; + color: white; + padding: 2em; + border-radius: 35px; + width: 100%; + max-width: 420px; + margin: 1em; +} + +.search { + display: flex; + justify-content: center; + align-items: 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; +} + +button:hover { + background: #7c7c7c6b; +} + +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); +} + +.flex{ + display: flex; + text-align: center; +} + +.description{ + text-transform:capitalize; + margin-top: 10px; +} + +.weather.loading{ + visibility: hidden; + max-height: 20px; + position: relative; +} +.weather.loading::after{ + visibility: visible; + content: "Loading..."; + color: white; + position: absolute; + top: 0; +} + +h1.temp { + margin: 0; + margin-bottom: 0.5em; +} \ No newline at end of file