├── icons ├── 01d.png ├── 01n.png ├── 02d.png ├── 02n.png ├── 03d.png ├── 03n.png ├── 04d.png ├── 04n.png ├── 09d.png ├── 09n.png ├── 10d.png ├── 10n.png ├── 11d.png ├── 11n.png ├── 13d.png ├── 13n.png ├── 50d.png ├── 50n.png └── unknown.png ├── image ├── clear.jpg ├── cloud.jpg ├── haze.jpg ├── rain.jpg ├── snow.jpg └── meteor.jpeg ├── README.md ├── LICENSE ├── index.html ├── style.css └── script.js /icons/01d.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/saket-v37/Weather_App/HEAD/icons/01d.png -------------------------------------------------------------------------------- /icons/01n.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/saket-v37/Weather_App/HEAD/icons/01n.png -------------------------------------------------------------------------------- /icons/02d.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/saket-v37/Weather_App/HEAD/icons/02d.png -------------------------------------------------------------------------------- /icons/02n.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/saket-v37/Weather_App/HEAD/icons/02n.png -------------------------------------------------------------------------------- /icons/03d.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/saket-v37/Weather_App/HEAD/icons/03d.png -------------------------------------------------------------------------------- /icons/03n.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/saket-v37/Weather_App/HEAD/icons/03n.png -------------------------------------------------------------------------------- /icons/04d.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/saket-v37/Weather_App/HEAD/icons/04d.png -------------------------------------------------------------------------------- /icons/04n.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/saket-v37/Weather_App/HEAD/icons/04n.png -------------------------------------------------------------------------------- /icons/09d.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/saket-v37/Weather_App/HEAD/icons/09d.png -------------------------------------------------------------------------------- /icons/09n.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/saket-v37/Weather_App/HEAD/icons/09n.png -------------------------------------------------------------------------------- /icons/10d.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/saket-v37/Weather_App/HEAD/icons/10d.png -------------------------------------------------------------------------------- /icons/10n.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/saket-v37/Weather_App/HEAD/icons/10n.png -------------------------------------------------------------------------------- /icons/11d.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/saket-v37/Weather_App/HEAD/icons/11d.png -------------------------------------------------------------------------------- /icons/11n.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/saket-v37/Weather_App/HEAD/icons/11n.png -------------------------------------------------------------------------------- /icons/13d.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/saket-v37/Weather_App/HEAD/icons/13d.png -------------------------------------------------------------------------------- /icons/13n.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/saket-v37/Weather_App/HEAD/icons/13n.png -------------------------------------------------------------------------------- /icons/50d.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/saket-v37/Weather_App/HEAD/icons/50d.png -------------------------------------------------------------------------------- /icons/50n.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/saket-v37/Weather_App/HEAD/icons/50n.png -------------------------------------------------------------------------------- /image/clear.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/saket-v37/Weather_App/HEAD/image/clear.jpg -------------------------------------------------------------------------------- /image/cloud.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/saket-v37/Weather_App/HEAD/image/cloud.jpg -------------------------------------------------------------------------------- /image/haze.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/saket-v37/Weather_App/HEAD/image/haze.jpg -------------------------------------------------------------------------------- /image/rain.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/saket-v37/Weather_App/HEAD/image/rain.jpg -------------------------------------------------------------------------------- /image/snow.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/saket-v37/Weather_App/HEAD/image/snow.jpg -------------------------------------------------------------------------------- /icons/unknown.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/saket-v37/Weather_App/HEAD/icons/unknown.png -------------------------------------------------------------------------------- /image/meteor.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/saket-v37/Weather_App/HEAD/image/meteor.jpeg -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Weather_App 2 | 3 | Weather app shows the basic weather information with the help of an api. 4 | 5 | Weather app which shows the current weather information from the API. It shows the Weather status Icon, Searched City and Country name, Day and Date, 6 | Temperature value(°c), Weather description, Minimum and Maximum Temperature and Wind Speed. 7 | 8 | When the user clicks on the temperature value, it gets converted into Fahrenheit. 9 | 10 | # Technology: 11 | HTML 12 | CSS 13 | Javascript 14 | OpenWeatherMap api 15 | FontAwesome 16 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Saket Verma 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Weather App 9 | 10 | 13 | 14 | 15 | 16 |
17 |
18 | 19 |
20 |
21 |
22 |
#
23 |
Delhi, India
24 |
Friday 10 January 2021
25 |
26 |
27 |
15°c
28 |
Sunny
29 |
30 |
31 |
32 |
33 |
34 | 35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | font-family: 'montserrat', sans-serif; 9 | background-image: url('image/meteor.jpeg'); 10 | background-size: cover; 11 | } 12 | 13 | .wrapper { 14 | display: flex; 15 | flex-direction: column; 16 | min-height: 100vh; 17 | background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.2)); 18 | } 19 | 20 | header { 21 | display: flex; 22 | justify-content: center; 23 | align-items: center; 24 | padding: 50px 15px 15px; 25 | } 26 | 27 | header input { 28 | width: 100%; 29 | max-width: 280px; 30 | padding: 10px 15px; 31 | border: none; 32 | outline: none; 33 | background-color: rgba(255, 255, 255, 0.4); 34 | border-radius: 16px 0px 16px 0px; 35 | border-bottom: 3px solid #DF8E00; 36 | 37 | color: #313131; 38 | font-size: 20px; 39 | font-weight: 300; 40 | transition: 0.2S ease-out; 41 | } 42 | 43 | header input:focus { 44 | background-color: rgba(255, 255, 255, 0.6); 45 | } 46 | 47 | main { 48 | flex: 1 1 100%; 49 | padding: 25px 25px 50px; 50 | display: flex; 51 | flex-direction: column; 52 | align-items: center; 53 | text-align: center; 54 | } 55 | 56 | .location .city { 57 | color: #FFF; 58 | font-size: 32px; 59 | font-weight: 500; 60 | margin-bottom: 5px; 61 | } 62 | 63 | .location .date { 64 | color: #FFF; 65 | font-size: 16px; 66 | } 67 | 68 | .current .temp { 69 | color: #FFF; 70 | font-size: 100px; 71 | font-weight: 900; 72 | margin: 10px 0px; 73 | text-shadow: 2px 10px rgba(0, 0, 0, 0.6); 74 | } 75 | 76 | .current .temp span { 77 | font-weight: 500; 78 | } 79 | 80 | .current .weather { 81 | color: #FFF; 82 | font-size: 32px; 83 | font-weight: 700; 84 | font-style: italic; 85 | margin-bottom: 15px; 86 | text-shadow: 0px 3px rgba(0, 0, 0, 0.4); 87 | } 88 | 89 | .current .hi-low { 90 | color: #FFF; 91 | font-size: 24px; 92 | font-weight: 500; 93 | margin-bottom: 10px; 94 | text-shadow: 0px 4px rgba(0, 0, 0, 0.4); 95 | } 96 | .current .wind { 97 | color: #FFF; 98 | font-size: 24px; 99 | font-weight: 500; 100 | 101 | text-shadow: 0px 4px rgba(0, 0, 0, 0.4); 102 | } -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | // api id and api address 2 | const api={ 3 | key:"04edf30b1ca360b0dc583cd87ba6e58d", 4 | base:"https://api.openweathermap.org/data/2.5/", 5 | } 6 | let unit="celsius"; 7 | 8 | // fetching weather by geolocation 9 | window.addEventListener('load',()=>{ 10 | let long; 11 | let lat; 12 | if(navigator.geolocation){ 13 | navigator.geolocation.getCurrentPosition(position=>{ 14 | long=position.coords.longitude; 15 | lat=position.coords.latitude; 16 | 17 | fetch(`${api.base}weather?lat=${lat}&lon=${long}&appid=${api.key}`) 18 | .then(weather=> { 19 | return weather.json(); 20 | }).then(displayResults); 21 | }); 22 | } 23 | else{ 24 | alert("Allow Geolocation To View Weather Report") 25 | } 26 | }); 27 | 28 | // adding event when "enter" is pressed 29 | const searchbox=document.querySelector('.search-box'); 30 | searchbox.addEventListener('keypress', setQuery); 31 | // passing the search box valu to getesults function 32 | function setQuery(evt){ 33 | if(evt.keyCode==13){ 34 | getResults(searchbox.value); 35 | } 36 | } 37 | // fetching the data from the api 38 | function getResults(query){ 39 | fetch(`${api.base}weather?q=${query}&units=metric&APPID=${api.key}`) 40 | .then(weather=> { 41 | return weather.json(); 42 | }).then(displayResults); 43 | } 44 | // display weather 45 | function displayResults(weather){ 46 | // console.log(weather); 47 | let icon=document.querySelector('.location .weather-icon'); 48 | icon.innerHTML=``; 49 | 50 | let city=document.querySelector('.location .city'); 51 | city.innerText=`${weather.name},${weather.sys.country}`; 52 | 53 | let now=new Date(); 54 | let date=document.querySelector('.location .date'); 55 | date.innerText=dateBuilder(now); 56 | 57 | let temp=document.querySelector('.current .temp'); 58 | temp.innerHTML=`${Math.round(weather.main.temp)}°c`; 59 | 60 | let weather_el=document.querySelector('.current .weather'); 61 | weather_el.innerText=weather.weather[0].main; 62 | 63 | if(weather_el.textContent=="Clouds"){ 64 | document.body.style.backgroundImage="url('image/cloud.jpg')"; 65 | } 66 | else if(weather_el.textContent=="Clear"){ 67 | document.body.style.backgroundImage="url('image/clear.jpg')"; 68 | } 69 | else if(weather_el.textContent=="Haze"){ 70 | document.body.style.backgroundImage="url('image/haze.jpg')"; 71 | } 72 | else if(weather_el.textContent=="Rain"){ 73 | document.body.style.backgroundImage="url('image/rain.jpg')"; 74 | } 75 | else{ 76 | document.body.style.backgroundImage="url('image/snow.jpg')"; 77 | } 78 | 79 | let hilow=document.querySelector('.hi-low span'); 80 | hilow.innerText=` ${Math.round(weather.main.temp_min)}°c/ ${Math.round(weather.main.temp_max)}°c`; 81 | 82 | let wind=document.querySelector('.wind span'); 83 | wind.innerText=` ${(weather.wind.speed)}`; 84 | // add function that convert celsius to fahrenheit 85 | function celsiusToFahrenheit(d){ 86 | return(d *9/5)+32; 87 | } 88 | temp.addEventListener("click", function(){ 89 | if(unit=="celsius"){ 90 | let fahrenheit=celsiusToFahrenheit(weather.main.temp); 91 | fahrenheit=Math.floor(fahrenheit); 92 | 93 | temp.innerHTML=`${fahrenheit}°f` 94 | unit="fahrenheit"; 95 | } 96 | else{ 97 | temp.innerHTML=`${Math.round(weather.main.temp)}°c`; 98 | unit="celsius"; 99 | } 100 | }); 101 | } 102 | // setting up the date 103 | function dateBuilder(d){ 104 | let months=["January","Fabruary","March","April","May","June","July","August","September","October","November","December"]; 105 | let days=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]; 106 | 107 | let day=days[d.getDay()]; 108 | let date=d.getDate(); 109 | let month=months[d.getMonth()]; 110 | let year=d.getFullYear(); 111 | return `${day}, ${date} ${month} ${year}`; 112 | 113 | } 114 | --------------------------------------------------------------------------------