├── icons ├── sun.png ├── haze.png ├── light.png ├── water.png ├── 017-wind.png ├── climate.png ├── moderate.png ├── overcast.png ├── thunder.png ├── 011-cloud.png ├── indicator.png └── scattered.png ├── README.md ├── LICENSE ├── style.css ├── index.html └── app.js /icons/sun.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rutikwankhade/SkyMate/HEAD/icons/sun.png -------------------------------------------------------------------------------- /icons/haze.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rutikwankhade/SkyMate/HEAD/icons/haze.png -------------------------------------------------------------------------------- /icons/light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rutikwankhade/SkyMate/HEAD/icons/light.png -------------------------------------------------------------------------------- /icons/water.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rutikwankhade/SkyMate/HEAD/icons/water.png -------------------------------------------------------------------------------- /icons/017-wind.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rutikwankhade/SkyMate/HEAD/icons/017-wind.png -------------------------------------------------------------------------------- /icons/climate.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rutikwankhade/SkyMate/HEAD/icons/climate.png -------------------------------------------------------------------------------- /icons/moderate.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rutikwankhade/SkyMate/HEAD/icons/moderate.png -------------------------------------------------------------------------------- /icons/overcast.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rutikwankhade/SkyMate/HEAD/icons/overcast.png -------------------------------------------------------------------------------- /icons/thunder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rutikwankhade/SkyMate/HEAD/icons/thunder.png -------------------------------------------------------------------------------- /icons/011-cloud.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rutikwankhade/SkyMate/HEAD/icons/011-cloud.png -------------------------------------------------------------------------------- /icons/indicator.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rutikwankhade/SkyMate/HEAD/icons/indicator.png -------------------------------------------------------------------------------- /icons/scattered.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rutikwankhade/SkyMate/HEAD/icons/scattered.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ⚡ SkyMate 2 | Weather app that fetches real time weather data of any location 3 | 4 | ![skymate](https://user-images.githubusercontent.com/47467468/84751219-f025e200-afd9-11ea-9815-69c8c836dc99.png) 5 | 6 | ## Api 7 | I have used [OpenWeather](https://openweathermap.org/api) api to fetch real time weather data. 8 | 9 | ## Built with 10 | html, css, bootstrap and vannila Js 11 | 12 | ## Demo 13 | You can see live demo [here](https://skymate.now.sh/). 14 | 15 | ## Contributing 16 | Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change. 17 | 18 | 19 | ## License 20 | [MIT](https://choosealicense.com/licenses/mit/) 21 | 22 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Rutik Wankhade 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 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | body{background-color: #f2f2f2;} 2 | .container{padding:10px;} 3 | 4 | .container-flex{ 5 | display:flex; 6 | flex-direction: column; 7 | } 8 | .title{ 9 | color:#ffffff; 10 | padding:10px; 11 | } 12 | 13 | .weather-card{ 14 | width:auto; 15 | margin-top:20px; 16 | margin:auto; 17 | } 18 | 19 | .weather-icon{ 20 | height:100px; 21 | width:100px; 22 | margin: auto; 23 | } 24 | .weather{width:200px; 25 | margin:auto; 26 | text-align: center;} 27 | input{ 28 | border:none; 29 | border-radius:5px; 30 | padding:7px; 31 | } 32 | .btn-search{ 33 | color:#ffffff; 34 | background-color:#4d4d4d; 35 | padding:7px; 36 | border-radius:5px; 37 | border:none; 38 | margin:auto; 39 | } 40 | 41 | .weather-data{ 42 | border-radius:5px; 43 | justify-content: center; 44 | align-items: center; 45 | width:auto; 46 | padding:auto; 47 | height:auto; 48 | 49 | } 50 | .lg-card{ 51 | background-color: #ffffff; 52 | border-radius:5px; 53 | margin-top:15px; 54 | width:auto; 55 | height:auto; 56 | text-align: center; 57 | padding:20px; 58 | font-size: 20px; 59 | } 60 | .all-cards{ 61 | display:flex; 62 | flex-direction: row; 63 | flex-wrap: wrap; 64 | justify-content: center; 65 | align-items: center; 66 | } 67 | .sm-card{ 68 | background-color: #ffffff; 69 | border-radius:8px; 70 | margin:10px; 71 | width:130px; 72 | height:130px; 73 | justify-content: center; 74 | align-items: center; 75 | display:flex; 76 | flex-direction: column; 77 | } 78 | .icon{ 79 | height:60px; 80 | width:60px; 81 | margin:auto; 82 | } 83 | .value{ 84 | font-size: 18px; 85 | color:#fc0366; 86 | } 87 | .place{color:#00e673;} 88 | .date{color: #0099ff;} 89 | .temp{font-size:40px ;} 90 | 91 | p{ 92 | font-size:14px; 93 | margin:0px; 94 | padding:0px; 95 | } 96 | .tagline{margin:30px; 97 | text-align: center;} 98 | 99 | footer{ 100 | height:40px; 101 | text-align: center; 102 | background-color:#ffffff; 103 | margin-top:150px; 104 | padding:10px; 105 | font-size: 14px; 106 | } 107 | 108 | /*media queries */ 109 | 110 | @media screen 111 | and (min-device-width: 1200px) { 112 | .container-flex{ 113 | display:flex; 114 | flex-direction: row; 115 | } 116 | .weather-data{ 117 | margin-left:30px; 118 | margin-top:60px; 119 | 120 | } 121 | 122 | .title{margin-left:130px;} 123 | 124 | 125 | } 126 | 127 | 128 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | SkyMate 12 | 13 | 14 | 17 | 18 |
19 |
20 | 21 |
22 |
23 | 24 | 25 |
26 | 27 |
28 |
29 | 30 |

It's a lovely day

31 |

0

32 |

Celsius

33 | 34 |
35 |

Place

36 |

37 |
38 |
39 |
40 |
41 | 42 |
43 |
44 |
45 | 46 |
47 | 48 |

Max

49 |
50 |
51 | 52 |
53 | 54 |

Min

55 |
56 |
57 | 58 |
59 | 60 |

Humidity

61 |
62 |
63 | 64 |
65 | 66 |

Wind Speed

67 |
68 |
69 | 70 |
71 | 72 |

Pressure

73 |
74 |
75 |
76 |
77 | 78 |
79 |

Get real time weather of any location with

80 |

⚡SkyMate

81 |
82 |
83 |
84 |
85 | 86 | 87 | 88 | 89 | 90 | 91 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | 2 | let input=document.querySelector('.city-input'); 3 | let weatherData = document.querySelector('.weather-data'); 4 | let btn=document.querySelector('.btn-search'); 5 | btn.addEventListener('click', ()=>{ 6 | displayWeather(); 7 | 8 | }) 9 | 10 | document.addEventListener('keypress',(event)=>{ 11 | if(event.keyCode===13){ 12 | displayWeather(); 13 | } 14 | }) 15 | //spinner 16 | const renderLoader = () => { 17 | let loader = ` 18 |
19 | 22 |
23 | `; 24 | weatherData.insertAdjacentHTML('beforebegin', loader); 25 | } 26 | 27 | const clearLoader = () => { 28 | let spinner = document.querySelector('.spinner'); 29 | if (spinner) { 30 | spinner.parentElement.removeChild(spinner); 31 | 32 | 33 | } 34 | 35 | } 36 | 37 | 38 | function displayWeather(){ 39 | let place = input.value; 40 | console.log(place); 41 | 42 | let api="https://api.openweathermap.org/data/2.5/find?q="+ place +"&units=metric&appid=850cac4c51c8a61b959dfe0593e8cb07"; 43 | console.log(api); 44 | renderLoader(); 45 | fetch(api) 46 | .then(response=>{ 47 | data=response.json(); 48 | return data; 49 | }) 50 | .then(data=>{ 51 | console.log(data); 52 | clearLoader(); 53 | //access data from the fetched object 54 | let temp=data.list[0].main.feels_like; 55 | let weather=data.list[0].weather[0].description; 56 | let windSpeed=data.list[0].wind.speed; 57 | let maxTemp=data.list[0].main.temp_max; 58 | let minTemp=data.list[0].main.temp_min; 59 | let humidity=data.list[0].main.humidity; 60 | let pressure=data.list[0].main.pressure; 61 | 62 | //display weather 63 | document.querySelector('.temp').textContent=temp; 64 | document.querySelector('.weather').textContent=weather; 65 | document.querySelector('.wind-speed').textContent=windSpeed + " kph"; 66 | document.querySelector('.max-temp').textContent=maxTemp; 67 | document.querySelector('.min-temp').textContent=minTemp ; 68 | document.querySelector('.humidity').textContent=humidity + " %"; 69 | document.querySelector('.pressure').textContent=pressure + " Pa"; 70 | document.querySelector('.place').textContent=place; 71 | 72 | //change icon for different weathers 73 | if( weather=='moderate rain') 74 | weatherIcon.setAttribute('src','icons/moderate.png'); 75 | else if(weather=='haze') 76 | weatherIcon.setAttribute('src','icons/haze.png'); 77 | else if(weather=='scattered clouds') 78 | weatherIcon.setAttribute('src','icons/scattered.png'); 79 | else if(weather=='light rain') 80 | weatherIcon.setAttribute('src','icons/light.png'); 81 | else if(weather=='overcast clouds') 82 | weatherIcon.setAttribute('src','icons/overcast.png'); 83 | 84 | 85 | 86 | 87 | }) 88 | .catch(error=>{ 89 | console.log(error); 90 | alert('please enter a valid place.'); 91 | }) 92 | 93 | 94 | //daily forecast 95 | 96 | let forecastapi="https://cors-anywhere.herokuapp.com/https://api.openweathermap.org/data/2.5/forecast/daily/find?q="+ place +"&units=metric&appid=4b2ab8f040bb8dd2f8d80e58c3e29cb3"; 97 | fetch(forecastapi) 98 | .then(response=>{ 99 | forecastdata=response.json(); 100 | return forecastdata; 101 | }) 102 | .then(forecastdata=>{ 103 | console.log(forecastdata);}) 104 | 105 | 106 | 107 | 108 | 109 | } 110 | let weatherIcon=document.querySelector('.weather-icon'); 111 | 112 | //add today's date 113 | let date=document.querySelector('.date'); 114 | let today=new Date(); 115 | const options={year: 'numeric', month: 'long', day: 'numeric' } 116 | date.textContent=today.toLocaleDateString('en-US',options); 117 | 118 | 119 | 120 | //daily forcast 121 | 122 | --------------------------------------------------------------------------------