├── README.md ├── haze.png ├── mist.png ├── rain.png ├── clear.png ├── cloud.png ├── img04.jpg ├── darzizzl.png ├── LICENSE ├── script.js ├── index.html └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # Weather App 2 | -------------------------------------------------------------------------------- /haze.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hariharans07/PRODIGY_WD_05/HEAD/haze.png -------------------------------------------------------------------------------- /mist.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hariharans07/PRODIGY_WD_05/HEAD/mist.png -------------------------------------------------------------------------------- /rain.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hariharans07/PRODIGY_WD_05/HEAD/rain.png -------------------------------------------------------------------------------- /clear.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hariharans07/PRODIGY_WD_05/HEAD/clear.png -------------------------------------------------------------------------------- /cloud.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hariharans07/PRODIGY_WD_05/HEAD/cloud.png -------------------------------------------------------------------------------- /img04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hariharans07/PRODIGY_WD_05/HEAD/img04.jpg -------------------------------------------------------------------------------- /darzizzl.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hariharans07/PRODIGY_WD_05/HEAD/darzizzl.png -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 Hariharan 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 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | var temp=document.getElementById('temp'); 2 | var cityName=document.getElementById('city') 3 | var humidity=document.getElementById('humidity') 4 | var windspeed=document.getElementById('windspeed') 5 | var searchinput=document.getElementById('searchinput'); 6 | var serchbox=document.getElementById('serchbox') 7 | var body_img=document.getElementById('body_img'); 8 | 9 | var body_data=document.getElementById('body_data') 10 | var deatil=document.getElementById('deatil') 11 | var error=document.getElementById('error') 12 | 13 | 14 | 15 | 16 | 17 | async function checkWeather(city) { 18 | let Upi_key='f27b269d54e4fa1e72993364a80fa8bd' 19 | let repsponse= await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${Upi_key}&units=metric`); 20 | let data= await repsponse.json(); 21 | 22 | 23 | 24 | temp.innerHTML=Math.floor(data.main.temp )+'°C'; 25 | cityName.innerHTML=data.name; 26 | humidity.innerHTML=data.main.humidity +"%"; 27 | windspeed.innerHTML=data.wind.speed+'km/h'; 28 | console.log(data) 29 | 30 | 31 | 32 | 33 | 34 | if (data.weather[0].main=="Clouds") { 35 | body_img.src='cloud.png' 36 | } 37 | else if (data.weather[0].main=='Clear') { 38 | body_img.src='clear.png' 39 | } 40 | else if (data.weather[0].main=='Rain') { 41 | body_img.src='rain.png' 42 | } 43 | else if (data.weather[0].main=='Drizzle') { 44 | body_img.src='darzizzl.png' 45 | } 46 | else if (data.weather[0].main=='Mist') { 47 | body_img.src='mist.png' 48 | } 49 | else if (data.weather[0].main=='Haze') { 50 | body_img.src='haze.png' 51 | } 52 | body_data.style.display='flex'; 53 | deatil.style.display='flex'; 54 | 55 | 56 | } 57 | 58 | 59 | serchbox.addEventListener('click',()=> 60 | { 61 | let cityIn = searchinput.value; 62 | checkWeather(cityIn); 63 | 64 | }) -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 | 17 | 18 |
19 | 20 | 21 | 22 |
23 | 24 |

22 25 |

26 |

New Yourk

27 | 28 |
29 | 30 | 31 |
32 |
33 | 34 |
35 |
50%
36 |

humidity

37 |
38 |
39 |
40 | 41 | 42 |
43 |
15 km/h
44 |

wind speed

45 |
46 | 47 |
48 |
49 | 50 | 51 | 52 |
53 | 54 | 55 | 56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | * 2 | { 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | } 7 | 8 | body 9 | { 10 | display: flex; 11 | justify-content: center; 12 | align-items: center; 13 | min-height: 90vh; 14 | background-color: rgb(10, 60, 63); 15 | font-family: 'Roboto', sans-serif; 16 | background-image: url('img04.jpg'); 17 | } 18 | 19 | .conatiner 20 | { 21 | background: linear-gradient(135deg,rgb(7, 67, 235),rgb(233, 32, 32)); 22 | width: 350px; 23 | height: auto; 24 | border-radius: 20px; 25 | } 26 | 27 | .searchbox 28 | { 29 | display: flex; 30 | margin: 20px 60px; 31 | gap: 20px; 32 | align-items: center; 33 | } 34 | .searchbox input 35 | { 36 | border: none; 37 | outline: none; 38 | width: 450px !important; 39 | height: 30px; 40 | border-radius: 10px; 41 | padding-left: 10px; 42 | font-size: 15px; 43 | 44 | 45 | } 46 | .searchbox i 47 | { 48 | background-color: rgb(155, 140, 140); 49 | padding: 8px 8px; 50 | font-size: 17px; 51 | border-radius: 20px; 52 | } 53 | 54 | .body 55 | { 56 | display: flex; 57 | justify-content: center; 58 | flex-direction: column; 59 | align-items: center; 60 | gap: 10px; 61 | margin-bottom: 40px; 62 | } 63 | 64 | .body img 65 | { 66 | width: 140px; 67 | } 68 | 69 | .body h2 70 | { 71 | font-size: 35px; 72 | color: white; 73 | font-weight: bold; 74 | 75 | } 76 | 77 | .body h3 78 | { 79 | font-size: 22px; 80 | color: white; 81 | font-weight: bold; 82 | } 83 | 84 | .deatil 85 | { 86 | display: flex; 87 | justify-content: space-around; 88 | margin-top: 20px; 89 | padding-bottom: 50px; 90 | } 91 | 92 | 93 | .col{ 94 | display: flex; 95 | align-items: center; 96 | gap: 10px; 97 | } 98 | 99 | .col i 100 | { 101 | font-size: 25px; 102 | color: rgb(50, 45, 45); 103 | 104 | } 105 | 106 | 107 | .col h5 108 | { 109 | font-size: 18px; 110 | color: white; 111 | 112 | } 113 | .col p 114 | { 115 | font-size: 17px; 116 | color: white; 117 | } 118 | 119 | 120 | .deatil 121 | { 122 | display: none; 123 | } 124 | .body 125 | { 126 | display: none; 127 | } 128 | 129 | /* #error 130 | { 131 | text-align: center; 132 | font-size: 20px; 133 | color: white; 134 | padding-bottom: 20px; 135 | display: none; 136 | } */ --------------------------------------------------------------------------------